VUE——vue-amap简单使用_vueamap.initamapapiloader-程序员宅基地

技术标签: 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

智能推荐

KeepAlived+MySQL实现MySQL的高可用_keepalived +mysql-程序员宅基地

文章浏览阅读1.4k次,点赞2次,收藏5次。KeepAlived+MySQL实现MySQL的高可用环境准备2台Centos6.5的服务器两台服务器需要做MySQL互为主从架构在主服务器上安装keepalived#yum -y install keepalived编辑配置文件vim /etc/keepalived/keepalived.conf编写kill_keepalived.sh#vim /root/kill_keep..._keepalived +mysql

树莓派操作系统_树莓派系统-程序员宅基地

文章浏览阅读1w次,点赞39次,收藏104次。树莓派操作系统,适用于树莓派的各种操作系统,树莓派 4 的操作系统列表,这些系统应该也能用于树莓派 3、3B+ 和其他变种,但是请参照项目的官方网站了解详细信息。_树莓派系统

【医学+深度论文:F13】2018 Development of a deep residual learning algorithm to screen for glaucoma from_tomey oa-1000-程序员宅基地

文章浏览阅读393次。13 2018 Scientific ReportsDevelopment of a deep residual learning algorithm to screen for glaucoma from fundus photographyMethod : 分类Dataset :3242 Train(1364N,1768G) Test(50N,60G)      two-dimen..._tomey oa-1000

yml配置的静态全局变量@Value注解无法注入报错的解决方法_yml配置全局变量-程序员宅基地

文章浏览阅读1.7k次。@Value("${root.dir.shp-path}") private String shpPath;这样是获取不到值,并且springboot无法启动,会报注入失败的错误,pring@Value依赖注入是依赖set方法,set方法是普通的对象方法,static变量是类的属性,没有set方法;所以给变量加上static就可以正常运行并获取值了,如果要配置动态的变量,需要另外配置getset的参数类。以及configuration的配置,这些网上有讲解。 @Value("${root._yml配置全局变量

archlinux 解决蓝牙无法连接问题-程序员宅基地

文章浏览阅读3k次,点赞5次,收藏12次。archlinux 解决蓝牙无法连接问题1.安装必要软件包2.启动蓝牙服务3.启动pulseaudio服务1.安装必要软件包pacman -S bluez bluez-utils pulseaudio-bluetooth pavucontrol pulseaudio-alsa2.启动蓝牙服务systemctl enable bluetoothsystemctl start bluetooth3.启动pulseaudio服务pulseaudio -k # _archlinux 解决蓝牙无法连接

骨龄测试软件app_【测试工具】这些APP实用测试工具,不知道你就out了!-程序员宅基地

文章浏览阅读2.4k次。本期,我将给大家介绍14款实用的测试工具,希望能够帮到大家!(建议收藏)UI自动化测试工具1.uiautomator2Github地址:https://github.com/openatx/uiautomator2star:1.9k介绍:openatx开源的ui自动化工具,支持android和ios。主要面向的编程语言是python,api设计简洁易用,在开源社区也是很受欢迎。原理图:与appi..._测骨龄软件

随便推点

docker安装mysql8 Authentication plugin ‘caching_sha2_password 报错解决 开机重启容器_docker mysql8.0 authentication plugin 'caching_sha-程序员宅基地

文章浏览阅读878次。docker安装mysqlcaching_sha2_password_docker mysql8.0 authentication plugin 'caching_sha2_password

Filter过滤器_filterregister-程序员宅基地

文章浏览阅读486次。JavaWeb学习笔记- Filter什么是Filter过滤器是 Servlet 容器中的一个组件,主要负责处理请求和响应,具体来说是负责对请求(HttpServletRequest)进行预处理, 以及对响应(HttpServletResponse)进行后处理,在实现上,基于函数回调,它可以对几乎所有请求进行过滤,所以它是依赖 Servlet 容器的。执行流程个Tomcat,如果Tomcat配置了拦截器,则由先拦截器该请求,拦截器可以选择拦截请求或者放行请求,也可以加强请求。(对用户发送的reque_filterregister

【运维经】第59章——使用vi/vim画路程图_vim uml-程序员宅基地

文章浏览阅读213次。运维经–目录使用vi/vim画路程图各路UML工具已经不胜列举,最近就因为工具兼容性问题比较苦恼,我常用dia(主要是在linux比较方便,源文件小KB级),drawio也不错,但是诸多画图工具之间并不兼容。今天偶遇个文本画图工具,介绍个给搭建,对于一些简单的绘图还是比较方便的。先上个例子+---------+ +---------+ ..._vim uml

逆向入门--简单win32CK逆向手记_用ck能反向跑出密码吗-程序员宅基地

文章浏览阅读2.2k次,点赞2次,收藏6次。最近入坑逆向不就,这个算是真正意义上的第一个CrackMe遂记录逆向过程初观界面 一个经典的输入密码并验证的小程序,先直接运行! 随便的输入密码,显然不对,弹框 incurrent 的提示框开始分析直接拖入OD,搜索工具搜索 Incurrent 这个字符串 跟着搜索结果,找到Ctrl+G 找到内存位置 在这里我们找到了真相,可以通过反汇编窗口很简单的看到这个。 这段看着逻辑简单清晰_用ck能反向跑出密码吗

v-text和v-html以及v-bind的使用_span v-bind v-text-程序员宅基地

文章浏览阅读987次。v-text: v-text是用于操作纯文本,它会替代显示对应的数据对象上的值。当绑定的数据对象上的值发生改变,插值处的内容也会随之更新。注意:此处为单向绑定,数据对象上的值改变,插值会发生变化;但是当插值发生变化并不会影响数据对象的值。其中:v-text可以简写为{{}},并且支持逻辑运算。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title&_span v-bind v-text

在ThinkPad W500 A98上升级Windows 7以及安装硬件驱动和相关程序_联想w500的电脑如何提升硬件-程序员宅基地

文章浏览阅读4.1k次。在ThinkPad W500 A98上升级Windows 7以及安装硬件驱动和相关程序备份数据先备份数据,由于原来的Windows XP已经不能正常启动,因此就使用光驱启动Windows XP PE,在Windows XP PE下查看需要备份的数据。我平时比较注重备份数据,所以大部分有价值的数据都保存在独立的硬盘分区中,经过排查,只有部分软件因为不能指定数据的保存路径才保存到了_联想w500的电脑如何提升硬件

推荐文章

热门文章

相关标签