javascript - 谷歌地图 : OverlappingMarkerSpiderfier

标签 javascript google-maps google-maps-api-3

所以我是 Google map 的初学者,我一直在查看 OverlappingMarkerSpiderfier Github 说明,但经过几个小时的摆弄后,我无法让任何东西发挥作用!我的代码非常简单,因为我正在学习过程中。这是代码:

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Simple markers</title>
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
      </style>
      <script src="http://jawj.github.io/OverlappingMarkerSpiderfier/bin/oms.min.js"></script> //added the file
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
    <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 oms = new OverlappingMarkerSpiderfier(map); //Spiderfied it here
      var iw = new gm.InfoWindow();
      oms.addListener('click', function(marker, event) {
        iw.setContent(marker.desc);
        iw.open(map, marker);
      });
      oms.addListener('spiderfy', function(markers) {
        iw.close();
      });

      var locations = ["Sydney, Australia", "Sydney, Australia", "Sydney, Australia", "Sydney, Australia"]

      for (var i = 0; i < locations.length; i ++) {
        var title_i = "title " + i;
        var desc_i = "description " + i;
        var loc = new gm.LatLng(-35.3080, 149.1245);
        var marker = new gm.Marker({
          position: loc,
          title: title_i,
          map: map
        });
        marker.desc = desc_i;
        oms.addMarker(marker);  // <-- here attempted to add markers
      } 
    }

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

    </script>
  </head>
  <body>
    <div id="map-canvas"></div>
  </body>
</html>

它与 Github 上的代码非常相似,但不幸的是,我仍然无法让它工作。我一开始就搞乱了地理编码,并将其与可自定义标记(如不同颜色标记)集成,但我就是无法让 Open Spiderfier 运行。

最佳答案

有 2 个问题:

  1. 您必须首先加载maps-API,然后加载oms.min.js
  2. 您忽略了这部分:var gm=google.maps;。将其放在 initialize()
  3. 的开头

关于javascript - 谷歌地图 : OverlappingMarkerSpiderfier,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24317693/

相关文章:

javascript - 多个 ID 和类共享 AddEventListener

javascript - gmap3 删除事件监听器

javascript - 谷歌地图 JavaScript API 不使用最新图像

Android:自动选择调试/发布 Maps api key ?

android - google map api中SHA1指纹的用法是什么

java - 你会如何测试谷歌地图?

javascript - 获取 DOM 上重复的特定类的索引

javascript - 为什么过滤时没有找到文件?

javascript - 经常调用 AjaxComplete

android - map 上的规则形状多边形Android map 点击