谷歌地图标记，多个个人事件

Google Maps Markers, Multiple Individual Events

本文关键字：事件 地图 图标 谷歌      更新时间：2024-04-06

我正在尝试做一些我似乎找不到任何人以前做过的事情，我需要一些帮助。

我正在尝试使用一个元素来替代InfoWindow。当您单击一个标记时，我希望显示一个div，而不是infoWindow。

我已经知道如何让div出现，我只需要想办法把它与谷歌地图/标记事件联系起来。

我所知道的当前代码块；

google.maps.event.addListener(marker, 'click', (function(marker) {
  return function() {
    map.panTo(marker.getPosition());
    map.panBy(m_w_pan,0);
  }
})(marker));

寻址地图上的所有标记。如果我没记错的话，删除末尾的)(marker));会使代码只引用一个标记，但我如何知道它与哪个标记相关/选择我想将事件绑定到的标记？

使用标记阵列（样本）：

var memory = [
  ['A', 37.769587, -122.444344, 1],
  ['B', 37.769587, -122.454344, 2],
  ['C', 37.769587, -122.464344, 3],
  ['D', 37.769587, -122.474344, 4],
  ['E', 37.769587, -122.484344, 5]
];

如何指定在单击标记A时显示div 1，在单击标记B时显示div 2，等等？

我希望这是有道理的。

谢谢！

编辑：我的问题似乎有点让人困惑，我会尽量简化它。如何将事件添加到标记数组中的一个特定标记？这可能吗？每个人都在提到如何为数组中的所有标记创建信息窗口，我需要做的是针对一个特定的标记。也许这会让事情变得更清楚一点？我们拭目以待。

我已经创建了一个可能会对您有所帮助的脚本，让我试着只给您提供您可以使用的内容，以使您的代码正常工作，并看看我所做的是否会对您有帮助。

我使用了以下脚本：

http://google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.1.9/src/infobox.js

所以，假设你有一个标记数组，你将在for循环中迭代：

mapOptions = {
    zoom: 18,
    center: new google.maps.LatLng(youLat, yourLng),
    mapTypeId: google.maps.MapTypeId.SATELLITE,
    panControl: false,
    zoomControl: false,
    mapTypeControl: false,
    scaleControl: false,
    streetViewControl: false,
    overviewMapControl: false
};
map = new google.maps.Map(mapElementId, mapOptions);
ib = new InfoBox();
for (var i = 0; i < markers.length; i++) {
    var options = {
        content: markers[i].htmlContent,
        disableAutoPan: false,
        maxWidth: 0,
        pixelOffset: new google.maps.Size(100, 100),
        zIndex: null,
        closeBoxMargin: "-1000000px",
        closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",
        infoBoxClearance: new google.maps.Size(1, 1),
        isHidden: false,
        pane: "floatPane",
        enableEventPropagation: false
    }
    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(markers[i].lat, markers[i].lng),
        map: map,
        icon: path/to/icon
    });
    google.maps.event.addListener(marker, 'click', function() {
        map.panTo(marker.getPosition());
        ib.setOptions(options);
        ib.open(map, this);
    });
}

markers[i].htmlContent应该是要设置到infoBox的内容。如果这可行的话，请告诉我，我的剧本要复杂得多，我不想让你迷失在其中，所以我隔离了最重要的部分，可以帮助你。这样，您将始终拥有infoBox对象的一个实例，并且对于每个标记，您将更改该infoBox将具有的选项。

相关文章：