百度地图标记点加点击事件和鼠标移入事件并添加数据

this.$nextTick(() => {var timer = setTimeout(() => {this.MP('密钥').then((BMap) => {const map = new BMap.Map('map');map.enableScrollWheelZoom(true);map.centerAndZoom(new BMap.Point(108.948, 34.263), 11); // 初始化地图,设置中心点坐标和地图级别//定义this指向let that = this//循环添加小图标for (var obj in this.UserInfoPark) {//定义参数let point = new BMap.Point(this.UserInfoPark[obj]['Longitude'],this.UserInfoPark[obj]['Latitude'])//生成地图var marker = new BMap.Marker(point);map.addOverlay(marker);//给小图标加参数并加点击事件(()=>{//给每一个小图标加点击事件let data = {name:this.UserInfoPark[obj].ParkinglotName,Id:this.UserInfoPark[obj].ParkID,//车场idTotalSeat:this.UserInfoPark[obj].TotalSeat,//泊位总数OccupySeat:this.UserInfoPark[obj].OccupySeat,//占用数量RemainSeat:this.UserInfoPark[obj].RemainSeat,//剩余数量}var Name = this.UserInfoPark[obj].ParkinglotName;marker.addEventListener("click",function() {that.dialogVisible = truethat.getBerth(data)});var steelContent = `<div><div style="margin-top: 5px">停车场名称:${data.name}</div><div style="margin-top: 5px">泊位总数:${data.TotalSeat}</div><div style="margin-top: 5px">占用泊位:${data.OccupySeat}</div><div style="margin-top: 5px">空余泊位:${data.RemainSeat}</div></div>`var steelOpts = {width : 250,     //信息窗口宽度height: 120,     //信息窗口高度enableMessage:true //设置允许信息窗发送短息};marker.addEventListener("mouseover",function() {this.openInfoWindow(new BMap.InfoWindow(steelContent, steelOpts))});//添加鼠标离开时关闭自定义信息窗口事件marker.addEventListener("mouseout",function () {this.closeInfoWindow();});})()}});}, 500);});MP(ak) {return new Promise((resolve, reject) => {const script = document.createElement('script');script.type = 'text/javascript';script.src = `http://api.map.baidu.com/api?v=2.0&ak=${ak}&callback=init`;script.onerror = reject;document.head.appendChild(script);setTimeout(() => {resolve(window.BMap);}, 500);});}

百度地图标记点加点击事件和鼠标移入事件并添加数据相关推荐

百度地图 app 点击事件无效、不触发解决方案
百度地图 app 点击事件无效.不触发解决方案参考文章: (1)百度地图 app 点击事件无效.不触发解决方案 (2)https://www.cnblogs.com/muzhe/articles ...
百度地图api 点击标注后跳转页面
百度地图api 点击标注跳转页面初始化地图 window.onload = function(){//得到所有点,包括点的id.经纬度.跳转地址链接//jd. wd.hrefgetPoints(); ...
百度地图标记点中添加echarts图表
近日需要实现一个效果:在百度地图标记点的信息框中添加echarts图表. 大致已经实现,分享一下. <!DOCTYPE html> <meta name="viewport ...
highcharts legend图例禁止点击事件以及鼠标移入样式保持不变
highcharts legend图例禁止点击事件以及鼠标移入样式保持不变直接上代码 let each = highcharts.each;// todo 自定义图例事件highcharts.wra ...
【百度地图API】交你如何用百度地图搜索自己的数据！不需数据库！
摘要: 我有一定的房产数据,还有银行数据.我想在百度地图上标注出来,并且能搜索到我这些数据. 可是百度的数据库上并没有我的数据.我应该怎么办呢? --------------------------- ...
百度地图分不同色块显示某个城市的行政区划，并添加城市（区）名
百度地图分不同色块显示某个城市的行政区划,并添加城市(区)名,包括在不同的zoom缩放范围下标签的显示隐藏效果如下: 先拉代码跑一跑 <!DOCTYPE html> <html&g ...
java 双击触发事件_java鼠标双击事件怎么实现
很多人都学习过java,但是你知道java鼠标双击事件怎么实现吗,跟着学习啦小编一起学习ava鼠标双击事件. java鼠标双击事件的实现方法鼠标的单双击事件在很多时候对我们帮助很大,但是在JAVA中 ...
用鼠标按下事件和鼠标松开事件实现长按事件
用鼠标按下事件和鼠标松开事件实现长按事件我这次要分享的是,用鼠标按下事件(onmousedown)和鼠标松开事件(onmouseup)实现长按事件,在这个长按事件里面我让它实现让数值自增的功能.首先 ...
html鼠标移入移除事件,js鼠标移入移出事件样例
javaScript实例 li{background-color:#eee;height:25px;margin-top:2px;} //添加鼠标移入移出事件 function fun(){ //获取 ...
鼠标移入事件onmouseover、onmouseenter 鼠标移出事件onmouseleave、onmouseout 的区别
onmouseenter和onmouseover都是鼠标移入事件,即鼠标放入到元素上相应事件触发,但是这两个事件是存在差别的. onmouseover.onmouseout子元素会影响到父元素, 而o ...

百度地图标记点加点击事件和鼠标移入事件并添加数据

百度地图标记点加点击事件和鼠标移入事件并添加数据相关推荐

最新文章

热门文章