javascript - 在循环中添加事件点击时,谷歌地图标记崩溃

标签 javascript google-maps google-maps-api-3

当我为单击事件添加事件监听器以在几分钟后进行标记时,我有这段代码,我的浏览器将不会响应或崩溃。但是如果我删除事件监听器,我的浏览器将不会崩溃,我已经在添加中使用了闭包方法事件,但仍然崩溃。有人可以帮助我吗?

提前谢谢您。

var map;
var marker;
var markerarray =[];
var car = "M17.402,0H5.643C2.526,0,0,3.467,0,6.584v34.804c0,3.116,2.526,5.644,5.643,5.644h11.759c3.116,0,5.644-2.527,5.644-5.644 V6.584C23.044,3.467,20.518,0,17.402,0z M22.057,14.188v11.665l-2.729,0.351v-4.806L22.057,14.188z M20.625,10.773 c-1.016,3.9-2.219,8.51-2.219,8.51H4.638l-2.222-8.51C2.417,10.773,11.3,7.755,20.625,10.773z M3.748,21.713v4.492l-2.73-0.349 V14.502L3.748,21.713z M1.018,37.938V27.579l2.73,0.343v8.196L1.018,37.938z M2.575,40.882l2.218-3.336h13.771l2.219,3.336H2.575z M19.328,35.805v-7.872l2.729-0.355v10.048L19.328,35.805z";
setInterval(function(){
  $.ajax({
    type: "post",
    url: "vehiclecordinates.php",
    success: function(data){
      coordinates = data.latlng;
      vehiclename = data.vehiclename;
      heading      = data.heading;
      devname = data.vehiclename;
      thedate = data.trackdate;

      for (var i = 0; i < coordinates.length; i++) {
        newcoordinate = new google.maps.LatLng(coordinates[i].split(",")[0],coordinates[i].split(",")[1]);
        if (markerarray[vehiclename[i]] && markerarray[vehiclename[i]].setPosition){

          markerarray[vehiclename[i]].icon.rotation = parseInt(heading[i]);
          markerarray[vehiclename[i]].setPosition(newcoordinate);


            var con = '<div style="font: 11px arial,tahoma,helvetica,sans-serif;">Vehicle Name:' + devname + '<br/>' +'Date='+thedate+'</div>';
        }else {
          marker =  new MarkerWithLabel({
            map:map,
            labelClass: "mylabels",
            labelStyle: {opacity: 1.0},
            labelContent: '<div>'+ vehiclename[i]+'</div>',
            icon:{
              path: car
            scale:.7,
            strokeColor: 'white',
            strokeWeight: .10,
            fillOpacity: 1,
            fillColor: '#404040',
            offset: '5%',
            rotation: parseInt(heading[i]),
            anchor: new google.maps.Point(10, 50)
            }
          });
          marker.setPosition(newcoordinate);
          markerarray[vehiclename[i]] = marker;
            var con = '<div style="font: 11px arial,tahoma,helvetica,sans-serif;">Vehicle Name:' + devname + '<br/>' +'Date='+thedate+'</div>';

        }


           google.maps.event.addListener( marker, 'click', (function  (marker, con, infowindow) {
        return function () {
            infowindow.setContent(con);
            infowindow.open(map,  marker);
        };
        })( marker, con, infowindow));

      }
    }
  });
},1000);

编辑

我找到了导致浏览器崩溃的原因,如果我单击循环中创建的最后一个标记,我的浏览器将崩溃。如果我单击第一个和第二个标记,它工作正常,我的浏览器不会崩溃。如果我单击它,只有最后一个标记。我不知道如何解决这个问题

最佳答案

我会这样做。有一个将标记与信息窗口关联起来的函数。

function bindInfoWindow(marker, map, infowindow, con) { 
    google.maps.event.addListener(marker, 'click', function() { 
        infowindow.setContent(con); 
        infowindow.open(map, marker); 
    }); 
}

从循环内调用该函数,而不是为每个标记定义相同的函数。

for (var i = 0; i < coordinates.length; i++) {
    ...
    bindInfoWindow(marker, map, infowindow, con);  
}   

关于javascript - 在循环中添加事件点击时,谷歌地图标记崩溃,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29568382/

相关文章:

javascript - 如何更改函数中全局变量的值?

javascript - 如何在Javascript中打印点击事件

java - Android studio 不检查 mFusedLocationProviderClient.getLastLocation().addOnSuccessListener 并返回当前位置 null

javascript - Google map 更改标记数据而不删除/创建 (MarkerWithLabel)

javascript - 客户端分页在智能表中不起作用

javascript - Bootstrap 子菜单在打开另一个子菜单时不会关闭上一个子菜单

android - 开始谷歌地图 Intent

Mysql 数据库设计 - 存储单经纬度和多经纬度

javascript - 设置 zIndex KmlLayer 的解决方法

google-maps - Google map api v3 + Google 已禁止此应用程序使用 Maps API