此插件文档及使用还不错

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. 用keras实现基本的文本分类任务

    数据集介绍 包含来自互联网电影数据库的50000条影评文本,对半拆分为训练集和测试集.训练集和测试集之间达成了平衡,意味着它们包含相同数量的正面和负面影评,每个样本都是一个整数数组,表示影评中的字词. ...

  2. Hdoj 2289.Cup 题解

    Problem Description The WHU ACM Team has a big cup, with which every member drinks water. Now, we kn ...

  3. 【BZOJ5298】[CQOI2018]交错序列(动态规划,矩阵快速幂)

    [BZOJ5298][CQOI2018]交错序列(动态规划,矩阵快速幂) 题面 BZOJ 洛谷 题解 考虑由\(x\)个\(1\)和\(y\)个\(0\)组成的合法串的个数. 显然就是把\(1\)当做 ...

  4. docker-网络基础

    网络 Docker 网络从覆盖范围可分为单个 host 上的容器网络和跨多个 host 的网络 Docker 安装时会自动在 host 上创建三个网络, ⚡ root@bogon  /home  ...

  5. DBC格式解析(以文本形式打开)

    我们先来看一段数据 BO_ 1024 VOLTAGE01: 8 BMS2 SG_ V01 : 7|16@0+ (0.001,0) [0|0] "" Vector__XXX SG_ ...

  6. Python之面向对象编程学习

    不知不觉,学到了python的面向对象编程思想.今天我们来讨论下面向对象编程的思想. 顾名思义,面向对象,就是面向于对象,这里所说的对象不是你现实生活中你的女朋友,你的老婆,你的爱人,在编程的世界里面 ...

  7. Nginx环境的搭建

    源码安装 不同发行版使用的安装程序都不同,所以官方提供了源代码,我们需要将原代码编译后再安装. 源程序使用C语言开发,所以需要安装C语言的编译环境. 安装Nginx环境和第三方支持库 yum inst ...

  8. A1120. Friend Numbers

    Two integers are called "friend numbers" if they share the same sum of their digits, and t ...

  9. Xml一(基本语法和约束)、

    XML:eXtensible Markup Language 可扩展标记语言 version="1.0" * 可扩展:所有的标签都是自定义的. * 功能:数据存储 * 配置文件 * ...

  10. Day12--Python--生成器,生成器函数,推导式,生成器表达式

    一.昨日内容回顾 惰性机制(只有执行__next__()才会取值)二.今日主要内容 1.生成器 生成器:本质是迭代器,写法和迭代器不一样.用法和迭代器一样. ※生成器记录的是代码 2.生成器函数 生成 ...