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按钮，增加圆形区域半径，点击信息窗体按钮 绘制信息窗口

组件部分：

< 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或其他要绘制的覆盖物具体配置请查阅高德地图参考手册：点击打开链接