不正确的多段线在地图上有多个多段线时点击发射

-1

我在Google Map上有多条多段线并为每个多线段添加一个“单击”事件处理程序。所有这些折线都是通过javascript代码添加的。但是，当我点击地图上的任何多段线时，会触发最后一次添加的折线的点击事件。这使得识别被点击的线路变得困难。不正确的多段线在地图上有多个多段线时点击发射

创建的折线的代码是：

$.ajax({ 
       type: "GET", 
       url: "MapData.html", 
       success: function (json) { 
        mapData = JSON.parse(json); 
        var newroad; 
        for (var i = 0; i < mapData.length; i++) { 
         newroad = new google.maps.Polyline({ 
          ID: mapData[i].ID, 
          path: google.maps.geometry.encoding.decodePath(mapData[i].latLngs), 
          strokeColor: 'blue', 
          strokeOpacity: 0.75, 
          strokeWeight: 3 
         }); 

         newroad.setMap(map); 
         google.maps.event.addListener(newroad, 'click', function() { 

          setSelectedRoad(newroad); 
         }); 
        } 
       }, 
       error: function() { 
        alert('Critical Data Failure'); 
       } 
      });

的数据是从服务器上获取正确和预期的所有折线显示为蓝色。点击折线时调用的函数是

function setSelectedRoad(road) { 
     road.strokeColor = 'black'; 
     road.setOptions({ strokeColor: 'black', strokeOpacity: 1.0 }); 
     selectedRoadID = road.ID; 
    }

然而，“selectedRoadID”始终原来是添加的最后一个折线和该行的颜色变为黑色，即使单击其他任何折线。

令人困惑的是，如果我在地图上绘制一条新的折线，并将它的点击事件设置为相同的功能，那么就可以正常工作。我确实得到了点击的多段线的正确ID。这适用于绘制的任何数量的新线条，并适用于以任何顺序单击它们。

来源

2016-04-25 Sudhashbahu

我发现改变

newroad.setMap(map); 
    google.maps.event.addListener(newroad, 'click', function() { 

      setSelectedRoad(newroad); 
    });

到

newroad.setMap(map); 
    google.maps.event.addListener(newroad, 'click', function() { 

      setSelectedRoad(this); 
    });

固定的一切。

来源

2016-04-26 08:40:15 Sudhashbahu

问题是你在一个循环中这样做：

newroad = new google.maps.Polyline({ ... }); 

google.maps.event.addListener(newroad, 'click', function() { 
    setSelectedRoad(newroad); 
});

所以你重新创建newroad让我们说10倍。每次创建它时，都会给同一个变量一个新的事件侦听器，即，您将重写同一个事件侦听器10次。不创建10个单独的事件侦听器，每个多义线一个。

当您单击您的多段线时，您只会执行最后一个版本的事件侦听器。

相反，您需要从循环中分离出事件监听器。事情是这样的：

$.ajax({ 
    type: "GET", 
    url: "MapData.html", 
    success: function (json) { 
     mapData = JSON.parse(json); 
     var newroad; 
     for (var i = 0; i < mapData.length; i++) { 
      newroad = new google.maps.Polyline({ 
       ID: mapData[i].ID, 
       path: google.maps.geometry.encoding.decodePath(mapData[i].latLngs), 
       strokeColor: 'blue', 
       strokeOpacity: 0.75, 
       strokeWeight: 3, 
       map: map 
      }); 

      bindEvent(newroad); 
     } 
    }, 
    error: function() { 
     alert('Critical Data Failure'); 
    } 
}); 

function bindEvent(newroad) { 
    newroad.addListener('click', function() { 
     setSelectedRoad(this); 
    }); 
}

这样，你叫bindEvent 10倍，与newroad不同的参数各一次。因此，您每次创建10个具有不同新值的值的独立事件侦听器。

来源

2016-04-25 10:21:52 duncan

不正确的多段线在地图上有多个多段线时点击发射

回答

相关问题