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& ...
随机推荐
- 自学华为IoT物联网_02 常见物联网通信技术
点击返回自学华为IoT物流网 自学华为IoT物联网_02 常见物联网通信技术 两类技术: 有线通信技术 无线通信技术 一. 有线通信技术 1.1 物联网有线技术介绍及对比 ETH 主要用于支持以太网标 ...
- 【BZOJ4408】[FJOI2016]神秘数(主席树)
[BZOJ4408][FJOI2016]神秘数(主席树) 题面 BZOJ 洛谷 题解 考虑只有一次询问. 我们把所有数排个序,假设当前可以表示出的最大数是\(x\). 起始\(x=0\). 依次考虑接 ...
- luogu4602 混合果汁 (主席树)
按照美味值从大到小排序,对于每个询问,我想二分找到一个前缀来满足条件 那么以单价为下标建主席树,维护区间的最大体积和 以及满足这个最大体积需要的价钱 然后二分答案,再在主席树上二分,找到恰好满足的那个 ...
- iview tree 获取选中子节点的整条数据链
这样子获取到数据是,checked等于true的,获取不到他的父级,父级的父级 解决办法代码如下: //需要有一个唯一ID //==================================== ...
- 软件在 win7 上运行时显示乱码
一个用户反应后,我当时就蒙圈了,因为之前从未遇到过: 百度一下后,发现用户的这种情况比较特殊,从表面上看,[控制面板]和[注册表]相关项设置都正常,为什么还显示乱码呢? 到最后一步如果已经是(简体,中 ...
- JavaScript(JS)基本语法(一)
https://www.cnblogs.com/haiyan123/p/7577598.html 一.JavaScript的历史 1992年Nombas开发出C-minus-minus(C--)的嵌入 ...
- tensor flow中summary用法总结
对于用法的总结详细的参见博文https://www.cnblogs.com/lyc-seu/p/8647792.html
- 苹果电脑利用curl下载数据集
在看tensorflow书上迁徙学习的这一部分的时候,书上说利用 curl http://download.tensorflow.org/example_images/flower_photos.tg ...
- 爬虫之requests请求库
介绍 #介绍:使用requests可以模拟浏览器的请求,比起之前用到的urllib,requests模块的api更加便捷(本质就是封装了urllib3) #注意:requests库发送请求将网页内容下 ...
- centos7.4+openvpn-2.4.4+easy-rsa-3.0
[生产环境物理机安装]openvpn2.4.4服务搭建,并可以正常运行 服务器内网:172.31.33.64 openvpn:10.8.0.0 本机ifconfig yum install epel- ...