vue h5高德地图定位自定义icon

在这里插入代码片
<template>
<div style="width: 100%;height:100%">
<div id="mapDemo">
<el-amap ref='map' vid="amapDemo" :amap-manager="amapManager" :events="mapEvents" :plugin="plugin"  :zoom="zoom" :center="center" class="amap-demo">
<el-amap-marker class="selectedMarker"
v-for="(item, index) in datas"
:key="index"
:position="item.lnglat"
topWhenClick="true"
:extData="item"
:content="getMarkerContent(item, 30, 30)"
:events="markerEvents">
</el-amap-marker>

</el-amap>

<!--<div class="toolbar">
<span v-if="loaded">
location: lng = {{ lng }} lat = {{ lat }}
</span>
<span v-else>正在定位</span>
</div>-->
</div>
<div class="div">
<div @click='get'></div>
</div>
</div>
</template>

<style lang="scss" scoped>
#mapDemo{
height: calc(100% - 0.95rem) !important;
}
.amap-demo {
height: 100% !important;
}
.div{
height: 0.95rem;
border-top: 1px solid #DDD;
background: #fff;
position: relative;
div{
width:1.9rem;
height: 1.9rem;
border-radius: 50%;
border-top: 1px solid #DDD;

position: absolute;
transform: rotate(-5deg);
bottom: 0;
left: 0;
right: 0;
margin: auto;
background: #fff;

}
}

div /deep/ .amap-logo {
right: 0 !important;
left: auto !important;
display: none !important;
}

div /deep/ .amap-copyright {
right: 0px !important;
left: auto !important;
visibility: hidden !important;
}
</style>
<script>
import { AMapManager } from 'vue-amap'

let amapManager = new AMapManager()

export default {
data() {
let self = this
return {
obj:{
url1:require('../assets/image/red.png'),
url2:require('../assets/image/green.png'),
url3:require('../assets/image/3.png')
},
center: [121.5, 31.1],
lng: 0,
lat: 0,
loaded: false,
plugin: [{
pName: 'Geolocation',
events: {
init(o) {
console.log(o)
// o 是高德地图定位插件实例
o.getCurrentPosition((status, result) => {
if(status == 'error'){

console.log('定位失败')

}
console.log(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;
console.log(self.center)
self.$nextTick();
}
});
}
}
}],

amapManager,
zoom:1, //地图缩放级别
// centerPosition: [121.5273285, 31.21515044], // 用户当前位置经纬度
datas: [
{
id: 1,
title: '1',
level: 'A',
lnglat: [121.60237, 31.23727],
},
{
id: 2,
title: '2',
level: 'C',
lnglat: [120.4027, 31.20707],
},

{
id: 7,
title: '1',
level: 'B',
lnglat: [121.6027, 32.23707]
}
],
clickedMarker: null, // 保存当前点击的Marke
mapEvents: {
init(o) {
// o 为地图组件实例
},
complete () {
const map = self.amapManager.getMap() // 获取地图组件实例
// setFitView(overlayList:Array)
// 根据地图上添加的覆盖物分布情况，
// 自动缩放地图到合适的视野级别，参数overlayList默认为当前地图上添加的所有覆盖物图层
map.setFitView()
}
},
markerEvents: {
click(e) {
if (self.clickedMarker === e.target) return // 点击的是同一个Marker
const data = e.target.getExtData()
if (self.clickedMarker) { // 先恢复上次点击的Marker的样式
// self.clickedMarker.setOffset(new AMap.Pixel(-10, -30))
self.clickedMarker.setContent(self.getMarkerContent(self.clickedMarker.getExtData(), 30, 30))
}
e.target.setContent(self.getMarkerContent(data, 40, 40, true))
e.target.setOffset(new AMap.Pixel(-18, -50))
self.clickedMarker = e.target
}
},

}
},
created(){
},
mounted() {
AMap.plugin('AMap.CircleEditor', function () {//回调函数
})
},
methods: {

getMarkerContent (item, width, height, isRotate = false) {

if(item.level == 'A'){
const content = `
<img src= "${this.obj.url1}" style="width: 0.48rem;height: 0.59rem;" alt="">
</div>`

return content
}else if(item.level === 'B'){
const content = `
<img src= "${this.obj.url2}" style="width: 0.48rem;height: 0.59rem;" alt="">
</div>`
return content
}else{
const content = `
<img src= "${this.obj.url3}" style="width: 0.48rem;height: 0.59rem;" alt="">
</div>`
return content
}

}
},
}
</script>