Google Maps标记添加高度标签后重复生成问题求助

我完全懂你的困扰：原本标记能正常移动，但为了显示动态高度标签，把标记创建代码挪到定时器里后，就开始不断新增标记，旧的还留在地图上。问题的核心其实是你每次定时器触发都在创建新的Marker实例，而不是更新已有的那一个。

核心思路 #

• 把Marker实例放在setInterval外面（保持在moveMarker函数的作用域内），这样整个定时器周期里操作的都是同一个标记对象。
• 初始化标记时可以给个默认标签，之后每次获取到新的高度数据，用setLabel()方法更新标签内容，同时用setPosition()更新位置——这两个方法都是Google Maps Marker对象自带的，专门用来动态更新属性的。
• 绝对不要在定时器里重新创建Marker，否则每次都会生成新标记，旧的不会自动从地图上移除。

修改后的完整代码示例 #

function moveMarker(map, playerIcon, enemyIcon) { 
  // 先在定时器外面创建标记实例，给个默认标签
  var eplanezero = new google.maps.Marker({
    map: map, 
    icon: enemyIcon, 
    label: "0" // 初始默认高度
  }); 

  setInterval(function () { 
    $.post("MISSION_ADMIN_radar.txt", function(dataenemy, status) { 
      var latlnge = JSON.stringify(dataenemy); 
      latlnge = latlnge.replace(/"/g,""); 
      latlnge = latlnge.replace(/[\\r\\n]/g,""); 
      CoordsEnemy = latlnge.split(";" ); 
      var army = parseFloat(CoordsEnemy[0].substring(0)); 

      if (army == 2) {//己方部队=1，敌方=2
        var commaPos = CoordsEnemy[0].indexOf(','); 
        var hyphenPos = CoordsEnemy[0].indexOf('+'); 
        // 获取高度值
        var Alt0 = parseFloat(CoordsEnemy[0].substring(hyphenPos + 1 , CoordsEnemy[0].length)); 
        var lat0 = parseFloat(CoordsEnemy[0].substring(4, commaPos)); 
        var long0 = parseFloat(CoordsEnemy[0].substring(commaPos + 1, CoordsEnemy[0].length)); 

        // 关键：更新已有标记的标签和位置，而不是创建新标记
        eplanezero.setLabel(Alt0.toString()); // 注意要转成字符串，label接受字符串类型
        eplanezero.setPosition(new google.maps.LatLng(lat0, long0)); 
      }
    }); 
  }, 2000); 
}

关键细节解释 #

• 为什么原来的做法会新增标记？因为每次setInterval触发，都会执行new google.maps.Marker()生成新的标记对象，旧标记没有被主动移除，就会在地图上堆积。
• setLabel()方法：Google Maps的Marker对象原生支持用这个方法动态修改标签，不需要重新创建标记。注意标签值要求是字符串类型，所以要把数值类型的Alt0转成字符串再传入。
• 标记实例的作用域：把eplanezero定义在moveMarker函数内、定时器外面，这样定时器的回调函数可以稳定访问到这个变量，每次操作的都是同一个标记对象。

这样修改后，既可以实现标记的平滑移动，又能动态更新高度标签，而且不会产生多余的旧标记。

内容的提问来源于stack exchange，提问作者Max Evans