谷歌地图-事件监听器创建的标记商店定位器

Google Maps - event listener on markers created by Store Locator

本文关键字：定位器 事件 监听器 创建 谷歌地图      更新时间：2023-09-26

我从这个例子中工作:http://storelocator.googlecode.com/git/examples/panel.html

我希望能够添加一个侦听器到这样的所有标记，但我不知道如何引用它们，因为它们是由商店定位器从DataFeed创建的。

google.maps.event.addListener(marker, 'click', //myCode);

这与示例中的面板代码完全相同:

google.maps.event.addDomListener(window, 'load', function() {
  var map = new google.maps.Map(document.getElementById('map-canvas'), {
    center: new google.maps.LatLng(-28, 135),
    zoom: 4,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });
  var panelDiv = document.getElementById('panel');
  var data = new MedicareDataSource;
  var view = new storeLocator.View(map, data, {
    geolocation: false,
    features: data.getFeatures()
  });
  new storeLocator.Panel(panelDiv, {
    view: view
  });
});

看看这个例子。如果你只是想自定义信息窗口的内容，那就使用那个部分。

// Store locator with customisations
// - custom marker
// - custom info window (using Info Bubble)
// - custom info window content (+ store hours)
var ICON = new google.maps.MarkerImage('medicare.png', null, null,
    new google.maps.Point(14, 13));
var SHADOW = new google.maps.MarkerImage('medicare-shadow.png', null, null,
    new google.maps.Point(14, 13));
google.maps.event.addDomListener(window, 'load', function() {
  var map = new google.maps.Map(document.getElementById('map-canvas'), {
    center: new google.maps.LatLng(-28, 135),
    zoom: 4,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });
  var panelDiv = document.getElementById('panel');
  var data = new MedicareDataSource;
  var view = new storeLocator.View(map, data, {
    geolocation: false,
    features: data.getFeatures()
  });
  view.createMarker = function(store) {
    var markerOptions = {
      position: store.getLocation(),
      icon: ICON,
      shadow: SHADOW,
      title: store.getDetails().title
    };
    return new google.maps.Marker(markerOptions);
  }
  var infoBubble = new InfoBubble;
  view.getInfoWindow = function(store) {
    if (!store) {
      return infoBubble;
    }
    var details = store.getDetails();
    var html = ['<div class="store"><div class="title">', details.title,
      '</div><div class="address">', details.address, '</div>',
      '<div class="hours misc">', details.hours, '</div></div>'].join('');
    infoBubble.setContent($(html)[0]);
    return infoBubble;
  };
  new storeLocator.Panel(panelDiv, {
    view: view
  });
});

或者甚至这样做:

view.createMarker = function(store) {
  var markerOptions = {
    position: store.getLocation(),
    title: store.getDetails().title
  };
  var marker = new google.maps.Marker(markerOptions);
  google.maps.event.addListener(marker, "click", function() {
      alert("my code");
  });
  return marker;
}
工作示例

相关文章：