无法将 API 连接到标记聚类器和 Google 地图 API

Question

我一直在 Stack Overflow 上通读 markerclusterer.js and some 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);
    });

});

Answer 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

代码片段：

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>

无法将 API 连接到标记聚类器和 Google 地图 API

Trouble connecting API to Marker Clusterer and Google Maps API

javascript

jquery

api

google-maps-api-3

markerclusterer