我的谷歌地圖不會加載所有位置

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>