標記Google地圖的動態圖標更改

Question

我研究了Google的地圖類，並指出了我可以在所需位置設置標記的地方。 我想讓圖標在“鼠標事件”中動態更新

    var neighborhoods = [
    [54.50266744485844,  18.540940856933616],
    [54.49848076437959,  18.540254211425804],
    [54.49190082846816, 18.518968200683616],
    [54.4040671009359,  18.608918762207054],
    ];

    var markers = [];
    var map;

對於標記，我使用以下功能。

     function setMarkers(map) {

      var image = {
      url: '/images/icon1.png',
   anchor: new google.maps.Point(0, 32)
   };
    var shape = {
    coords: [1, 1, 1, 20, 18, 20, 18, 1],
    type: 'poly'
  };


    for (var i = 0; i < neighborhoods.length; i++) 
       {
        var neighborhood = neighborhoods[i];
        var marker_temp = new google.maps.Marker
        ({
        position: {lat: neighborhood[0], lng: neighborhood[1]},
        map: map,
        icon: image,
        shape: shape,
        title: "",
        visible:true,
        zIndex: 3
        });
        marker_temp.addListener('mouseover', function() 
        { 
        marker_temp.setOptions({icon: "/images/icon1.png"});
        });

        marker_temp.addListener('mouseout',  function() 
        { 
        marker_temp.setOptions({icon: "/images/icon2.png"});    
        });

        marker_temp.addListener('click',  function() 
        { 
        marker_temp.setOptions({icon: "/images/icon1.png"});
        });


    markers.push(marker_temp);
}// end of for loop ----------------------------------------------------

     }// --- end of set markers function --------------------------------

放置標記可以正常工作，並且所有標記上的事件均會按預期觸發，但是只有將圖標從icon1.png更改為icon2.png才能在最后一個標記上起作用，並且事件與所有標記相關。 誰能告訴我我的思想錯誤在哪里？

Answer 1

Javascript沒有塊范圍，但是有函數范圍。 例：

function setMarkers(map) {
....
   for (var i = 0; i < neighborhoods.length; i++) 
   {
    ....
    var marker_temp = new google.maps.Marker
    ....
   }
}

變量marker_temp的作用域為setMarkers函數，而不是其他編程語言中常見的for -loop范圍。

上面的功能與此相同（該過程稱為hoisting ）：

function setMarkers(map) {
    var marker_temp;
    ....
    for (var i = 0; i < neighborhoods.length; i++) 
    {
     ....
     marker_temp = new google.maps.Marker
     ....
   }
}

這意味着當您執行此操作時：

marker_temp.addListener('click',  function() 
{ 
    marker_temp.setOptions({icon: "/images/icon1.png"});
});

調用setOptions ， marker_temp變量將是循環中最后設置的值。

要解決該問題，可以使用IIFE（中間調用的函數表達式），以便可以在該時間點捕獲標記變量的值：

 marker_temp.addListener('click',  (function(theMarker) 
 { 
    return function(){
        theMarker.setOptions({icon: "/images/icon1.png"});
    }
 })(marker_temp));

有關范圍和吊裝的更多信息，您可以閱讀我寫的一篇博客文章： https : //www.kenneth-truyers.net/2013/04/20/javascript-hoisting-explained/

Answer 2

如果要設置許多事件偵聽器，我發現編寫一個createMarker函數以在事件偵聽器的標記上保留函數閉包更為簡單。 然后從循環內部調用它。 createMarker函數的一個示例：

function createMarker(neighborhood, idx, bounds, map) {
  var image = {
    url: 'http://maps.google.com/mapfiles/ms/micons/blue.png',
    anchor: new google.maps.Point(16, 32)
  };
  var shape = {
    coords: [1, 1, 1, 20, 18, 20, 18, 1],
    type: 'poly'
  };

  var marker_temp = new google.maps.Marker({
    position: {
      lat: neighborhood[0],
      lng: neighborhood[1]
    },
    map: map,
    icon: image,
    shape: shape,
    title: "" + idx,
    visible: true,
    // zIndex: 3
  });
  bounds.extend(marker_temp.getPosition());

  marker_temp.addListener('mouseover', function() {
    marker_temp.setOptions({
      icon: "http://maps.google.com/mapfiles/ms/micons/yellow.png",
      anchor: new google.maps.Point(16, 32)
    });
  });

  marker_temp.addListener('mouseout', function() {
    marker_temp.setOptions({
      icon: "http://maps.google.com/mapfiles/ms/micons/green.png",
      anchor: new google.maps.Point(16, 32)
    });
  });

  marker_temp.addListener('click', function() {
    marker_temp.setOptions({
      icon: "http://maps.google.com/mapfiles/ms/micons/orange.png",
      anchor: new google.maps.Point(16, 32)
    });
  });
  markers.push(marker_temp);
}

概念證明

代碼段：

 function initialize() { var map = new google.maps.Map( document.getElementById("map_canvas"), { center: new google.maps.LatLng(37.4419, -122.1419), zoom: 13, mapTypeId: google.maps.MapTypeId.ROADMAP }); setMarkers(map); } google.maps.event.addDomListener(window, "load", initialize); function setMarkers(map) { var bounds = new google.maps.LatLngBounds(); for (var i = 0; i < neighborhoods.length; i++) { var neighborhood = neighborhoods[i]; createMarker(neighborhood, i, bounds, map); } // end of for loop -------------------------------------- map.fitBounds(bounds); } // --- end of set markers function ------------------------ function createMarker(neighborhood, idx, bounds, map) { var image = { url: 'http://maps.google.com/mapfiles/ms/micons/blue.png', anchor: new google.maps.Point(16, 32) }; var shape = { coords: [1, 1, 1, 20, 18, 20, 18, 1], type: 'poly' }; var marker_temp = new google.maps.Marker({ position: { lat: neighborhood[0], lng: neighborhood[1] }, map: map, icon: image, shape: shape, title: "" + idx, visible: true, // zIndex: 3 }); bounds.extend(marker_temp.getPosition()); marker_temp.addListener('mouseover', function() { marker_temp.setOptions({ icon: "http://maps.google.com/mapfiles/ms/micons/yellow.png", anchor: new google.maps.Point(16, 32) }); }); marker_temp.addListener('mouseout', function() { marker_temp.setOptions({ icon: "http://maps.google.com/mapfiles/ms/micons/green.png", anchor: new google.maps.Point(16, 32) }); }); marker_temp.addListener('click', function() { marker_temp.setOptions({ icon: "http://maps.google.com/mapfiles/ms/micons/orange.png", anchor: new google.maps.Point(16, 32) }); }); markers.push(marker_temp); } var neighborhoods = [ [54.50266744485844, 18.540940856933616], [54.49848076437959, 18.540254211425804], [54.49190082846816, 18.518968200683616], [54.4040671009359, 18.608918762207054], ]; var markers = []; 

 html, body, #map_canvas { height: 100%; width: 100%; margin: 0px; padding: 0px } 

 <script src="https://maps.googleapis.com/maps/api/js"></script> <div id="map_canvas"></div>