由于业务需要,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: '<i>mm</i>', //设置文字内容 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: '<strong>这里是标题</strong>', infoBody:
'<p>这里是内容。</p>' }); infoWindow.open(map, map.getCenter()); }) } } };</script>



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


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


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

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


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



marker、circle或其他要绘制的覆盖物具体配置请查阅高德地图参考手册:点击打开链接
<http://http//lbs.amap.com/api/javascript-api/reference/map>

友情链接
ioDraw流程图
API参考文档
OK工具箱
云服务器优惠
阿里云优惠券
腾讯云优惠券
华为云优惠券
站点信息
问题反馈
邮箱:ixiaoyang8@qq.com
QQ群:637538335
关注微信