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& ...
随机推荐
- GCC online documentation
@2019-02-21 [小记] 编译规则.关键字属性等一些参考手册说明 GCC online documentation
- 故障排错-ping dup!
ping DUP! ping一个vc中虚拟机的地址发现如下,出现了DUP! . 解决方式如下: 1.根据mac地址找到虚拟机网卡的端口组 然后编辑绑定和故障切换,切换负责平衡
- cf571B Minimization (dp)
相当于是把%k相同的位置的数分为一组,组与组之间互不干扰 然后发现一组中可以任意打乱顺序,并且一定是单调排列最好,那个值就是最大值减最小值 所以我给所有数排序以后,同一组应该选连续的一段最好 然后发现 ...
- poj3259Wormholes (Bellman_Ford/SPFA/Floyed算法判断是否存在负环)
题目链接:http://poj.org/problem?id=3259 题目大意:一个图,有n个顶点,其中有m条边是双向的且权值为为正,w条边是单向的且权值为负,判断途中是否存在负环,如果有输出YES ...
- NowCoder--牛客练习赛30 C_小K的疑惑
题目链接 :牛客练习赛30 C_小K的疑惑 i j k 可以相同 而且 距离%2 只有 0 1两种情况 我们考虑 因为要 d(i j)=d(i k)=d(j k) 所以我们只能找 要么三个点 任意两个 ...
- zxing二维码的生成与解码(C#)
ZXing是一个开源Java类库用于解析多种格式的1D/2D条形码.目标是能够对QR编码.Data Matrix.UPC的1D条形码进行解码. 其提供了多种平台下的客户端包括:J2ME.J2SE和An ...
- Day019--Python--反射
1. issubclass, type, isinstance issubclass 判断XXX类是否是XXX类的子类 type 给出XXX的数据类型. 给出创建这个对象的类 isinstance 判 ...
- scrapy关键字爬取百度图库(一)
刚入门学习python的菜鸟,如有错误,还望指教 爬取百度图库需要知道百度图库的加载方式是通过下拉加载的,所以我们需要分析Ajax请求来爬取每一页的数据信息 表述不清直接上图片 图片一是刷新页面后加载 ...
- Luogu P4306 [JSOI2010]连通数 传递闭包
正解其实是\(Tarjan\) + \(拓扑拓扑\),但是却可以被\(O(N^3 / 32)\)复杂度的传递闭包水过去.心疼一下写拓扑的小可爱们. 学到一个\(bitset\)优化布尔图的骚操作,直接 ...
- 【清北学堂2018-刷题冲刺】Contest 4
Task 1:序列 [问题描述] 小H原本有一个由连续的正整数组成的序列,如{4,5,6}或{10,11,12,13,14,15,16},但是她最近睡眠不足,只能记得其中的一些数字.她想知道,她最少 ...