将 API 连接到 Marker Clusterer 和 Google Maps API 时遇到问题答案

【问题标题】：Trouble connecting API to Marker Clusterer and Google Maps API将 API 连接到 Marker Clusterer 和 Google Maps API 时遇到问题
【发布时间】：2016-01-11 22:42:22
【问题描述】：

我一直在阅读 Stack Overflow 上 markerclusterer.js 和一些 other questions 附带的简单示例，但我不确定我做错了什么。

我看到的其他示例使用 json 或 HTML 页面中内置的标记，但我从另一个 API 调用我的数据。当我尝试修改我的页面以合并标记和其他 API 时，我通常最终会破坏我的页面。

截至目前，我在控制台中没有任何错误，但显然有些东西无法正常工作。

我做错了什么？感谢您的帮助！

HTML：

<body>
<div class="container">
    <div id="content">
        <br>
            <div id="googleMap"></div>
        <br>
        <footer id="footer">
            <p>Footer</p>
        </footer>
    </div>
</div>

CSS：

#content {
box-shadow: 5px 5px 10px 5px black;}

#googleMap {
height: 400px;
width: 100%;
border: 1px solid black;}

JavaScript：

var map;
var MarkerClusterer;
var marker;
var mcOptions;
var markers;

$(document).ready(function(){

//Construct the query string
url = 'https://opendata.howardcountymd.gov/resource/2rmt-d3f4.json?'
        + '$$app_token=3bEFB0E09z1w6zaJfAb6QqLsX';

function initialize() {
    var mapProp = {
        center:new google.maps.LatLng(39.003888,-77.105367),
        zoom:5,
        mapTypeId:google.maps.MapTypeId.TERRAIN
    };




    map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
//google.maps.event.addDomListener(window, 'load', initialize);

initialize();

//Retrieve our data and plot it
 $.getJSON(url, function(data, textstatus) {
      $.each(data, function(i, entry) {

        //Cluster Markers
          var markers = [];
          for (var i = 0; i < 100; i++ ) {
            var entryMarkers = entry[i];
            var LatLng = new google.maps.LatLng(parseFloat(entry.coordinates.latitude), 
                                               parseFloat(entry.coordinates.longitude));
          }

          var marker = new google.maps.Marker({
              position: new google.maps.LatLng(parseFloat(entry.coordinates.latitude), 
                                               parseFloat(entry.coordinates.longitude)),
              map: map,
              title: entry.file_name
          });
          markers.push(marker);
      });
      var markerCluster = new MarkerClusterer(map, markers);
    });

});

【问题讨论】：

标签： javascript jquery api google-maps-api-3 markerclusterer

【解决方案1】：

您需要将所有标记放在一个数组中。现在，您正在创建每个标记之前清除标记数组。将 var markers = []; 移到 $.each 之外。

//Retrieve our data and plot it
$.getJSON(url, function (data, textstatus) {
    //Cluster Markers
    var markers = [];
    $.each(data, function (i, entry) {


        for (var i = 0; i < 100; i++) {
            var entryMarkers = entry[i];
            var LatLng = new google.maps.LatLng(parseFloat(entry.coordinates.latitude),
            parseFloat(entry.coordinates.longitude));
        }

        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(parseFloat(entry.coordinates.latitude),
            parseFloat(entry.coordinates.longitude)),
            // map: map,
            title: entry.file_name
        });
        markers.push(marker);
    });
    var markerCluster = new MarkerClusterer(map, markers);
});

proof of concept fiddle

代码 sn-p：

var map;
var MarkerClusterer;
var marker;
var mcOptions;
var markers;

$(document).ready(function() {

  //Construct the query string
  url = 'https://opendata.howardcountymd.gov/resource/2rmt-d3f4.json?' + '$$app_token=3bEFB0E09z1w6zaJfAb6QqLsX';

  function initialize() {
      var mapProp = {
        center: new google.maps.LatLng(39.23888, -77.105367),
        zoom: 10,
        mapTypeId: google.maps.MapTypeId.TERRAIN
      };




      map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
    }
    //google.maps.event.addDomListener(window, 'load', initialize);

  initialize();

  //Retrieve our data and plot it
  $.getJSON(url, function(data, textstatus) {
    //Cluster Markers
    var markers = [];
    $.each(data, function(i, entry) {


      for (var i = 0; i < 100; i++) {
        var entryMarkers = entry[i];
        var LatLng = new google.maps.LatLng(parseFloat(entry.coordinates.latitude),
          parseFloat(entry.coordinates.longitude));
      }

      var marker = new google.maps.Marker({
        position: new google.maps.LatLng(parseFloat(entry.coordinates.latitude),
          parseFloat(entry.coordinates.longitude)),
        // map: map,
        title: entry.file_name
      });
      markers.push(marker);
    });
    var markerCluster = new MarkerClusterer(map, markers);
  });

});

#content {
  box-shadow: 5px 5px 10px 5px black;
}
#googleMap {
  height: 400px;
  width: 100%;
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclustererplus/src/markerclusterer.js"></script>
<div class="container">
  <div id="content">
    <br>
    <div id="googleMap"></div>
    <br>
    <footer id="footer">
      <p>Footer</p>
    </footer>
  </div>
</div>

【讨论】：

我从 $.getJSON 中删除了 var markers = []; 并在文档加载之前将 = [] 添加到 var markers 并且它可以工作。谢谢！
当我添加信息窗口时，你介意告诉我我做错了什么吗？我已经在传单上完成了弹出窗口，但没有使用谷歌或集群标记插件。 Fiddle here
那是另一个问题。