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

Google Maps API v3：marker - setImage在地图上设置多个标记

1 个答案: