1

私はこの「go should go」マップを使って場所を読み込んでGoogleマップに追加する必要があります。私の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>

+0

私はそれがこのコードは、あなたの問題の完全なソリューションです全9箇所 –

答えて

3

あなたの問題は、Ajaxのasyncronous性質は、マーカーの座標を取得する(codeAddressに)呼び出すためです。 new MarkerClusterer(map, markers, {...})を作成すると、マーカーの完全なリストが完全ではない場合があります。

同期コールを行うことはお勧めできませんので、codeAddress ajaxコールが完了すると、マーカークラスタを作成(または更新)する必要があります。 1つの解決策は、変数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をそれを行う方法を示すために、あなたのコードビットを変更

enter image description here

1

地理コーダ応答あなたのすべての場所やメイクにマーカーをレンダリングします。このコードは、複数のマーカーをクラスタでレンダリングする最大限の能力を備えています。拘束された地図はオプションです。コメントしたくない場合です。

$('#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>

+0

をロードしていたと思います。あなたの問題は、ジオコードを呼び出して成功する前に地理情報を呼び出すときにマーカーを呼び出す関数 –

+0

あなた自身がコメントに投稿した問題の説明を回答に追加してください(あなたの投稿を編集できます) –

+0

ありがとう。私を正しいものにする。 –

関連する問題