百度地图自定义覆盖物点击事件在移动界面后点击事件会消失的问题
标签: javascript html5 html chrome
百度地图自定义覆盖物点击事件在移动界面后点击事件会消失的问题
最近用到了百度地图,使用了自定义覆盖物后,出现了问题,就是界面首次加载时,点击事件可以用,但是移动地图后就失效了,在看了官方的类参考之后,发现了原因

只要实现了这个方法,在方法里面重新添加事件就可以了
//自定义覆盖物
ComplexCustomOverlay.prototype.initialize = function(map) {
this._map = map; // 保存map对象实例
//创建一个父盒子
var div = this._div = document.createElement("div"); //创建一个盒子节点
div.style.position = "absolute";
div.style.boxSizing = "content-box" //内外边距不向内塌陷
div.style.zIndex = BMap.Overlay.getZIndex(this._point.lat);
div.style.backgroundColor = "#fff";
div.style.border = "1px solid #000";
div.style.color = "white";
div.style.height = "45px";
div.style.whiteSpace = "nowrap";
div.style.MozUserSelect = "none";
div.style.fontSize = "12px"
//头部信息条
var boxHead = this._boxHead = document.createElement("div");
boxHead.style.position = "absolute";
boxHead.style.boxSizing = "content-box" //内外边距不向内塌陷
boxHead.style.backgroundColor = "#2877AF";
boxHead.style.height = "20px";
boxHead.style.padding = "2px"
boxHead.style.top = "-27px";
boxHead.style.lineHeight = "20px"; //以实现文字居中
boxHead.style.marginLeft = "50%";
boxHead.style.transform = "translateX(-50%)";
boxHead.style.borderRadius = "3px"; //圆角边框
div.appendChild(boxHead);
//头部信息条内容
var span = this._span = document.createElement("span"); //创建一个文本节点
boxHead.appendChild(span);
span.appendChild(document.createTextNode(this._text)); //创建一个文本节点
var that = this;
//插入图片
var img = this._img = document.createElement("img");
img.src = "img/1.png";
img.style.height = "40px";
div.appendChild(img);
//红色倒三角图标
var arrow = this._arrow = document.createElement("div");
arrow.style.background = "url(img/label.png) no-repeat";
arrow.style.position = "absolute";
arrow.style.width = "11px";
arrow.style.height = "10px";
arrow.style.top = "45px";
arrow.style.left = "10px";
div.appendChild(arrow);
map.getPanes().labelPane.appendChild(div); // 将div添加到覆盖物容器中
this._div = div; // 保存div实例
return 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 - 57 + "px";
//每当视图移动时,点位将会刷新,所以需要重新添加事件
myCompOverlay1.addEventListener('click', function() {
map.openInfoWindow(infoWindow, point); // 开启信息窗口
});
}
//创建点标记
var txt1 = "1111";
var myCompOverlay1 = new ComplexCustomOverlay(new BMap.Point(117.714328, 50.112275), txt1);
//添加点标记
map.addOverlay(myCompOverlay1);
//点击事件
ComplexCustomOverlay.prototype.addEventListener = function(event, fun) {
this._div['on' + event] = fun;
}
var sContent =
`
<h4 style='margin:0 0 5px 0;'>
巴拉巴拉巴拉
</h4>
<img style='float:right; width: 150px; height: 150px;' id='imgDemo' src='img/1.png' width='139' height='104'/>
<p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>
巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉
</p>
`;
var infoWindow = new BMap.InfoWindow(sContent);
// 添加点标记点击事件
myCompOverlay1.addEventListener('click', function() {
map.openInfoWindow(infoWindow, point); // 开启信息窗口
});
智能推荐
用JavaScript在百度地图上画扇形,任意角度的扇形,自定义覆盖物
关于画扇形需求 众所周知,百度地图只有Circle类覆盖物,没有Sector类覆盖物,并且!!半径较小的时候,当地图级别放大后,百度那个圆很明显就是个多边形,不圆啊!。。 搜来搜去那个网上最多的各种计算角度什么的扇形画法(众多点连成多边形,but 半径小了或者角度小了,仍然是多边形啊?难道大多数人都这么将就的么?) 使用Canvas完成 直接贴上所有代码吧: 效果图: 是各位想要的效果么? 注:本...
百度地图API之覆盖物和事件
前言 之前已经介绍了如何添加地图上一些控件,添加一些控件后就会实现一些常用的功能。具体请参考上一篇博文。下面主要介绍如何添加覆盖物及给地图、地标等添加响应事件。 覆盖物相关API介绍 地图覆盖物概述 所有叠加或覆盖到地图的内容,我们统称为地图覆盖物。如标注、矢量图形元素(包括:折线和多边形和圆)、信息窗口等。覆盖物拥有自己的地理坐标,当您拖动或缩放地图时,它们会相应的移动。 地图API...
百度地图的MapVGL 添加自定义模型点击交互(ThreeJS)
书接上文:上一篇写到了自定义模型的加载,这次来研究下相关的交互功能,一般来说就是鼠标点击模型,根据点击的模型返回不同的消息实现对应的交互操作,这里我就是改变了下模型的颜色。废话不多说,先上色图: 这里就是简单的修改了下颜色(原始是蓝色,点击之后变成原谅色),具体修改还是看各位看官的需求。 过程:ThreeJS给的点击获取模型信息的方式是通过发出射线,与模型碰撞,返回碰撞信息来检测是否点击到模型或者...
openalyers为自定义覆盖物overlay添加点击事件
在项目的实际需求中,勾选某个小区的地址,需要在地图上定义小区的位置,即在地图上添加overlay覆盖物,点击overlay覆盖物展示该小区的三维场景,刚开始的实现方法点击事件不生效,详细代码如下所示: 由以上代码可以看出,为自定义覆盖物overlay添加点击事件并不生效,然而从Stack Overflow上发现了解决办法,如下所示: 不应该给overlay添加click事件,而应该给html元素添...
百度地图 InfoWindow上添加点击事件
一、应用场景 在地图上展示多个点位信息,点击弹出自定义详细信息(InfoWindow),然后在InfoWindow上添加点击事件操作。例如: 二、主要方法 三、最终效果...
猜你喜欢
百度地图自定义折线覆盖物,控制旋转方向
使用百度地图,路线规划是,自定义路线绘制+方向标识。 主要说明: 调用百度地图web服务API路线规划(为了拿到路线规划的途径点) 使用Polyline进行路线绘制。 Icon 进行自定义图标;控制图标中心偏移量{anchor:<Size>}。 Marker进行覆盖物叠加: 计算角度 主要的问题在于如何计算,根据起至终点坐标(经度、纬度)值差,构建三角形,计算邻边角角度。 初始图标的指...
raw&assets&sdcard读取mp3文件的方式
Raw方式 assets SDcard 首先需要添加 静态请求权限 动态请求 playMnt的播放方法 如何在模拟器中添加音乐 详细代码参见 点击跳转...
