Неправильная полилиния Нажмите, если у вас несколько полилиний на карте

Question

У меня есть несколько полилиний на карте Google и добавьте обработчик событий «щелчок» для каждого. Все эти полилинии добавляются через код javascript. Однако, когда я нажимаю на любую полилинию на карте, событие click для последней добавленной полилинии запускается. Это затрудняет идентификацию нажатой линии.

код, который создает полилиний:

$.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» всегда оказывается добавлена ​​последняя ломаная и цвет для этой линии изменяется на черный, даже если какой-либо другой полилинии щелкнул.

Сложная часть состоит в том, что если я нарисую на карте новую полилинию и поставлю ее событие щелчка на ту же функцию, то это работает правильно. Я получаю правильный идентификатор для щелчка полилинии. Это работает для любого количества новых линий, нарисованных и правильно работающих, чтобы щелкнуть их в любом порядке.

Answer 1

Я обнаружил, что изменение

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

      setSelectedRoad(newroad); 
    }); 

в

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

      setSelectedRoad(this); 
    }); 

фиксируется все.

Answer 2

Проблема вы делаете это в цикле:

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 отдельных прослушивателей событий с различным значением для новой дороги.