Google Maps API v3：marker - setImage在地圖上設置多個標記

Question

我有一組標記的地圖。每個標記都有一個監聽器分配（單擊）。 單擊事件觸發器setImage自我方法，還應該檢查地圖上是否存在相同的圖像（分配給另一個標記） - 如果是，則另一個標記圖像應替換爲另一張圖像。

問題：執行setImage方法後，它會將當前點擊的圖像填充到所有已被點擊的標記（標記存儲爲數組）。在偵聽器代碼中有一個同步調用。該代碼包含一些RoR封裝。

function initialize() { 
    var myLatlng = new google.maps.LatLng(15.000, 0); 
    var myOptions = { 
    scrollwheel: false, 
    center: myLatlng, 
    zoom: 2, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

    var map = new google.maps.Map(document.getElementById("map_canvas"), 
     myOptions); 

    var locations = <%= array_or_string_for_javascript(@locations) %>; 

    var art_img = new google.maps.MarkerImage('<%= image_path(@artist.img_name + "_small.png") %>', 
     new google.maps.Size(70, 61), 
     new google.maps.Point(0,0), 
     new google.maps.Point(0, 61)); 

    var shadow = new google.maps.MarkerImage('<%= image_path("flag_shadow.png") %>', 
     new google.maps.Size(75, 75), 
     new google.maps.Point(0,0), 
     new google.maps.Point(-7, 72)); 
    var markers = []; 
    var markers_tmp = []; 
    <% @locations.each do |location| %> 
    var location = <%= location %>; 
    var image_url = location['result']; 
    if (image_url == "") { 
     image_url = '<%= image_path("flag_unselect.png") %>'; 
    } 
    var image = new google.maps.MarkerImage(image_url, 
     new google.maps.Size(70, 61), 
     new google.maps.Point(0,0), 
     new google.maps.Point(0, 61)); 

    var unsel_image = new google.maps.MarkerImage('<%= image_path("flag_unselect.png") %>', 
     new google.maps.Size(70, 61), 
     new google.maps.Point(0,0), 
     new google.maps.Point(0, 61)); 

    var art_img = new google.maps.MarkerImage('<%= image_path(@artist.img_name + "_small.png") %>', 
     new google.maps.Size(70, 61), 
     new google.maps.Point(0,0), 
     new google.maps.Point(0, 61)); 

    var myLatLng = new google.maps.LatLng(location['posx'], location['posy']); 
    var marker = new google.maps.Marker({ 
     position: myLatLng, 
     map: map, 
     shadow: shadow, 
     icon: image, 
     zIndex: location['loc_id'] 
    }); 

    markers.push(marker); 

    google.maps.event.addListener(marker, 'click', function() { 

     $.__customStorage = {}; 
     $.ajax({ 
     url: "/main/get_current_artist", 
     dataType: 'json', 
     async: false, 
     success: function(data) { 
      $.__customStorage.ajaxResponse = data; 
     } 
     }) 
     var current_artist = '/assets/' + $.__customStorage.ajaxResponse + '_small.png'; 
     art_img.url = '/assets/' + $.__customStorage.ajaxResponse + '_small.png'; 

     for (var i = 0; i < markers.length; i++) { 
     if (markers[i] == this) { 
      markers[i].setIcon(art_img); 
     } 
     } 

    }); 

    <% end %> 
} 
google.maps.event.addDomListener(window, 'load', initialize); 

Answer 1

我發現MarkerImage對象必須在調用SetIcon之前的任何時候進行初始化。 所以我取代了的addListener函數體：

google.maps.event.addListener(marker, 'click', function() { 

    $.__customStorage = {}; 
    $.ajax({ 
    url: "/main/get_current_artist", 
    dataType: 'json', 
    async: false, 
    success: function(data) { 
     $.__customStorage.ajaxResponse = data; 
    } 
    }) 
    var current_artist = '/assets/' + $.__customStorage.ajaxResponse + '_small.png'; 
    art_img.url = '/assets/' + $.__customStorage.ajaxResponse + '_small.png'; 

    for (var i = 0; i < markers.length; i++) { 
    if (markers[i] == this) { 
     markers[i].setIcon(art_img); 
    } 
    } 

}); 

與代碼：

google.maps.event.addListener(marker, 'click', function() { 

     $.__customStorage = {}; 
     $.ajax({ 
     url: "/main/get_current_artist", 
     dataType: 'json', 
     async: false, 
     success: function(data) { 
      $.__customStorage.ajaxResponse = data; 
     } 
     }) 
     var art_img = new google.maps.MarkerImage('/assets/' + $.__customStorage.ajaxResponse + "_small.png", 
     new google.maps.Size(70, 61), 
     new google.maps.Point(0,0), 
     new google.maps.Point(0, 61)); 
     this.setIcon(art_img);    
     $.ajax({ 
     url: "/main/set_markers" + '?image=' + art_img.url + '&locid=' + this.zIndex, 
     dataType: 'json' 
     }).done(function() { 
     }); 

     for (var i = 0; i < markers.length; i++) { 
     if ((markers[i].zIndex != this.zIndex) && 
      (markers[i].icon.url == this.icon.url)) { 
      var unsel_image = new google.maps.MarkerImage('<%= image_path("flag_unselect.png") %>', 
       new google.maps.Size(70, 61), 
       new google.maps.Point(0,0), 
       new google.maps.Point(0, 61)); 
      markers[i].setIcon(unsel_image); 
      $.ajax({ 
      url: "/main/set_markers_unsel" + "?markers_unsel=" + markers[i].zIndex, 
      dataType: 'json' 
      }).done(function() { 
      }); 
     } 
     } 
    });