vue 高德地图使用 vue-amap
此插件文档及使用还不错
https://elemefe.github.io/vue-amap/

<template>
<div class="amap-page-container" style="height:300px;">
<el-amap vid="amapDemo" :zoom="zoom" :center="center" class="amap-demo">
<el-amap-circle v-for="(circle,index) in circles" :key="index" :center="circle.center" :radius="circle.radius" :fill-opacity="circle.fillOpacity" :events="circle.events"></el-amap-circle>
</el-amap>
</div>
</template> <style>
.amap-page-container {
height: 200px;
}
</style> <script>
export default {
data () {
return {
zoom: ,
center: [121.5273285, 31.21515044],
circles: [
{
center: [121.5273285, 31.21515044],
radius: ,
fillOpacity: 0.5,
events: {
click: () => {
alert('click');
}
}
}
]
}
}
};
</script>
vue 高德地图使用 vue-amap的更多相关文章
- vue 高德地图之玩转周边
前言:在之前的博客中,有成功引入高德地图,这是以前的地址 vue 调用高德地图. 因为一些需求,需要使用到地图的周边功能. 完整的项目代码请查看 我的github 一 .先看要实现的结果,参考了链 ...
- VUE 高德地图选取地址组件开发
高德地图文档地址 http://lbs.amap.com/api/lightmap/guide/picker/ 结合步骤: 1.通过iframe内嵌引入高德地图组件 key就选你自己申请的key &l ...
- Vue 高德地图 路径规划 画点
CDN 方式 <!--引入高德地图JSAPI --> <script src="//webapi.amap.com/maps?v=1.4.13&key=您申请的ke ...
- vue 高德地图
index.html <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119. ...
- js/vue 高德地图绘制驾车路线图
地图容器: // css要给此容器设置宽高 <div class="map_container"></div> 画图 data{ return { Clng ...
- vue+Element-ui 的 el-cascader 做高德地图的省市区三级联动并且是异步加载,点击省市区跳转到对应的区(地图可以通过后端返回的点进行标点)
// 完整版高德地图,可以复制代码直接使用 index.html <script type="text/javascript" src="https://webap ...
- 【高德地图API】从零开始学高德JS API(一)地图展现——仙剑地图,麻点图,街景,室内图
原文:[高德地图API]从零开始学高德JS API(一)地图展现——仙剑地图,麻点图,街景,室内图 摘要:关于地图的显示,我想大家最关心的就是麻点图,自定义底图的解决方案了吧.在过去,marker大于 ...
- 【教程】高德地图使用ECharts实现数据可视化
关于百度地图结合ECharts实现数据可视化的资料已经很多了,毕竟是官方提供支持的,这里就不再赘述.今天我们来讲一下让高德地图与ECharts结合来实现数据可视化图表的展示. 一.ECharts 高德 ...
- 在vue中使用高德地图开发,以及AMap的引入?
百度引入BMap ,一个import 即可,可AMap 却报AMap is not difined ? 1.首先在 externals: { "BMap": "BMap& ...
随机推荐
- Android 获取SD路径,存储空间大小的方法
Android用 Environment.getExternalStorageDirectory() 方法获取 SD 卡的路径 , 卡存储空间大小及已占用空间获取方法 : /* 获取存储卡路径 */ ...
- 2019 校内赛 RPG的天赋分支(贪心)
Problem Description 很多游戏都有天赋树的概念,天赋树的不同分支具有不同的属性加成,那么合理选择分支就非常重要了.Luke最近沉迷一款RPG游戏,它的天赋树机制如下:角色具有n个可选 ...
- Oracle数据库中遇到的坑
最近在帮别人忙写程序,用的是Oracle数据库,写一篇文章来说说在Oracle中遇到的一些坑: 1. PL/SQL develop的坑: 由于在这里工作环境是内网完全,无奈只能使用PL/SQL 工具, ...
- redis执行lua文件
1.编写lua文件 还lua表示循环插入1-100的键为1-100值为1-100的键值对到redis中 for i=0,100 do redis.call("set",i,i) e ...
- 200行Go代码实现自己的区块链——区块生成与网络通信
go启动后,可以用telnet登录访问. 注意端口配置写在.env里面. 源码:https://github.com/mycoralhealth/blockchain-tutorial/tree/ma ...
- WebService学习总结(一)——WebService的相关概念
一.序言 大家或多或少都听过 WebService(Web服务),有一段时间很多计算机期刊.书籍和网站都大肆的提及和宣传WebService技术,其中不乏很多吹嘘和做广告的成 分.但是不得不承认的是W ...
- linux之/proc
/proc是Linux或UNIX中的一种伪文件系统机制,提供了访问内核运行结构.改变内核设置的实时数据. 与ext4.NFS.FAT32等文件系统不同,/proc中的数据存放在内存而不是硬盘上. 在/ ...
- 微信小程序之自定义select下拉选项框组件
知识点:组件,animation,获取当前点击元素的索引与内容 微信小程序中没有select下拉选项框,所以只有自定义.自定义的话,可以选择模板的方式,也可以选择组件的方式来创建. 这次我选择了组件, ...
- nginx根据cookie分流
转载互联网 nginx根据cookie分流众所周知,nginx可以根据url path进行分流,殊不知对于cookie分流也很强大,同时这也是我上篇提到的小流量实验的基础. 二话不说,先看需求,两台服 ...
- qml: 自定义按钮-- 仿QML自带控件;
import QtQuick 2.0 Rectangle { id: btn; width:; height:; radius:; border.color: "#A3A3A3"; ...