版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
上面显示 的是自定义的，代码中也可以使用iview，我给注释掉了
完整代码：
<template>
<div id="app">
<div id="map"></div>
<Modal
v-model="modal1"
title="Common Modal dialog box title"
@on-ok="ok"
@on-cancel="cancel">
<p>{{content1}}</p>
<p>{{content2}}</p>
<p>{{content3}}</p>
</Modal>
<div class="modal" :style="{display:displayStyle}" ref="modal">
<div class="MContent">
<div class="wrapContent">
<div class="firstLine">{{content1}}</div>
<div class="secondLine">{{content2}}</div>
<div class="threeLine">{{content3}}</div>
</div>
<div class="leftButton" @click="cancelButton">取消</div>
<div class="rightButton" @click="confirmButton">确定</div>
</div>
</div>
</div>
</template>
<script>
import BMap from "BMap"
export default {
name: 'app',
data(){
return{
title:"",
modal1: false,
displayStyle:"none",
content1:"",
content2:"",
content3:"",
}
},
methods:{
ok () {
this.$Message.info('Clicked ok');
},
cancel () {
this.$Message.info('Clicked cancel');
},
cancelButton(){
this.displayStyle = "none"
},
confirmButton(){
this.displayStyle = "none"
},
},
mounted() {
var mp = new BMap.Map("map",{ enableMapClick: false })
mp.centerAndZoom(new BMap.Point(116.407845,39.914101), 15);
mp.enableScrollWheelZoom();
// 复杂的自定义覆盖物
function ComplexCustomOverlay(point, obj){
this._point = point;
this._obj = obj
}
ComplexCustomOverlay.prototype = new BMap.Overlay();
let that = this
ComplexCustomOverlay.prototype.initialize = function(map){
// 这个map不用自己传递，应该是封装好的
this._map = map;
let obj = this._obj
// console.log("obj",obj)
// 百度自己的div,作为第一个容器标签用
var div = this._div = document.createElement("div");
div.style.position = "absolute";
div.style.zIndex = BMap.Overlay.getZIndex(this._point.lat);
div.style.backgroundColor = "#EE5D5B";
// div.style.border = "1px solid #BC3B3A";
div.style.color = "black";
div.style.height = "auto";
// div.style.top = "200px";
// div.style.padding = "2px";
div.style.lineHeight = "18px";
div.style.whiteSpace = "nowrap";
div.style.MozUserSelect = "none";
div.style.fontSize = "12px"
// 案例中的黄色标签
let toggleButton = document.createElement("div")
toggleButton.style.position = "absolute";
toggleButton.style.width = "100px";
toggleButton.style.height = "50px";
toggleButton.style.backgroundColor = "yellow";
toggleButton.style.top = "-35px";
toggleButton.append(this._obj.button)
toggleButton.onclick = function(e){
e.stopPropagation()
if(box.style.display === "none"){
let boxList = document.getElementsByClassName("box")
for(let i=0; i<boxList.length;i++){
boxList[i].style.display = "none"
}
box.style.display = "inline-block"
}else {
box.style.display = "none"
}
}
// 案例中的粉红色标签
let box = document.createElement("div")
box.style.position = "absolute";
box.style.width = "300px";
box.style.height = "400px";
box.style.backgroundColor = "pink";
box.style.marginTop = "-450px";
box.className = "box"
box.style.display = "none"
// 绿色按钮
let button = document.createElement("div")
button.style.position = "absolute";
button.style.width = "100px"
button.style.height = "50px"
button.style.marginLeft = "25px"
button.style.bottom = "0px"
button.style.left = "0px"
button.style.backgroundColor = "green"
button.style.textAlign = "center"
button.style.lineHeight = "50px"
button.append("点击弹窗")
button.onclick = function(e){
e.stopPropagation()
// 使用iview的弹窗
// that.modal1 = true
// 自定义的弹窗
that.displayStyle = "flex"
that.content1 = obj.content.line1
that.content2 = obj.content.line1
that.content3 = obj.content.line1
}
// 粉红色标签中的内容
let p1 = document.createElement("p")
p1.style.height = "50px"
p1.style.lineHeight = "50px"
p1.style.width = "100%"
p1.append(obj.content.line1)
box.appendChild(p1)
box.appendChild(button)
div.appendChild(toggleButton)
div.appendChild(box)
// 黄色标签下的一个小箭头
var arrow = this._arrow = document.createElement("div");
arrow.style.background = "url(//map.baidu.com/fwmap/upload/r/map/fwmap/static/house/images/label.png) no-repeat";
arrow.style.position = "absolute";
arrow.style.width = "11px";
arrow.style.height = "10px";
arrow.style.top = "17px";
arrow.style.left = "10px";
arrow.style.overflow = "hidden";
div.appendChild(arrow);
mp.getPanes().labelPane.appendChild(div);
return div;
}
// 设置百度自己的div(容器)的位置
ComplexCustomOverlay.prototype.draw = function(){
var map = this._map;
var pixel = map.pointToOverlayPixel(this._point);
this._div.style.left = pixel.x - parseInt(this._arrow.style.left) + "px";
this._div.style.top = pixel.y - 30 + "px";
}
// 模拟请求过来的数据
let mouseoverTxt = {
one:{
line1:"hello world1",
line2:"hello world2",
line3:"hello world3",
},
two:{
line1:"你好 世界1",
line2:"你好 世界2",
line3:"你好 世界3",
}
} ;
// 可以循环遍历生成多个覆盖物根据坐标
var myCompOverlay = new ComplexCustomOverlay(new BMap.Point(116.407845,39.914101),{button:"银湖海岸城",content:mouseoverTxt.one,index:1} );
mp.addOverlay(myCompOverlay);
var myCompOverlay1 = new ComplexCustomOverlay(new BMap.Point(116.454, 39.915),{button:"银湖海岸城1",content:mouseoverTxt.two,index:2});
mp.addOverlay(myCompOverlay1);
// 清除所有覆盖物
// mp.clearOverlays()
// 清除某个覆盖物
// mp.removeOverlay(myCompOverlay)
},
}
</script>
<style>
#map{
width: 1200px;
height: 900px;
margin: 100px auto 0px;
background-color: yellow;
position: relative;
}
.showDisplay{
display: none;
}
.modal{
position: absolute;
top: 0px;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.5);
/*display: none;*/
/*display: flex;*/
}
/*.modalDisplay{*/
/* display: flex;*/
/*}*/
.modal .MContent{
width: 600px;
height: 700px;
margin: auto;
background-color: #fff;
position: relative;
}
.firstLine, .secondLine, .threeLine{
width: 100%;
height: 50px;
border: 1px solid black;
}
.modal .MContent .leftButton{
position: absolute;
bottom: 0;
left: 0;
width: 200px;
height: 50px;
background-color: pink;
}
.modal .MContent .rightButton{
position: absolute;
bottom: 0;
right: 0;
width: 200px;
height: 50px;
background-color: pink;
}
</style>