1

マーカーのセットが付いたマップがあります。すべてのマーカーにはリスナーが割り当てられています（クリック）。クリックイベント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);
4

1 に答える 1

0

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() {
          });
        }
      }
  });
于 2012-07-04T19:11:16.820 に答える