如下代码,同样的方式
自定义覆盖物的点击触发不了
预设的覆盖物点击就可以触发
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style type="text/css">
html {
height:100%
}
body {
height:100%;
margin:0px;
padding:0px
}
#main {
height:100%
}
.circle-marker {
position: absolute;
width: 90px;
height: 90px;
background: #c00;
border-radius: 50%;
opacity: .7
}
</style>
<script src="http://api.map.baidu.com/api?v=2.0&ak=Ls1zIpQI8SB8bi46cSGieAYLHYeyHzfW"></script>
</head>
<body>
<div id="main"></div>
<script>
var map = new BMap.Map("main", {enableMapClick: false}); // 创建地图实例
var point = new BMap.Point(116.400551, 39.893524); // 创建点坐标
var point2 = new BMap.Point(116.400551, 39.964534)
map.centerAndZoom(point, 12); // 初始化地图,设置中心点坐标和地图级别
map.enableScrollWheelZoom()
map.addControl(new BMap.ScaleControl({anchor: BMAP_ANCHOR_BOTTOM_RIGHT}))
// 圆形覆盖物
function customOverlay(point) {
this.point = point
}
customOverlay.prototype = new BMap.Overlay()
// 初始化,设置覆盖物形状
customOverlay.prototype.initialize = function() {
var div = this.div = document.createElement('div')
div.className = 'circle-marker'
map.getPanes().labelPane.appendChild(div)
}
// 覆盖物的位置
customOverlay.prototype.draw = function () {
var p = map.pointToOverlayPixel(this.point)
this.div.style.left = p.x - 45 + 'px'
this.div.style.top = p.y - 45 + 'px'
}
var marker = new BMap.Marker(point)
map.addOverlay(marker)
var marker2 = new customOverlay(point2)
map.addOverlay(marker2)
marker.addEventListener('click', function() {
console.log('点击了预设覆盖物')
})
marker2.addEventListener('click', function() {
console.log('点击了自定义覆盖物')
})
</script>
</body>
</html>
这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。
V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。
V2EX is a community of developers, designers and creative people.