我使用的是vue-cli2
1.下载插件:
npm install vue-amap --save
2.注册高德key:
传送门:https://console.amap.com/dev/key/app
注册截图
3.main.js中初始化:
import VueAMap from 'vue-amap';
Vue.use(VueAMap);
VueAMap.initAMapApiLoader({
key: 'your_gaode_key',
plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor','AMap.Geolocation'],
v: '1.4.4'
});
4.组件示例代码:
<template>
<div>
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>这是地图组件</span>
</div>
<div class="text item">
1.在main.js中初始化高德组件
</div>
<div class="text item">
2.模板中设置地图容器
</div>
<div class="text item">
3.data中定义plugin
</div>
<div class="text item">
4.当前位置:({{lat}},{{lng}})
</div>
</el-card>
<el-card class="ditu-container" body-style="padding:0px">
<div class="amap-wrapper">
<el-amap class="amap-box" vid="amapDemo" :plugin="plugin" :zoom="zoom" :center="center"></el-amap>
</div>
</el-card>
</div>
</template>
<script>
export default {
name:'Ditu',
data(){
let self = this;
return {
zoom:15,
loaded: false,
center: [121.59996, 31.197646],
lng: 0,
lat: 0,
plugin: [
//地图类型..
{
pName: 'MapType',
defaultType: 0,
events: {
init(instance) {}
}
},
//小地图导航..
{
pName: 'OverView',
isOpen:true,
visible:false,
events: {
init(instance) {}
}
},
//缩放比例尺..
{
pName: 'Scale',
visible:false,
events: {
init(instance) {}
}
},
//地图工具条..
{
pName: 'ToolBar',
visible:false,
position:'LB', //LT:左上角; RT:右上角; LB:左下角; RB:右下角; 默认位置:LT
ruler:true, //标尺键盘是否可见
locate:true, //是否显示定位按钮
direction:true, //方向键盘是否可见
liteStyle:false, //是否使用精简模式
autoPosition:false, //是否自动定位,即地图初始化加载完成后,是否自动定位的用户所在地
events: {
init(instance) {}
}
},
//定位按钮..
{
enableHighAccuracy: true, //是否使用高精度定位,默认:true
timeout: 10, //超过10秒后停止定位,默认:无穷大
maximumAge: 0, //定位结果缓存0毫秒,默认:0
convert: true, //自动偏移坐标,偏移后的坐标为高德坐标,默认:true
showButton: true, //显示定位按钮,默认:true
buttonPosition: 'RB', //定位按钮停靠位置,默认:'LB',左下角
showMarker: true, //定位成功后在定位到的位置显示点标记,默认:true
showCircle: true, //定位成功后用圆圈表示定位精度范围,默认:true
panToLocation: true, //定位成功后将定位到的位置作为地图中心点,默认:true
zoomToAccuracy:true, //定位成功后调整地图视野范围使定位位置及精度范围视野内可见,默认:f
extensions:'all',
pName: 'Geolocation',
events: {
init(o) {
o.getCurrentPosition((status, result) => {
if (result && result.position) {
self.lng = result.position.lng;
self.lat = result.position.lat;
self.center = [self.lng, self.lat];
self.loaded = true;
self.$nextTick();
}
});
}
}
}
]
}
},
created(){
}
}
</script>
<style scoped>
.ditu-container{
width:500px;
height:500px;
margin:20px auto;
}
.amap-wrapper {
width: 500px;
height: 500px;
}
.text {
font-size: 14px;
}
.item {
margin-bottom: 18px;
}
.clearfix:before,
.clearfix:after {
display: table;
content: "";
}
.clearfix:after {
clear: both
}
.box-card {
width: 95%;
margin-left:2.5%;
margin-top:20px;
}
</style>
5.示例样式:
示例截图6.插件使用报错:
报错截图当我们在plugin中使用插件有时会报错如上错误,这是因为在初始化的时候没有加载相应组件,需要在main.js中加入正在使用的组件
VueAMap.initAMapApiLoader({
key: 'your_gaode_key',
plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor','AMap.Geolocation'],
v: '1.4.4'
});
网友评论