<map class="map" id="map1" ref="map1"
:style="[{'width':'100%'},{height:windowHeight-100+'px'}]" :enable-zoom="enableZoom" :scale="scale"
:markers="covers1" :latitude="latitude" :longitude="longitude" @markertap="onmarkertap"></map>
在小程序中设置markers坐标点后
covers1 = [{
id: 0,
latitude: 39.989631,
longitude: 116.481018,
title: '方恒国际 阜通东大街6号',
zIndex: '1',
rotate: 0,
width: 20,
height: 20,
anchor: {
x: 0.5,
y: 1
},
callout: {
content: '方恒国际 阜通东大街6号',
color: '#00BFFF',
fontSize: 10,
borderRadius: 4,
borderWidth: 1,
borderColor: '#333300',
bgColor: '#CCFF99',
padding: '5',
display: 'ALWAYS',
textAlign: 'left'
}
}]
坐标在网页上点击可以弹出callout中的气泡内容但是在小程序没有反应。
网上也没找到啥有用的方法自己弄了下。
onmarkertap(e) {
let _this = this;
var pointList = _this.covers1;
var id = e.detail.markerId;
//‘BYCLICK’:点击显示; ‘ALWAYS’:常显
var b = pointList.forEach((item) => {
if(item.id == id){//找到对应id
if(item.callout.display == ''){
item.callout.display = 'ALWAYS';
return;
}
else if(item.callout.display == 'ALWAYS'){
item.callout.display = '';
return;
}
}
})
}
直接在坐标点被点击时修改display 属性就可以了。