Google Maps API v3:标记 - 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

我发现在调用 SetIcon 之前，必须随时初始化 MarkerImage 对象。所以我替换了 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() {
          });
        }
      }
  });