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隐藏文字标签
})
}