解决在高德地图中循环加载marker并添加多个text标记文本，解决只显示最后一个标记文本的问题

淩亂°似流年 2022-12-14 15:53 1219阅读 0赞

场景： 地图运动轨迹中有多个marker，不同marker使用不同点标记进行注释，该点触发的事件需要使用文本显示出来（最后是需要移入时显示，移开时隐藏）

难点： 高德地图的setlabel不能实现显示和隐藏；改用文本标记

问题： 在高德地图中循环加载marker并添加多个text标记文本，解决只显示最后一个标记文本的问题

解决方法： 使用闭包，注意this 的指向。

for(**let** i = 0 ; i < this.alarmlist.length; i++)\{

//解决循环加载marker并添加多个text标记文本，解决只显示最后一个标记文本的问题

** let \_this = this;**

** (function(i)\{**

let lat = \_this.alarmlist\[i\].lat;

let lon = \_this.alarmlist\[i\].lon;

marker = new AMap.Marker(\{

icon: "./images/alarmMarker.png",

position: \[lon,lat\],

// offset: new AMap.Pixel(-13, -30)

offset: new AMap.Pixel(-26, -13),

\});

let alarmtime = \_this.alarmlist\[i\].alarmtime;

let subalarmtypestr = \_this.alarmlist\[i\].subalarmtypestr;

// 自定义点标记内容

var markerContent =  "时间:" + alarmtime + "类型:" + subalarmtypestr +"<br/>" ;

// marker.setLabel(\{

//     offset: new AMap.Pixel(20, 20),  //设置文本标注偏移量

//     content: "<div class='info' style='color: \#fff'>"+ markerContent +"</div>", //设置文本标注内容

//     direction: 'right' //设置文本标注方位

// \});

// 创建纯文本标记

let text = new AMap.Text(\{

text: markerContent,

anchor:'center', // 设置文本标记锚点

draggable:true,

cursor:'pointer',

style:\{

'margin-bottom': '1rem',

'background-color': 'rgba(0, 255, 255, 0.5)',

'text-align': 'center',

'font-size': '20px',

'color': '\#fff',

\},

position: \[lon,lat\],

\});

AMap.event.addListener(marker, 'mouseover', function(e) \{

// console.log("监听事件mouseover",marker);

// console.log("markerContent",markerContent);

text.setMap(\_this.Map);

\})

AMap.event.addListener(marker, 'mouseout', function(e) \{

console.log("监听事件mouseout");

text.setMap(null);

\})

\_this.Map.add(marker);

**     \})(i);**

\}

发表评论取消回复

表情：

评论列表（有 0 条评论，1219人围观）

还没有评论，来说两句吧...

相关阅读

相关 046：cesium加载高德地图（多种形式）

![在这里插入图片描述][8e6fb03228114687897d406ccc58f3ed.png_pic_center] 第046个 [点击查看专栏目录][Link 1]

Love The Way You Lie/ 2024年03月24日 14:29/ 0 赞/ 57 阅读

相关 065：mapboxGL在一个图层中随机添加100个标记（marker）

![在这里插入图片描述][bf6d528f641048c2924d88e7dc1e25f4.png_pic_center] 第065个 [点击查看专栏目录][Link 1]

梦里梦外;/ 2024年02月21日 11:51/ 0 赞/ 21 阅读

相关解决在高德地图中循环加载marker并添加多个text标记文本，解决只显示最后一个标记文本的问题

场景：地图运动轨迹中有多个marker，不同marker使用不同点标记进行注释，该点触发的事件需要使用文本显示出来（最后是需要移入时显示，移开时隐藏）难点：高德地图的s

淩亂°似流年/ 2022年12月14日 15:53/ 0 赞/ 1220 阅读

相关解决腾讯地图标记多个点，只渲染最后一个点问题

解决方法 1. `new`多个`Geocoder`，然后不同的点用不同的回调函数；适用于标记点不多的情况，多点标记不适用。 2. 用setTimeout；但是多点渲染

素颜马尾好姑娘i/ 2022年11月28日 15:15/ 0 赞/ 280 阅读

相关高德地图api显示标记点及封闭区域

直接上代码 -------------------- 先编写一个取经纬度页面(该页面使用的是百度地图坐标转高德地图坐标)，将得到的经纬度存到

曾经终败给现在/ 2022年09月10日 06:26/ 0 赞/ 563 阅读

相关高德地图-删除多个指定点标记

1、问题背景高德地图上标记多个标记，点击删除按钮，可以删除指定的几个点标记 2、实现源码 <!DOCTYPE html> <html

r囧r小猫/ 2022年07月15日 05:26/ 0 赞/ 457 阅读

相关高德地图-删除多个点标记

1、问题背景高德地图上有自己创建的marker，单击删除按钮，可以删除多个标记 2、实现源码 <!DOCTYPE html> <ht

绝地灬酷狼/ 2022年07月15日 05:25/ 0 赞/ 421 阅读

相关高德地图地图的加载（一）

首先要申请高德地图开发的key值,这里就不做叙述。 HTML部分： ![\\\\][20190117111316684.png] \-css部分 html, b

谁践踏了优雅/ 2022年03月26日 12:42/ 0 赞/ 765 阅读

相关高德地图js API实现多点标记marker，多点marker移除和鼠标滑入标点显示提示框

官方API：[https://lbs.amap.com/api/javascript-api/guide/abc/prepare][https_lbs.amap.com_api

╰半夏微凉°/ 2022年02月28日 09:10/ 0 赞/ 1158 阅读

相关 uni-app 地图标记点循环显示所有marker

<template> //uniapp 地图插件引入 <view class="uni-common-mt" style="margin:0">

你的名字/ 2021年09月07日 06:06/ 2 赞/ 2529 阅读