我的 google 地图没有加载所有位置

Question

我有这张 google 地图，可以 "should" 加载位置并将它们添加到我的 google 地图中。

根据缩放级别，如果它们彼此靠近，也应该将它们添加到一个集群中。

我的问题是它似乎没有加载它们。似乎没有任何错误。

有人可以帮忙吗？

var locations = [{
    lat: 55.674971,
    lng: 12.580891
  },
  {
    lat: 55.674971,
    lng: 12.4
  },
]
$(document).ready(function() {
  codeAddress('Odense');
  codeAddress('Viborg');
  codeAddress('Copenhagen');
  codeAddress('Herningvej9, 8330 Brande');
  codeAddress('Vestergade 24, 9510 Arden');
  codeAddress('Horsens')
  codeAddress('Ove Jensens Alle')
})

function initMap() {

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 5,
    minZoom: 5,
    center: {
      lat: 56.26392,
      lng: 9.501785
    }
  });

  // Create an array of alphabetical characters used to label the markers.
  var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';

  var markers = locations.map(function(location, i) {
    return new google.maps.Marker({
      position: location,
      label: labels[i % labels.length]
    });
  });

  // Add a marker clusterer to manage the markers.
  var markerCluster = new MarkerClusterer(map, markers, {
    imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
  });
}

function codeAddress(address) {
  $.ajax({
    url: "https://maps.googleapis.com/maps/api/geocode/json?address=" + address + "&key=AIzaSyC6B-a580ktINp36CTzg6x_btYI8e_44r8",
    success: function(data) {
      //console.log("lat:" + data.results[0].geometry.location.lat + " lng:" + data.results[0].geometry.location.lng + " Adresse = " + address);
      locations.push({
        "lat": data.results[0].geometry.location.lat,
        "lng": data.results[0].geometry.location.lng
      })
    },
    error: function(data) {

    }
  })
}

$(document).ready(function() {
  function reloadMarkers() {

    // Loop through markers and set map to null for each
    for (var i = 0; i < markers.length; i++) {

      markers[i].setMap(null);
    }
  }
});

#map {
  height: 300px;
  width: 300px;
}


/* Optional: Makes the sample page fill the window. */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js">
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC6B-a580ktINp36CTzg6x_btYI8e_44r8&callback=initMap">
</script>
<div id="map"></div>

Answer 1

您的问题是由于 Ajax 调用（在 codeAddress 中）获取标记坐标的异步性质。创建 new MarkerClusterer(map, markers, {...}).

时，完整的标记列表可能不完整

由于不建议进行同步调用，因此您需要确保在所有 codeAddress ajax 调用完成后创建（或更新）标记集群。一种解决方案是在变量 ajax_completed 中跟踪已完成的 ajax 请求的数量，并将其与标记总数进行比较。

我稍微修改了您的代码以展示如何操作

var locations = [{
    lat: 55.674971,
    lng: 12.580891
  },
  {
    lat: 55.674971,
    lng: 12.4
  },
];
var ajax_completed = 0;
var ajax_reqs_len = 12;
var markers;
var markerCluster;
var map;
var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';

$(document).ready(function() {
  codeAddress('Odense');
  codeAddress('Viborg');
  codeAddress('Copenhagen');
  codeAddress('Herningvej9, 8330 Brande');
  codeAddress('Vestergade 24, 9510 Arden');
  codeAddress('Horsens');
  codeAddress('Ove Jensens Alle');
  codeAddress('Aarhus');
  codeAddress('Hamburg');
  codeAddress('Aalborg');
  codeAddress('Skive');
  codeAddress('Herning');
})

function initMap() {

  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 5,
    minZoom: 5,
    center: {
      lat: 56.26392,
      lng: 9.501785
    }
  });
 
  // it wouldn't make sense to add the markers cluster now because ajax requests are not all complete yet
  console.log("Number of completed requests: ", ajax_completed);

}

function codeAddress(address) {
  $.ajax({
    url: "https://maps.googleapis.com/maps/api/geocode/json?address=" + address + "&key=AIzaSyC6B-a580ktINp36CTzg6x_btYI8e_44r8",
    success: function(data) {
      locations.push({
        "lat": data.results[0].geometry.location.lat,
        "lng": data.results[0].geometry.location.lng
      })
    },
    error: function(data) {},
    complete: function() {
      ajax_completed++;
      if (ajax_completed == ajax_reqs_len) {
        // if all ajax requests are complete
        console.log("All requests completed: ", ajax_completed);
        markers = locations.map(function(location, i) {
          return new google.maps.Marker({
            position: location,
            label: labels[i % labels.length]
          });
        });
        markerCluster = new MarkerClusterer(map, markers, {
          imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
        });
      }
    }
  })
}

#map {
  height: 300px;
  width: 300px;
}


/* Optional: Makes the sample page fill the window. */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js">
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC6B-a580ktINp36CTzg6x_btYI8e_44r8&callback=initMap">
</script>
<div id="map"></div>

PS 通过添加几个新地址并重新运行脚本

，我能够重现您的错误

Answer 2

地理编码器响应您的所有位置并在制作时呈现标记。此代码具有使用群集呈现多个标记的最大能力。绑定地图是一个选项，如果你不想让它成为评论。

$('#map').height(window.innerHeight);
 
var map = [];
map.Init = null;
map.map = null;
map.MapObj = null;
map.MarkerLoad = [];
map.Markers = null;
map.location = null;
map.locationData = [];
map.Request = null;
map.cluster = null;
map.bound = null;
map.boundObj = null;
map.geocoder = new google.maps.Geocoder();
map.locationData = [
   'Odense',
   'Viborg',
   'Copenhagen',
   'Herningvej9, 8330 Brande',
   'Vestergade 24, 9510 Arden',
   'Horsens',
   'Ove Jensens Alle'

];

map.Init = function () {
    map.map();
    map.location();

     // Option method to bound google map to show all markers 
}
map.map = function () {

    map.MapObj = new google.maps.Map(document.getElementById('map'), {
        center: new google.maps.LatLng(30.3753, 69.3451),
        zoom: 10
    });

}
map.bound = function () {
    var bounds = new google.maps.LatLngBounds();
    for (var i = 0; i < map.MarkerLoad.length; i++) {
        bounds.extend(map.MarkerLoad[i].position);
    }
    map.MapObj.fitBounds(bounds);

}
map.location = function () {

    for (var i = 0; i < map.locationData.length; i++) {
        map.Request(map.locationData[i]);
    }

}
map.Markers = function (position) {
    var Marker = new google.maps.Marker({
        position: position,
        map:map.MapObj
    })
    map.MarkerLoad.push(Marker);
     
}
map.Request = function (location) {
    map.geocoder.geocode({'address': location}, function(results, status) {
        if (status === 'OK') {
            map.MapObj.setCenter(results[0].geometry.location);

            map.Markers(results[0].geometry.location);

            if (map.locationData.length == map.MarkerLoad.length) {
                map.bound();
                map.cluster(map.MarkerLoad);
            }
        } else {
            alert('Geocode was not successful for the following reason: ' + status);
        }
       
    })
}
map.cluster = function (markers) {
    var markerCluster = new MarkerClusterer(map.MapObj, markers, {
        imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
    });
}

map.Init();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style>
        html body{
            margin:0px;
            padding:0px;
        }
        #map{
            width:100%;
        }
    </style>
</head>
<body>
    <div id="map">

    </div>
    <script src="Scripts/jquery-3.1.1.js"></script>
     <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC6B-a580ktINp36CTzg6x_btYI8e_44r8"></script>

    <script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js">
    </script>
    <script src="Scripts/map.js"></script>
</body>
</html>

我的 google 地图没有加载所有位置

My google Map don't load all locations

javascript

jquery

google-maps

google-maps-api-3

markerclusterer