VUE——vue-amap简单使用_kinding的博客-程序员宝宝_vue-amap

技术标签: VUE  

一、 down一个vue webpack的模板

vue init webpack vueamap
根据提示完成模板下载,此处我的项目中选择router为yes 其他测试插件全为no  vueamap为文件夹名称

模板下载后 安装依赖
cnpm install

依赖安装完成后 执行开发环境

npm run dev

若提示在"localhost:8080"上查看效果,在浏览器上查看效果,若出现VUE效果 则模板下载成功

二、 安装vue-amap

安装vue-amap

cnpm install vue-amap --save

安装完成后,main.js文件中引入

import VueAMap from "vue-amap";
Vue.use(VueAMap);

初始化高德地图,此处需要有一个KEY,可以到高德地图平台上去申请.

初始化高德地图的key与插件

VueAMap.initAMapApiLoader({
key: "e1dedc6bdd765d46693986ff7ff969f4",
plugin: [
"AMap.Autocomplete", //输入提示插件
"AMap.PlaceSearch", //POI搜索插件
"AMap.Scale", //右下角缩略图插件 比例尺
"AMap.OverView", //地图鹰眼插件
"AMap.ToolBar", //地图工具条
"AMap.MapType", //类别切换控件,实现默认图层与卫星图、实施交通图层之间切换的控制
"AMap.PolyEditor", //编辑 折线多,边形
"AMap.CircleEditor", //圆形编辑器插件
"AMap.Geolocation" //定位控件,用来获取和展示用户主机所在的经纬度位置
],
uiVersion: "1.0"
});

三、 使用

下面开始正式运用此组件库
注:后续所用到的配置并非全面配置,若有不懂或想详细了解,
请移步vue-amap文档: vue-amap文档
文档介绍比较简单,建议到高德官方查看参考手册对照使用

高德参考手册:参考手册

1,构建地图

模板:

< div class= "amap-wrapper" >
< el-amap class= "amap-box" vid= "map"
:zoom="zoom"
:center="center" >
</ el-amap >
</ div >

data中数据:

zoom: 16,
center:[ 121.406051, 31.179695],

保存后,浏览器中运行,效果图如下:







2,添加标注点(此处以地图的center为位置点添加)

模板:
< div class= "amap-wrapper" >
< el-amap vid= "amapDemo"
:center="center"
:zoom="zoom"
class= "amap-demo" >
< el-amap-marker vid= "marker"
:position="center"
:label="label"
>
</ el-amap-marker >
</ el-amap >
</ div >
增加一条label数据,作为该点的介绍使用 ,可参照文档自行决定是否添加
label:{
content: '钦汇园',
offset:[ 10, 12]
},
保存后结果如下图 marker已经加载了


3,添加圆形区域 (此处依旧以中心点为圆心 半径为100)
注意:添加圆形区域时,要在初始化插件里初始化"AMap.CircleEditor",否则会报错

模板:
< div class= "amap-wrapper" >
< el-amap vid= "amapDemo"
:center="center"
:zoom="zoom"
class= "amap-demo" >
< el-amap-marker vid= "marker"
:position="center"
:label="label"
>
</ el-amap-marker >
< el-amap-circle vid= "circle"
:center="center"
:radius="radius"
fill-opacity= "0.2"
strokeColor= "#38f"
strokeOpacity= "0.8"
strokeWeight= "1"
fillColor= "#38f"
>
</ el-amap-circle >
</ el-amap >
</ div >
拓展:动态更改圆形区域的半径,可用于设置范围
此处我以“精度++”按钮为例,每点击一次半径加10

data数据:

radius: 100

增加事件:

addRadius(){
this.radius+= 10;
}

PS:添加其他覆盖物,如折线,图片,多边形等,用法与此类似,参照官方文档进行使用即可

效果图如下:



3,使用插件

只用插件时,一定要在前面initAMapApiLoader里面进行初始化,否则会报错

模板:

< div class= "amap-wrapper" >
< el-amap class= "amap-box" vid= "map"
:zoom="zoom"
:center="center"
:plugin="plugin" >
< el-amap-marker vid= "marker"
:position="center"
:label="label"
>
</ el-amap-marker >
< el-amap-circle vid= "circle"
:center="center"
:radius="radius"
fill-opacity= "0.2"
strokeColor= "#38f"
strokeOpacity= "0.8"
strokeWeight= "1"
fillColor= "#38f"
>
</ el-amap-circle >
</ el-amap >
</ div >

data里添加插件数据:

plugin: [
{
pName: 'ToolBar', //工具条插件
position: 'LB',
},
{
pName: 'MapType', //卫星与地图切换
defaultType: 0,
showTraffic: true, //实时交通图层
},
{
pName: 'OverView',
//isOpen:true//鹰眼是否打开
},
{
pName: 'Scale'
},
{
pName: 'Geolocation', //定位插件
showMarker: false,
events:{
init(o){
//定位成功 自动将marker和circle移到定位点
o.getCurrentPosition((status, result) => {
console.log(result);
vm.center=[result.position.lng,result.position.lat]
});
}
}
}
]

效果图如下:



全部代码如下:

< template >
< div >
< p >{ {msg}} </ p >
< button @click="addRadius" >精度++ </ button >
< hr >
< div class= "amap-wrapper" >
< el-amap class= "amap-box" vid= "map"
:zoom="zoom"
:center="center"
:plugin="plugin" >
< el-amap-marker vid= "marker"
:position="center"
:label="label"
>
</ el-amap-marker >
< el-amap-circle vid= "circle"
:center="center"
:radius="radius"
fill-opacity= "0.2"
strokeColor= "#38f"
strokeOpacity= "0.8"
strokeWeight= "1"
fillColor= "#38f"
>
</ el-amap-circle >
</ el-amap >
</ div >
</ div >
</ template >
< script >
export default {
name: 'home',
data(){
let vm= this;
return{
msg: 'vue-amap demo',
zoom: 16,
center:[ 121.406051, 31.179695],
label:{
content: '钦汇园',
offset:[ 10, 12]
},
radius: 100,
plugin: [
{
pName: 'ToolBar', //工具条插件
position: 'LB',
},
{
pName: 'MapType', //卫星与地图切换
defaultType: 0,
showTraffic: true, //实时交通图层
},
{
pName: 'OverView',
//isOpen:true//鹰眼是否打开
},
{
pName: 'Scale'
},
{
pName: 'Geolocation', //定位插件
showMarker: false,
events:{
init(o){
//定位成功 自动将marker和circle移到定位点
o.getCurrentPosition((status, result) => {
console.log(result);
vm.center=[result.position.lng,result.position.lat]
});
}
}
}
]
}
},
methods:{
addRadius(){
this.radius+= 10;
}
}
}
</ script >
< style scoped >
hr{
border-color: red;
border-style: dashed;
}
.amap-wrapper{
height: 300px;
}
</ style >





版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_36111804/article/details/80816144

智能推荐

linux splice函数,关于splice函数未定义_weixin_40001634的博客-程序员宝宝

没有用好man的下场呵呵,找个错误一直不知所措。先看splice函数:1 SPLICE(2) Linux Programmer's Manual SPLICE(2)23 NAME4 splice - splice data to/froma pipe56 SYNOPSIS7 #define _GNU_SO...

安装最新版mysql-8.0.18(yum安装)_未语的博客-程序员宝宝

注意安装mysql-8.0.18前要先删除本机安装的mariadb检查已经安装的mariadb列表rpm -qa | grep mariadb执行上面命令后会列出本机安装的mariadb列表例如:mariadb-libs-5.5.60-1.el7_5.x86_64然后执行删除,删除分为2种1,rpm -e --nodeps 后面跟上上面得到的结果rpm -e --nodeps mariadb-libs-5.5.60-1.el7_5.x86_642,yum -y remo.

csdn 博客界面右边目录栏消失的解决办法_lgxo的博客-程序员宝宝

不小心把csdn中博客界面的右边目录栏给搞消失了,在网上搜了好长时间也没有找到解决方法,但是误打误撞又改回去了,于是写了这篇博客帮助和我一样不小心更改了博客界面的朋友。

生成函数 计算机,吉布斯自由能热力学函数数值一键生成计算器_独识的博客-程序员宝宝

[/caption]吉布斯自由能(Gibbs free energy)在化学热力学中为判断过程进行的方向而引入的热力学函数。又称自由焓、吉布斯自由能或自由能。 自由能指的是在某一个热力学过程中,系统减少的内能中可以转化为对外做功的部分。自由能(free energy)在物理化学中,按照亥姆霍兹的定容自由能F与吉布斯的定压自由能G的定义。吉布斯自由能是自由能的一种。自由能指的是在某一个热力学过程中...

POJ - 1195 Mobile phones 二维树状数组 / 线段树_mmk27的博客-程序员宝宝

题目链接:https://vjudge.net/problem/POJ-1195有一个正方形区域S*S(1&lt;=S&lt;=1024)。含有很多小区域,小区域编号从0开始,直到S-1。每一个单位各是一个区域,每个区域上有一定数量的手机,同时每一个区域上的手机的数目也是不断变化的,现在要一边进行修改某些单位格子内的手机的数目,同时也要询问某些区域的手机数目。 数据保证每个格子内手机数目一直在...

Tomcat 报错 Control character in cookie value or attribute 解决方法_CJDN_001的博客-程序员宝宝

在Windows下,Eclipse使用的内部浏览器(Window-&gt;Web Browser-&gt;Internal Web Browser)是系统自带的IE浏览器。在代码中没有使用Cookie时,Tomcat报错 Control character in cookie value or attribute,可以在IE的设置(右上角的小齿轮)中删除Cookie(设置(右上角小齿轮)—&gt;...

随便推点

如何使用 VLD 检测程序中的内存泄漏?_weixin_30339969的博客-程序员宝宝

下载地址:https://kinddragon.github.io/vld/下载 windows 安装包,进行安装即可,它会给你设置好 vs 的环境变量,使用时,直接在 vs ide 中包含即可。如何 在 Call Stack 位置无法显示文件名,和跟踪堆栈函数,则需要你更改 vld.ini 默认配置文件中的编码格式为 unicode然后它会在调试器中打印出调用堆栈,根据这个信息进行定位即可...

方差分析_root_zhb的博客-程序员宝宝

方差分析(Analysis of Variance,简称ANOVA)用于两个及两个以上样本均数差别的显著性检验。作用:确定参数对算法性能的影响基础概念:方差分析如何理解p值和F值Sum.sq.——平方和d.f. ——自由度Mean.Sq.——均方F-value——F值p-value——p值关于F值和p值每一个F值都会对应一个p值,F值越大,p值越小所以实际上F值和p值都能用来检验显著性差异p-value就是用于检验特征与变量之间相关性的假设你给出α值(常常取0.05,0.01

二分查找_aomi7565的博客-程序员宝宝

一、对有序后数组进行查找,未查找到返回 -1public static int swap(int[] t,int x){ int mid,low,high; low = 0; high = t.length-1; while(low &lt; high){ mid = (low+high)/2; if(t[mid] &gt; x){ high = mi...

视频教程-软考系统集成项目管理工程师视频教程(下)-软考_weixin_28882885的博客-程序员宝宝

软考系统集成项目管理工程师视频教程(下) 项目管理师、信息系统项目管理师、项...

zblog采集教程无需写入zblog采集规则_147SEO的博客-程序员宝宝_blog采集

相信很大部分的SEO朋友都有做过网站采集的事情,人工复制粘贴也属于采集的一种,也用利用采集软件、插件快速获取内容的。即便是搜索引擎推出各种各样算法来处理采集的网站,但是还是有40%的人一直做得比较好,当然这些肯定不是我们看到的这么简单。并不是我们只需要搭建好网站,然后人工复制、或者软件采集,然后坐等收录排名流量,包括我身边也有不少朋友做得确实不错,不管是收录还是排名都很好。今天小编就教大家怎么做好一个采集站!一、网站如何进行采集内容采集相信有不少人对它爱不释手,有些人对它避而远之!说爱它,.

推荐文章

热门文章

相关标签