此插件文档及使用还不错

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的更多相关文章

  1. vue 高德地图之玩转周边

    前言:在之前的博客中,有成功引入高德地图,这是以前的地址  vue 调用高德地图. 因为一些需求,需要使用到地图的周边功能. 完整的项目代码请查看  我的github 一 .先看要实现的结果,参考了链 ...

  2. VUE 高德地图选取地址组件开发

    高德地图文档地址 http://lbs.amap.com/api/lightmap/guide/picker/ 结合步骤: 1.通过iframe内嵌引入高德地图组件 key就选你自己申请的key &l ...

  3. Vue 高德地图 路径规划 画点

    CDN 方式 <!--引入高德地图JSAPI --> <script src="//webapi.amap.com/maps?v=1.4.13&key=您申请的ke ...

  4. vue 高德地图

    index.html <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119. ...

  5. js/vue 高德地图绘制驾车路线图

    地图容器: // css要给此容器设置宽高 <div class="map_container"></div> 画图 data{ return { Clng ...

  6. vue+Element-ui 的 el-cascader 做高德地图的省市区三级联动并且是异步加载,点击省市区跳转到对应的区(地图可以通过后端返回的点进行标点)

    // 完整版高德地图,可以复制代码直接使用 index.html <script type="text/javascript" src="https://webap ...

  7. 【高德地图API】从零开始学高德JS API(一)地图展现——仙剑地图,麻点图,街景,室内图

    原文:[高德地图API]从零开始学高德JS API(一)地图展现——仙剑地图,麻点图,街景,室内图 摘要:关于地图的显示,我想大家最关心的就是麻点图,自定义底图的解决方案了吧.在过去,marker大于 ...

  8. 【教程】高德地图使用ECharts实现数据可视化

    关于百度地图结合ECharts实现数据可视化的资料已经很多了,毕竟是官方提供支持的,这里就不再赘述.今天我们来讲一下让高德地图与ECharts结合来实现数据可视化图表的展示. 一.ECharts 高德 ...

  9. 在vue中使用高德地图开发,以及AMap的引入?

    百度引入BMap ,一个import 即可,可AMap 却报AMap is not difined ? 1.首先在 externals: { "BMap": "BMap& ...

随机推荐

  1. STL之set和map

    by attack666      set与map   map 内部实现是一棵红黑树 定义 key和value分别对应着两种类型 map<key, value> mp; 内部函数 直观的理 ...

  2. HDU5909Tree Cutting

    题目大意 给定一颗树,每个点有点权,问对于每个m,有多少个联通块的权值异或和为m. 题解 解法1:可以考虑树形dp,设dp[u][i]表示以u为根的子树中u必须选,联通块权值异或值为i的联通块个数. ...

  3. hdu 1686 Oulipo (kmp)

    Problem Description The French author Georges Perec (1936–1982) once wrote a book, La disparition, w ...

  4. JAVA多线程之volatile 与 synchronized 的比较

    一,volatile关键字的可见性 要想理解volatile关键字,得先了解下JAVA的内存模型,Java内存模型的抽象示意图如下: 从图中可以看出: ①每个线程都有一个自己的本地内存空间--线程栈空 ...

  5. spring中的@Bean是否一定要与@Configuration一起用

        版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/little_newBee/article/details/80383691 在使用sprin ...

  6. The 2018 ACM-ICPC Asia Beijing Regional Contest

    http://hihocoder.com/problemset/problem/ #1870 : Jin Yong’s Wukong Ranking List 我是每加1个点就dfs判断1次. 正解是 ...

  7. operator new和operator delete

    从STL源码剖析中看到了operator new的使用 template<class T> inline void _deallocate(T* buffer) { ::operator ...

  8. Educational Codeforces Round 55 (Rated for Div. 2) A - Vasya and Book

    传送门 https://www.cnblogs.com/violet-acmer/p/10035971.html 题意: 一本书有n页,每次只能翻 d 页,问从x页到y页需要翻动几次? 注意:往前翻最 ...

  9. Game1---游戏设计

    自己玩的一些游戏简单策划 先设计3个类似的游戏场景,第一个场景只进行时间限制,第二个场景道具进行上下移动,第三个场景随机生成敌人: 1.上面的台阶道具应该是随着人物的高度上升逐渐生成,逐渐呈现在玩家的 ...

  10. MySQL存储过程实现动态执行SQL

    --存储过程名和参数,参数中in表示传入参数,out标示传出参数,inout表示传入传出参数 create procedure p_procedurecode(in sumdate varchar(1 ...