天地图循环绑定点击事件问题

最新推荐文章于 2024-01-29 16:25:04 发布
最新推荐文章于 2024-01-29 16:25:04 发布
阅读量2.3k 收藏
点赞数 1
分类专栏： 天地图 文章标签： 天地图
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/rrrrroy_Ha/article/details/80938199
版权

经常看到有人问，在循环里给标注绑定点击事件，显示的对象位置、属性不对，而且都是同一个对象。

这个点就是最后一个循环时绑定的标注的对象。

大部分人习惯性复制官方的例子


这就造成了很多人会写成这样：


但看官方API介绍，我们可以发现


在事件回调函数里用this（而不是用marker）可有效获取当前事件绑定的那个对象，代码应该为


查看一下效果


是不是很简单呢，写下来是为了提醒自己，也提醒一个各位~

rrrrroy_Ha
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
天地图WEB API 循环添加标注点，注册点击事件，标注增加属性
yrlzmm的专栏
01-12 5991
很多使用天地图WEB API的朋友都会问为什么循环添加的标注点，注册点击事件总是响应最后添加的marker？这里介绍一个如何循环添加标注点，并且正确响应，还有自定义marker属性问题，直接上代码。 天地图－地图API－范例－标注点击事件 var map,zoom=12,marker,markerclick; var lnglats = ["116.411794"
VUE集成高德地图自定义Marker图标及事件
热门推荐
wujize的博客
05-04 1万+
在项目中需要利用Marker对地图位置进行自定义标记，想使用自己的图标，并在点击Marker时需要弹出框显示对象信息，并且做后续自定义的操作。 高德地图上自定义单位Marker有介绍，但自定义多个使用的方法不是一样，并且直接用vue的el组件生成Marker后续操作时多个Marker传递marker的序号有问题，导致信息窗口显示不正常。这个坑到处找资料，花了整整2天才全部搞定。 一、需求 根据用户...
天地图（卫星地图）可指定某一区域，进行图片覆盖物，另做多点覆盖物定位，点击触发弹框事件
qq_40295815的博客
01-13 4212
<divclass="bg"v-if="panelShow"> 弹框，切记隐藏显示div v-if要比v-show好控制，特别是你弹框内想放echarts的时候，就会发现v-show会不能让echarts自适应div大小。 <divclass="point"> ...
天地图api添加marker自定义弹框点击事件踩坑
c_wengy的博客
12-09 3215
这个地方天地图的api，如果没有将marker点X关掉，在切换点位的maker弹框时并不会把上一个marker去掉，而是上一个的弹框隐藏，和新弹出来的一起存在两个dom，此时需要判断来拿到新弹出的dom元素。出现的问题是，我通过创建监听来控制marker弹框，当第一次打开，或者点击×关掉弹窗再打开时都能正常触发，但是如果没有点击×，直接点其他点位切换弹框，点击事件就不能正常触发。最近做地图的功能为了偷懒，直接用了天地图官方的api来添加地图marker还有自定义弹框内容。
天地图使用定位，点击，标点，飞行，画线，清除画线，标点vue
最新发布
no_one_but_you的博客
01-29 951
天地图使用定位，点击，标点，飞行，画线，清除画线，标点
天地图在vue中多点位信息窗口优化
m0_72422455的博客
09-02 392
在天地图官网中渲染点位方法实在onLoad函数中，对应vue就是在初始化地图方法中，由于实际业务中点位数量庞大放在初始化方法中会导致每次map渲染会调用后端接口拿到全部点位信息后才能进行渲染完成增加了页面的响应速度，并且根据需求进行tab切换展示其他点位信息时会重新走一次初始化方法，造成体验感较差。分析：点位展示有一定数量并且需要信息窗，就不可以使用聚合点，需要使用多点位信息窗展示。官网为原生的使用方法，在vue中使用基本相同，找到渲染点位与点击点位展示的关键函数。可以看出点位的渲染通过对点位信息数组。
vue使用天地图聚合点，点击标记点弹出信息窗口
weixin_45290154的博客
05-11 1677
自己记笔记使用
学习笔记--简单的天地图poi搜索 + jqpaginator分页插件
weixin_34402090的博客
01-03 1181
写在前面 记录天地图poi搜索使用过程中需要注意的几处事项及其相应的解决过程。poi搜索结果的分页使用了jqpaginator插件（分页插件给出的是菜鸟教程链接，其中对插件的使用教程比主页链接中的详细）。 天地图poi搜索 本次项目是在esri地图的基础上，因此通过url的get请求方式，获取关键字搜索结果，并在地图新建的图层上符号化搜索结果。 创建一个点图层 // 搜索结果图层 layer...
echarts地图文字重叠解决方案_Echarts扩展地图文字位置错乱的问题
weixin_39589693的博客
12-24 1856
最近在弄echarts 因为要用到扩展地图，所以在官网下载了相应的json文件 ，引入之后发现文字位置错乱于是查找网上资料 发现textFixed : {'大洋洲' : [265, 0],},可以修正 文本位置，在echarts demo中是管用的，但是在我这里并不管用，我这个图是世界地图 ，json 有这样的一段内容"properties":{"name":"大洋洲"}与中国地图的json相比较...
解决高德地图在线API不支持对应的方法回调返回结果的问题
随缘的专栏
01-06 7873
前阵子做了个基于高德在线地图分析业务数据的web应用，但是在使用其API的过程中发现一个很不友好的问题，那就是它不支持对应的方法回调返回结果（当时不支持，2014-12-18号发布的1.3.5版本更新已经支持了，但仍然不够友好）。这是怎么一回事呢？ 高德地图API的架构是插件式的，每一个服务都是插件，比如AMap.PlaceSearch 地点搜索服务，回调函数是作为一个事件绑定在这个服务对象上的
js 百度地图 点击覆盖物，弹出自定义弹窗，弹窗有轮播图
oXiangZuoZuo12345的博客
01-04 927
//从全局获得BMap和map let BMap = this.BMap; let map = this.map; // 设置弹窗的大小 var opts = { width: 355, height: 330 //title:弹出层的标题 }; //定位弹窗的位置 let...
天地图专题六：复杂操作，天地图上标注点的连线以及模拟点击事件
liusaint1992的专栏
10-13 9924
本文再讲一点复杂操作。 1.在地图上展示一些标注点，这些标注点两两相连。 在线与不在线是两种不同颜色的图标。 2.如果标注点之间距离大于60千米，用红色虚线连接。如果标注点之间的距离小于60千米刚用蓝色虚线连接。 3.点击线条，在两个标注点显示两个标注点的距离，将两个点用实线连接。并且给相连的两个标注点大图标来表示，大图标也根据在线不在线使用不同的颜色。点击此标注点的时候，其他标注点恢复原状。 4.输入起点和终点，地图上连接两个点，并用实线连接两个点，两个点的图标用比较醒目的图标。
Vue2 使用天地图响应式信息窗口的一种实现方式
m0_67793437的博客
12-22 1318
在弹框组件里面，采用vue组件的形式，使弹框里面的功能实现分离，大大提高了拓展性，由于组件的响应式特征，我们对于弹框内容的自定义性也更好把握，最主要的是，代码写起来方便了。若需要在弹框中实现较为复杂的展示或交互的时候，需要通过。这里的项目框架是 vue2 + vue-cli3，为了使效果更加突出，这里在弹框中引入了 ECharts。在项目开发中，我们可以借助项目框架自带的响应式组件处理。代码尽可能体现的实现思路，具体业务可在此基础上拓展。主要实现代码（直接在 app 组件里面写了）
天地图中标记数据绑定问题
weixin_43923231的博客
11-13 307
天地图中用循环加载标记，绑定数据尝尝会绑定到最后一位，这时候需要做下处理 let marker2img = new T.Icon({ iconUrl:image, iconSize: new T.Point(38, 46), iconAnchor: new T.Point(19, 46)
【自学笔记】在天地图中添加多边形及注册面的点击事件
weixin_46074818的博客
11-30 1993
思路 准备一些多边形坐标，然后在天地图上利用这些坐标形成面，在面上添加监听事件（比如鼠标移入该面后出现信息框） 知识点 Polygon类创建多边形覆盖物。 构造参数：Polygon(points:Array[,opts:PolygonOptions]) points：坐标数组。 opts：多边形的属性对象，请参考 PolygonOptions。更多参数请参考天地图文档 效果图 html部分 <body onLoad="mapTDTLoad()"> <div id="typeMap
国家天地图API 循环添加点 参数传递问题
不死就继续
04-27 3785
在天地图API中，进行循环添加点这个对大家都很容易，但是要
在天地图中添加多边形及注册面的点击事件
Rocky balboa
03-31 1757
思路 准备一些多边形坐标，然后在天地图上利用这些坐标形成面，在面上添加监听事件（比如鼠标移入该面后出现信息框） 知识点 Polygon类创建多边形覆盖物。 构造参数：Polygon(points:Array[,opts:PolygonOptions]) points：坐标数组。 opts：多边形的属性对象，请参考 PolygonOptions。更多参数请参考天地图文档 效果图 html部分 <body onLoad="mapTDTLoad()"> <div id="typeMap
天地图GeoGlobe创建右击事件
weixin_34159110的博客
06-18 365
http://blog.yourtion.com/right-click-geoglobe.html     之前已经介绍了《天地图GeoGlobe添加单击事件》和《天地图GeoGlobe重写双击事件》，单身你安装上述方法去定义右击事件的话，你就会一直看到浏览器弹出的右键菜单。研究了天地图官方的地图，发现它代码的实现是使用jquery的。所以按图索骥，依样画葫芦的写了个右击事件的教程，希...
循环的tabs如何绑定点击事件
05-23
如果你想在循环中创建多个tab，并为每个tab绑定点击事件，可以使用循环变量和闭包实现。具体步骤如下： 1. 在循环中创建tab，并为每个tab添加一个唯一的ID。例如： ```python for i in range(5): tab = ttk.Frame(nb) nb.add(tab, text=f"Tab {i}", padding=3) tab_id = nb.tabs()[i] ``` 2. 创建一个函数，该函数将在tab被点击时调用。该函数将使用闭包来获取当前tab的ID。 ```python def tab_clicked(tab_id): def inner(): print(f"Tab {tab_id} clicked") return inner ``` 3. 在循环中为每个tab绑定点击事件，将当前tab的ID作为参数传递给`tab_clicked`函数： ```python for i in range(5): tab = ttk.Frame(nb) nb.add(tab, text=f"Tab {i}", padding=3) tab_id = nb.tabs()[i] nb.tab(tab_id, command=tab_clicked(tab_id)) ``` 这样，每个tab都会绑定一个点击事件，当该tab被点击时，相应的函数将被调用，并打印出该tab的ID。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值