VUE——vue-amap兼容原生SDK+使用官方UI

    由于业务需要,vue-amap提供的组件不够实现部分业务,需要使用高德原生SDK来定制化。对于vue-amap,都有init事件,参数为高德的实例,因此可以自由的将原生SDK和vue-amap结合使用

    对于el-map组件,支持一个amap-manage属性,通过这个属性可以再任何地方获取高德原生Amap.Map实例

    记录两个简单案例,以便后续查阅 

使用官方UI,通过原生的方法增加circle 以及信息窗体。

最终效果图下3张图

页面初始的时候 地图生成后,使用官方UI生成marker,点击增加circle按钮 会以marker为中心绘制一定半径的圆形区域,点击更改range按钮,增加圆形区域半径,点击信息窗体按钮 绘制信息窗口

VUE——vue-amap兼容原生SDK+使用官方UI_第1张图片VUE——vue-amap兼容原生SDK+使用官方UI_第2张图片VUE——vue-amap兼容原生SDK+使用官方UI_第3张图片

组件部分:

< template >
< div class= "amap-page-container" >
< el-amap vid= "amapDemo"
:center="center"
:amap-manager="amapManager"
:zoom="zoom"
:events="events"
class= "amap-demo" >
el-amap >
< div class= "toolbar" >
< button @click="addCircle()" >增加 circle button >
< button @click="changeRadius()" >更改 range button >
< button @click="addInfoWindow()" >信息窗体 button >
div >
div >
template >

注:要对el-map组件给定宽高的样式,否则刷新页面可能会有白屏的情况。

< style scoped >
.amap-page-container {
width: 100%;
height: 300px;
}
style >


JS部分:

< script >
import {AMapManager} from "vue-amap"
let amapManager= new AMapManager();
export default{
data () {
return {
zoom: 16,
center: [121.329402,31.228667],
amapManager,
events: {
init(o) {
AMapUI.loadUI(['overlay/SimpleMarker'],function(SimpleMarker){
const marker=new SimpleMarker({
iconLabel: {
innerHTML: 'mm', //设置文字内容
style: {
color: '#fff' //设置文字颜色
}
},
iconStyle: 'green',
map: o,
position: o.getCenter()
})
//marker.setMap(o);
})
}
},
radius: 100,
currentCircle: null
}
},
methods:{
addCircle(){
let map=amapManager.getMap();
let circle= new AMap.CircleMarker({
center: [ 121.329402, 31.228667],
radius: this.radius,
strokeColor: '#38f',
strokeOpacity: '0.8',
strokeWeight: 1,
fillColor: '#38f',
fillOpacity: '0.2'
//map:map //写法一
})
circle.setMap(map); //写法二
this.currentCircle=circle;
},
changeRadius(){
this.radius+= 10;
this.currentCircle.setRadius( this.radius);
},
addInfoWindow(){
let map=amapManager.getMap();
AMapUI.loadUI([ 'overlay/SimpleInfoWindow'], function(SimpleInfoWindow){
var infoWindow = new SimpleInfoWindow({
infoTitle: '这里是标题',
infoBody: '

这里是内容。

'
});
infoWindow.open(map, map.getCenter());
})
}
}
};
script >


注:绘制marker或者circle有两种写法,以marker为例,circle同理

第一种,直接在配置中指定在哪个map实例上绘制

const marker=new SimpleMarker({
iconLabel: {
innerHTML: 'mm', //设置文字内容
style: {
color: '#fff' //设置文字颜色
}
},
iconStyle: 'green',
map: o,
position: o.getCenter()
})

第二种,配置好marker ,通过setMap方法进行绘制

const marker=new SimpleMarker({
iconLabel: {
innerHTML: 'mm', //设置文字内容
style: {
color: '#fff' //设置文字颜色
}
},
iconStyle: 'green',
position: o.getCenter()
})
marker.setMap(o);


marker、circle或其他要绘制的覆盖物具体配置请查阅高德地图参考手册:点击打开链接

你可能感兴趣的:(VUE)