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