vue-百度地图-maker文字标签显示隐藏

html:

<div id="allmap" class="map"></div>

 

script:

 

mounted() {

this.ready()

},

methods: {

ready: function() {

let sContent ='<div>'+

'信息窗体自定义内容'

'</div>'

let map = new BMap.Map("allmap");

let point = new BMap.Point(116.417854,39.921988)

map.centerAndZoom(point, 14)

map.addControl(new BMap.MapTypeControl())

map.enableScrollWheelZoom(true)

map.enableDoubleClickZoom(true)

let marker = new BMap.Marker(point)// 创建标注

map.addOverlay(marker) // 将标注添加到地图中

map.centerAndZoom(point, 15)

let myLabel = new BMap.Label('<span style="margin-right:20px">皖AT1234</span><span>张三</span>',{offset:new BMap.Size(20,-10)})

myLabel.setStyle({

color: "red",

fontSize: "12px",

height: "20px",

lineHeight: "20px",

fontFamily: "微软雅黑",

opacity: 0.8

});

 

let opts = {

width : 400, // 信息窗口宽度

height: 200, // 信息窗口高度

title : "王府井北" , // 信息窗口标题

enableMessage: true ,// 设置允许信息窗发送短息

}

let infoWindow = new BMap.InfoWindow(sContent, opts) // 创建信息窗口对象

marker.addEventListener("click", function() {

map.openInfoWindow(infoWindow,point) // 开启信息窗口

})

marker.addEventListener("mouseover", function() {

marker.setLabel(myLabel) //鼠标移入maker显示文字标签

})

marker.addEventListener("mouseout", function (e) {

map.removeOverlay(marker.getLabel()) //鼠标移除maker隐藏文字标签

})

}

转载于:https://www.cnblogs.com/yuwen1995/p/9230797.html