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() { 
      }); 
     } 
     } 
    });