我的谷歌地图不会加载所有位置

Question

我已经谷歌地图，“应该”加载位置，并将它们添加到我的谷歌地图。

它也应该将它们添加到群集，如果它们靠近彼此取决于缩放级别。

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

有人可以帮忙吗？

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

你的问题是由于阿贾克斯的asyncronous性要求（在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>