需要使用自定义谷歌地图 api 添加多个标记答案

【问题标题】：need to add multiple markers using custom google map api需要使用自定义谷歌地图 api 添加多个标记
【发布时间】：2014-10-13 15:25:48
【问题描述】：

我正在检查 google map api 以集成到我的网站中。用我目前所能理解的内容制作了这个页面。

一切正常，但只有一件事，我想在同一张地图上放置三个标记。当我添加多个标记时，地图将停止工作。

测试链接：http://goo.gl/X9q92s

如果您看到我的链接，您将有更好的理解。这是我从谷歌地图 api 获得的代码。我编辑它以获得带有我想要的标记框的灰度图。我只想再添加两个....

请帮忙。

   <script>
function initialize() {
  var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
  var mapOptions = {
    zoom: 4,
    center: myLatlng
  }
  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  var marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
      title: 'Hello World!'
  });
}

google.maps.event.addDomListener(window, 'load', initialize);

    </script>

【问题讨论】：

在您的代码中，您只添加了一个标记。更新您的问题，向我们展示您用于尝试添加三个标记的代码。
嗨，邓肯，我添加了另一个标记的代码...请帮助...
定义'地图停止工作'。我在这里发现的唯一明显错误是您为第二个信息窗口创建了一个新变量infowindow1，但随后您不使用它，而是在marker1的点击事件处理程序中重新使用infowindow
... 你也覆盖了styledMapOptions，你只使用了第二次。还有mapOptions，你只在第一次使用。
表示地图标记未显示。即使我使用相同的事件处理程序，它不应该至少显示第二个标记吗？

标签： google-maps google-maps-api-3 google-maps-markers

【解决方案1】：

您应该将“新标记”代码放入其自己的函数中，如下所示：

function LoadMarkers(name, lat, lng) {
            var MarkerLatLng = new google.maps.LatLng(lat, lng);
            var MarkerOption = { map: map, position: MarkerLatLng, title: name};
            var Marker = new google.maps.Marker(MarkerOption);
}

将其放入自己的函数中，您可以轻松地“刷新”标记，只需使用计时器或其他事件调用函数即可。我正在开发的程序每隔几秒钟刷新一次地图，因为我的数据源不断变化，新的/删除的/更新的记录应该立即反映在地图上。我认为这是一个很好的方法。

然后，在您的程序中，您可以创建一个循环，通过调用 LoadMarkers 函数来拍摄每个标记的信息。我最近爱上了 SqlDataReader。

您的循环将遍历 SqlDataReader，每次读取的记录都会像这样调用脚本：

InvokeScript("LoadMarkers", New Object() {name, lat, lng})

现在也是为每个标记添加信息窗口的好时机。

var infowindow = new google.maps.InfoWindow(
{
content: "Content here"
});

以及 InfoWindows 的点击监听器。 ;)

google.maps.event.addListener(Marker, 'click', function () {
                typeof infoWindowsOpenCurrently !== 'undefined' && infoWindowsOpenCurrently.close(); //If there is an InfoWindow currently open, close it
                infowindow.open(map, Marker); //Open a new one for the selected marker
                infoWindowsOpenCurrently = infowindow; //Set the new info window to the temporary variable
            });

有些人可能不喜欢这种使用循环的方法。我喜欢它，因为我可以“个性化”每条记录的每个标记，同时也可以个性化他们的每个 InfoWindows。在我上面的代码中，假设“名称”是一个唯一 ID，可让您指定特定标记以供以后使用，例如识别单击了哪个标记以及当前打开了哪个 InfoWindow。

【讨论】：