百度地图 InfoWindow上添加点击事件

一、应用场景

在地图上展示多个点位信息，点击弹出自定义详细信息（InfoWindow），然后在InfoWindow上添加点击事件操作。例如：

二、主要方法

        var markerlist=data;//点位信息listfor (var i = 0; i < markerlist.length; i++) {var marker = new BMap.Marker(new BMap.Point(markerlist[i].Latitude, markerlist[i].Longitude));  // 创建标注var content ='<span>自定义字段1：</span>'+ markerlist[i].Type_Name+'</br><span>自定义字段2：</span>'+ markerlist[i].Type_EnName+'</br><input type="button" id="markerbtn" value="点击弹出" data-sid="'+ markerlist[i].Dict_Code +'" />';map.addOverlay(marker);// 将标注添加到地图中addClickHandler(content, marker);}//给点位添加点击事件function addClickHandler(content, marker) {marker.addEventListener("click", function (e) {openInfo(content, e);});}//打开信息窗口function openInfo(content, e) {var p = e.target;var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);var infoWindow = new BMap.InfoWindow(content);  // 创建信息窗口对象 map.openInfoWindow(infoWindow, point); //开启信息窗口//判断窗口的打开状态if (!infoWindow.isOpen()) {//如果没有打开，则监听打开事件，获取按钮，添加事件infoWindow.addEventListener("open", function () {document.getElementById("markerbtn").onclick = function (e) {alert("门店编号："+e.target.dataset.sid);}})} else {//如果已经打开，直接获取按钮，添加事件document.getElementById("markerbtn").onclick = function (e) {alert("门店编号：" + e.target.dataset.sid);}}}

三、最终效果

百度地图 InfoWindow上添加点击事件相关推荐

Android 点击事件，如何在界面上或者某个控件上添加点击事件
说到点击事件,第一印象 setOnClickListener() 方法,这也是用的最多的控件点击事件方法,这篇文章不分享这个方法,使用该方法的前提是你要拿到这个控件的 View 才可以调用这个方法通 ...
html百度地图拖动,百度地图为marker添加拖拽事件
百度的API里面并没有,但是百度的好多方法都和谷歌地图的类似,参照谷歌地图写法,写了一个简单拖拽事件 body, html,#allmap {width: 100%;height: 100%;over ...
百度地图：为标记添加点击事件显示标注
之前写了百度地图的标注,原文链接:使用百度地图API实现地图生成.标记以及标注,但是因需求更改,标注的显示需要通过点击标记才能显示. 以下为更改内容: //给标记添加点击事件以及显示窗口信息var i ...
谷歌地图中给infowindow添加点击事件
项目中想实现点击地图中marker上面的图标,即点击infowindow之后跳转到另一个界面,发现不可以像监听marker点击事件一样直接给infowindow添加点击事件.解决方法为将content ...
android高德marker添加点击,高德地图上添加marker，给每一个marker添加点击事件。...
高德地图上添加marker,给每一个marker添加点击事件. 高德地图上添加marker,给每一个marker添加点击事件.javascript var watch = [] $.ajax({ ty ...
百度地图调用加载显示Marker，并添加点击事件
百度地图调用加载显示Marker,并添加点击事件注册百度开发者账号,申请应用AK 百度地图开发平台官网点击右上角控制台,选择创建应用创建应用,勾选浏览器端,白名单填写* 注:如上线更改为公网IP ...
echarts引入百度地图并且添加点击事件
echarts引入百度地图并且添加点击事件 (1)下载依赖项 npm install echarts --save (2)引入echarts到页面当中 import * as echarts from ...
高德地图单点、多点标记，轨迹绘制，自定义标记覆盖物,给标记添加点击事件，移除所有标记和轨迹，轨迹回放功能
文档地址 https://lbs.amap.com/api/javascript-api/guide/abc/prepare 注册到官网注册一下就可以了https://lbs.amap.com/并创 ...
vue组件-echarts地图显示柱状图并给柱状图添加点击事件（支持自定义地图）
vue组件-echarts地图显示柱状图并给柱状图添加点击事件(支持自定义地图) 效果如下所示: 参考文档: 这是参考的文档起因: 最近有朋友有需求需要用echarts,在地图上显示柱状图,并添加点 ...
vue使用高德地图为信息窗体再添加点击事件
即使是用的vue,也不能使用@click为窗体添加点击事件,需要使用onclick,并且在定义了函数后,使用该函数还是会报函数未定义的错误,需要在window下添加该函数,点击时可以在原型链中找到该函 ...

百度地图 InfoWindow上添加点击事件

百度地图 InfoWindow上添加点击事件相关推荐

最新文章

热门文章