marker.setLabel({
offset: new AMap.Pixel(-5, -2),
content: `<div class="info" οnclick="func1('${this.infos[i].infoName}')">${this.Infos[i].infoName}</div>`,
direction: 'right'
});
注意事项
1.func1这个方法需要自建一个js文件,在index.html中通过script标签引入,文件建立的地方建议在static的js下,方便打包
例如
func1.js中
function func1(res){
window.parent.postMessage(‘func1:’ + res, window.location.href)
}
组件中获取postMessage需要在mounted()中添加监听
window.addEventListener(‘message’, (e)=>{
let originUrl = window.location.host
let receiveUrl = e.origin.split(‘http://’)[1]
if(originUrl == receiveUrl){
if(e.data.split(’:’)[0] == ‘func1’){
this.$emit(‘getDetail’,e.data.split(’:’)[1])
}
}
})
2.获取到想要的参数之后需要在vue组件中使用,并不能在js文件中直接用(直接用也行,那样的话相当于在js文件中写了异步ajax,而且使用的不是vue,分分钟low到爆),获取方式可以采用postmessage的方法,
func1.js负责发送指令,vue组件接收message指令并执行后续方法。
题外话
一方面找遍了高德地图api的示例,没找到对label点击操作的api,另一方面,在无奈之下选择了原始的click执行方法,但是操作过程还是有些繁琐复杂,喷子嘴下留情
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)