在初始化地圖之前使用google map geocoder.geocode

Question

我創建了一個不錯的Google地圖表單，該表單從數據庫中獲取客戶端數據（通過jQuery post調用php）並將其加載到clients_details中。 如果在數據庫中提供了Latlng的clients_details [] ['location']，則一切正常，並且標記按預期顯示。 問題是，當未提供clients_details [] ['location']時，我使用clients_details [] ['address']中的地址，並嘗試使用geocoder.geocode獲取標記的位置。 然而令人驚訝的是，每次代碼到達地址解析器時，它都會從地圖上跳下來，並在初始化地圖后又返回到地圖！ 這樣標記就不會添加到地圖中！

我假設它與JavaScript函數優先級有關，但不確定如何

<script>
var clients_details // getting this from database;
var infowindow =[];
var geocoder;
var map;
 function showMarkers(clients_details)
 {

   var marker = [];
   for (var i = 0; i < clients_details.length; i++)
   {

       content = 'Test Content' ;
       infowindow[i] = new google.maps.InfoWindow({
           content: content,
           maxWidth: 350
       });           

       var client_location;
       if (clients_details[i]['location'] !== null)
       {
       // Geting Lat and Lng from the database string
       LatLng = clients_details[i]['location'];           
       client_location = new google.maps.LatLng (LatLng);           
       }
       else
       {            
         client_address = clients_details[i]['address'];
         geocoder.geocode(
           { 'address': client_address},
           function(results, status)
           {                 
             if (status == google.maps.GeocoderStatus.OK)
             {
               client_location = results[0].geometry.location;
             }
             else
               alert('Geocode was not successful for the following\n\
                      reason: ' + clients_details[i]['name']+'\n' + status);
           });

         }
         marker[i] = new google.maps.Marker({
           position: client_location,
           map: map,               
           title: clients_details[i]['name']
       });


       // Add 'click' event listener to the marker
       addListenerMarkerList(infowindow[i], map, marker[i]);

   }// for
 }// function

Answer 1

的

marker[i] = new google.maps.Marker({
       position: client_location,
       map: map,               
       title: clients_details[i]['name']
});

代碼應位於geocoder.geocode調用的回調中。 因為在您的代碼中， client_location是在marker[i]之后計算的。 您可以做的是：

compute the client_location and when the client_locolation is computed
then compute the marker[i]

所以您的代碼可能像這樣：

// ... your code as is
geocoder.geocode(
    { 'address': client_address},
    function(results, status)
    {                 
        if (status == google.maps.GeocoderStatus.OK)
        {
            client_location = results[0].geometry.location;

            // closure needed, for the marker[i] to work correctly, 
            // because we are in a loop on i
            (function (i) {
                marker[i] = new google.maps.Marker({
                    position: client_location,
                    map: map,               
                    title: clients_details[i]['name']
                });
            })(i);

        }
        else
        {
            alert('Geocode was not successful for the following\n\
                  reason: ' + clients_details[i]['name']+'\n' + status);
        }
    }
);
// .... your code as is

Answer 2

您需要將回調函數綁定到正確的事件。 將地圖的初始化綁定到窗口加載。 然后在該函數內部調用標記/地理編碼器的其余邏輯。 從他們的文檔中摘錄：

function initialize() {
  var mapOptions = {
    zoom: 4,
    center: new google.maps.LatLng(-25.363882, 131.044922)
  };

  var map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);

  var marker = new google.maps.Marker({
    position: map.getCenter(),
    map: map,
    title: 'Click to zoom'
  });

  google.maps.event.addListener(map, 'center_changed', function() {
    // 3 seconds after the center of the map has changed, pan back to the
    // marker.
    window.setTimeout(function() {
      map.panTo(marker.getPosition());
    }, 3000);
  });

  google.maps.event.addListener(marker, 'click', function() {
    map.setZoom(8);
    map.setCenter(marker.getPosition());
  });
}

google.maps.event.addDomListener(window, 'load', initialize);