VUE——vue-amap简单使用

一、 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 >