在初始化地图之前使用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);