Question

在编写我的Google地图事件触发器时遇到一点障碍。事件触发器仅触发数组中的最后一个标记。

尝试了几种不同的方式，但仍然会出现甜甜圈。

//LOOP thru all walkerville locations  and create Markers        
var walker [BIG array here];
var walk = [];

for (i = 0; i < walker.length; i++) {            
    var data = walker[0];
    var walk = new google.maps.Marker({
        position: new google.maps.LatLng(walker[i][2], walker[i][3]),
        icon:'img/markers/walkermarker.png',
        title: walker[i][1],
        html: walker[i][4],
        map: map,
        id: walker[i][0]            
    });

    //ADD A LINK FOR THIS MARKER TO THE DIV, WHEN CLICKED, IT SHOULD TRIGGER THE MARKER CLICK / INFO WINDOW FOR COORESPONDING MARKER
    $j('.legend').append('<li><a href="#" id="wn" data-id="' + walker[i][0] + '">' + walker[i][1] + '</a> </li>');

    google.maps.event.addListener(walk, "click", function () {
        //alert(this.html);
        infobox.setContent(this.html);
        //infobox.open(map, this);
        infobox.open(map, this);
        map.setZoom(17);
        map.panTo(this.getPosition());
        console.log(this)
    });
}

$j(document).on('click', '#wn', function(){
var id = ($j(this).data('id'));
  google.maps.event.trigger( walk , 'click');
  console.log(id);
});

Answer 1

您的“触发器”代码仅在数组的最后一个标记处调用（int x = 8; int y = x; x = 4; System.out.println(x + ", " + y);是对最后创建的标记的引用）。

walk

您似乎没有google.maps.Markers数组

proof of concept fiddle

代码段

$j(document).on('click', '#wn', function(){
  var id = ($j(this).data('id'));
    google.maps.event.trigger( walk , 'click');
    console.log(id);
});

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  //LOOP thru all walkerville locations  and create Markers        

  var walk = [];
  var bounds = new google.maps.LatLngBounds();
  for (i = 0; i < walker.length; i++) {
    var data = walker[0];
    var walk = new google.maps.Marker({
      position: new google.maps.LatLng(walker[i][2], walker[i][3]),
      icon: 'http://maps.google.com/mapfiles/ms/micons/blue.png',
      title: walker[i][1],
      html: walker[i][4],
      map: map,
      id: walker[i][0]
    });
    gmarkers.push(walk);
    bounds.extend(walk.getPosition());
    //ADD A LINK FOR THIS MARKER TO THE DIV, WHEN CLICKED, IT SHOULD TRIGGER THE MARKER CLICK / INFO WINDOW FOR COORESPONDING MARKER
    $j('.legend').append('<li><a href="#"  id="wn" data-id="' + walker[i][0] + '">' + walker[i][1] + '</a> </li>');

    google.maps.event.addListener(walk, "click", function() {
      //alert(this.html);
      infobox.setContent(this.html);
      //infobox.open(map, this);
      infobox.open(map, this);
      map.setZoom(17);
      map.panTo(this.getPosition());
      console.log(this)
    });
  }
  map.fitBounds(bounds);

  $j(document).on('click', '#wn', function() {
    var id = ($j(this).data('id'));
    google.maps.event.trigger(gmarkers[id], 'click');
    console.log(id);
  });
}

var $j = jQuery.noConflict();
var infobox = new google.maps.InfoWindow();
var gmarkers = [];
var walker = [
  [0, 'Bondi Beach', -33.890542, 151.274856, "<h1>heading</h1>stuff"],
  [1, 'Coogee Beach', -33.923036, 151.259052, "<h1>heading</h1>stuff"],
  [2, 'Cronulla Beach', -34.028249, 151.157507, "<h1>heading</h1>stuff"],
  [3, 'Manly Beach', -33.80010128657071, 151.28747820854187, "<h1>heading</h1>stuff"],
  [4, 'Maroubra Beach', -33.950198, 151.259302, "<h1>heading</h1>stuff"]
];

google.maps.event.addDomListener(window, "load", initialize);

html,
body,
#map_canvas {
  height: 450px;
  width: 100%;
  margin: 0px;
  padding: 0px
}

从外部点击触发标记

1 个答案: