百度地图api中marker滑入滑出事件解决_百度地图mark点击事件-程序员宅基地

技术标签: 前端  javascript  开发语言  

我在项目中引入百度地图的卫星地图时,给marker绑定滑入滑出的监听事件动态打开和关闭信息窗口时,没办法流畅的打开和关闭窗口,离谱的是打开f12他就能流畅的实现这个效果。经过反复的测试,发现是因为你滑入这个标注时,几乎同时执行了一遍滑入滑出事件,我就想能不能给它加个setTimeout或者nextTick试试看运气,结果都失败了。过滤也过滤不掉,晚上回家都还在想这个问题怎么解决,最终也没个好的解决方案。大概晚上10点半的时候灵光一现,我让他滑入滑出只有一个能执行不就行了?

思路如下:

默认窗口是不弹出的,第一次滑入标注只让窗口打开,第二次只让滑出事件执行。虽然没有那么灵敏,但是差强人意了。具体代码如下:

marker.addEventListener("mouseout", (param)=> {
            // alert("yichu")
            if (_this.informationStatus==0) {

            }else {
              _this.mapModel.closeInfoWindow()
              setTimeout(()=>{
                _this.informationStatus=0
              },100)
            }
          });
          marker.addEventListener("mouseover",(param)=>{
            console.log(marker)
            // alert("yiru")
            if (_this.informationStatus==0) {
              _this.mapModel.openInfoWindow(new BMapGL.InfoWindow('<div style="width:280px;padding:5px 0.125rem;">\n' +
                '              <div style="border-bottom:1px solid #EBEAEA;padding:5px;font-size:16px">'+param.target.customData.dataInfo.name+'</div>\n' +
                '              <div style="margin:0.125rem 5px 5px 5px">\n' +
                '                <div style="display:flex;justify-content: space-between">安全运行天数<div style="color:#6aacfc;margin: 0 0.125rem">'+param.target.customData.dataInfo.safeRunTime+'天</div></div>\n' +
                '                <div style="display:flex;justify-content: space-between">备案容量<div style="color:#6aacfc;margin: 0 0.125rem">'+param.target.customData.dataInfo.filingCapacity+'</div></div>\n' +
                '                <div style="display:flex;justify-content: space-between">并网电压等级<div style="color:#6aacfc;margin: 0 0.125rem">'+param.target.customData.dataInfo.voltageLevel+'</div></div>\n' +
                '                <div style="display:flex;justify-content: space-between">消纳方式<div style="color:#6aacfc;margin: 0 0.125rem">'+param.target.customData.dataInfo.consumptionMethod+'</div></div>\n' +
                '                <div style="display:flex;justify-content: space-between">初并时间<div style="color:#6aacfc;margin: 0 0.125rem">'+param.target.customData.dataInfo.firstConnectionTime+'</div></div>\n' +
                '              </div>\n' +
                '            </div>',
                opts),param.latLng);
              setTimeout(()=>{
                _this.informationStatus=1
              },100)
            }else {
            }
          });

深夜把这个问题改出来的时候很开心,但是发现谁也不能分享,左右无人在意,绕指柔过后也归于平静。网上也没有大佬写,某也就抛砖引玉了

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_44685872/article/details/129569710

智能推荐

vue-cli2,vue-cli3(vue脚手架)超详细教程_vue2+cli3-程序员宅基地

文章浏览阅读3.8k次,点赞33次,收藏30次。文章目录vue-cli脚手架Node.js环境安装vue-cli的安装npm,cnpm介绍安装脚手架用脚手架生成项目目录vue-cli脚手架顾名思义,脚手架就是用来协助,配合,帮助构建一个项目的。使用vue-cli仅需5分钟就可以搭建一个完整的Vue.js应用,相较于人工操作,具有安全,高效的特点。vue-cli与平台无关,功能更加齐全。无论是预编译模板,注入依赖,还是模拟生产环境等功能,vue-cli都具备,而且占用内存少,更高效,运行速度非常快。Node.js环境安装要安装Vue.js脚手架_vue2+cli3

华为OD机试 - 最小循环子数组(Java & JS & Python & C)-程序员宅基地

文章浏览阅读2.6k次,点赞4次,收藏13次。已支持(Java & JS & Python & C),考察:KMP算法,前缀表,最长相同前后缀,最小重复子串问题_最小循环子数组

oracle 入门_Oracle Container Cloud服务入门-程序员宅基地

文章浏览阅读254次。oracle 入门 Oracle容器云服务是Oracle进入托管容器服务世界的入口。 现有很多选项: 适用于AWS或Azure的Docker 亚马逊弹性容器服务 Google容器引擎 Azure容器服务 Mesosphere的DC / OS 红帽OpenShift 该博客将说明如何开始使用Oracle Container Cloud Service。 从托管容器..._oracle container

2023年蓝桥杯C++A组第三题:更小的数(双指针解法)

小蓝有一个长度均为 n 且仅由数字字符 0 ∼ 9 组成的字符串,下标从 0 到 n − 1,你可以将其视作是一个具有 n 位的十进制数字 num,小蓝可以从 num 中选出一段连续的子串并将子串进行反转,最多反转一次。小蓝想要将选出的子串进行反转后再放入原位置处得到的新的数字 numnew 满足条件 numnew < num,请你帮他计算下一共有多少种不同的子串选择方案,只要两个子串在 num 中的位置不完全相同我们就视作是不同的方案。

jsp,el表达式,foreach循环_el表达式 循环-程序员宅基地

文章浏览阅读4.4k次,点赞2次,收藏7次。一、jsp代码<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%><% List list = new ArrayList(); for (int i = 0; i <= 9; i++) { list.add(._el表达式 循环

《数学模型(第五版)》学习笔记(2)第3章 简单的优化模型 第4章 数学规划模型_数学模型第五版章节综述-程序员宅基地

文章浏览阅读875次,点赞18次,收藏16次。《数学模型(第五版)》学习笔记(2)第3章 简单的优化模型 第4章 数学规划模型_数学模型第五版章节综述

随便推点

Acwing算法提高课_acwing提高课-程序员宅基地

文章浏览阅读154次。90%的dp问题都能转化为最短路问题,拓扑图可以转化为dp问题。记住模型,到相似题目就会有更清晰的思路,不会到无从下手。_acwing提高课

报泰山学堂计算机条件,山东大学泰山学堂遭质疑 课程不合理致学生退学?-程序员宅基地

文章浏览阅读1.6k次。品牌观察网讯:1.88米的个头,普通话里有明显的山西口音,这个19岁的小伙子就是最近主动退出山东大学“泰山学堂”的马振军同学。别的同学想上“泰山学堂”都考不上,经过层层选拔好不容易考上的他却退出了。他为什么退出?11月9日下午,记者来到位于高新区的山东大学软件园校区,对他进行了专门采访。谈原因退出是因为不适应上两年基础课,时间太长记者:得知被“泰山学堂”录取是啥感觉?马振军:感觉挺兴奋的、也挺幸运..._山东大学软件学院能考泰山学堂数学学堂吗

docker部署rocketmq,本地应用访问不到broker解决办法_rocketmq控制面板没有broker-程序员宅基地

文章浏览阅读2.4k次。docker部署rocketmq,本地应用访问不到broker解决办法参考博客:Docker部署RocketMQ.最近按照这个博客在docker上部署了rocketmq,docker运行在虚拟机上,在windows上跑的测试程序连接上了nameserver但连接不上broker。本地代码如下:public class RocketMQSendMessage { //发送消息 public static void main(String[] args) throws Exception _rocketmq控制面板没有broker

梦想还是梦魇,告诉你一个真实的量子计算世界-程序员宅基地

文章浏览阅读82次。智造观点在很多人看来,量子计算机有一种“神奇的力量”,几乎可以完成传统计算机不能完成的所有任务。然而,事实上,如果量子计算机缺乏足够数量的处理单元,即量子比特,以及足够的稳定性来做有用的工作,这些好处就只是“纸上谈兵”。但面对这一新兴领域的无限潜力,包括中国、美国与欧盟等在内的不少国家和地区都已经开始在量子计算的研究方面发力;与此同时,从国外的IBM、..._虽然将量子计算机与传统计算机进行对比很难,但简单来说,只有几百个量子位的量子计

spring容器启动,停止,关闭事件监听-ApplicationEvent-程序员宅基地

文章浏览阅读4.2k次。2019独角兽企业重金招聘Python工程师标准>>> ..._applicationevent 需要关闭吗

tcpdump详解_tcpdump data[-程序员宅基地

文章浏览阅读836次。简介用简单的话来定义tcpdump,就是:dump the traffic on a network,根据使用者的定义对网络上的数据包进行截获的包分析工具。 tcpdump可以将网络中传送的数据包的“头”完全截获下来提供分析。它支 持针对网络层、协议、主机、网络或端口的过滤,并提供and、or、not等逻辑语句来帮助你去掉无用的信息。实用命令实例默认启动tcpdump普通情况下,直接启动..._tcpdump data[