Question

我能够获得lat / lng坐标，但不知何故，系统将地图的中心点设置为（0,0）。是否有人能够指出我正确的方向如何让正确的纬度/ lng成为我的中心点？

我在这里测试的网址是： http://www.comehike.com/hikes/hike_carpool.php?hike_id=125

谢谢你，亚历

Answer 1

只看了你的代码：

var lat = 0;
var lng = 0;

request.onreadystatechange = function()
{
    ...
    lat = parseFloat(markers[i].getAttribute("lat"));
    lng = parseFloat(markers[i].getAttribute("lng"));
    ...
} // Closing onReadyStateChange

request.send(null);

var myLatlng = new google.maps.LatLng(lat , lng ); // Have to make the center as the hike coordinates.
var myOptions =
{
    zoom: 9,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

map设置为（0,0），因为你定义了lat, lng所以看起来你依赖于lat，lng在ajax回调函数中改变，但它是异步的，所以当浏览器到达时

var myLatlng = new google.maps.LatLng(lat , lng );

在99.99％的情况下，

lat和lng将为0，并且仅在一段时间后（取决于网络等），它们将被更改，但它将在地图构建之后...否则你必须在回调函数中创建你的地图：

function createMap( lat, lng ) 
{
   var myLatlng = new google.maps.LatLng(lat , lng ); // Have to make the center as the hike coordinates.
    var myOptions =
    {
        zoom: 9,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    return new google.maps.Map(document.getElementById("map_canvas"), myOptions);    
}

function initialize( hike_id ) {
  var lat = 0;
  var lng = 0;
  var map;

  request.onreadystatechange = function()
  {
      ...
      lat = parseFloat(markers[i].getAttribute("lat"));
      lng = parseFloat(markers[i].getAttribute("lng"));
      ...
      map = createMap( lat, lng );

   } // Closing onReadyStateChange

   request.send(null);
}

很快，您必须确保在创建地图之前根据需要定义lat和lng ...这样它应该可以工作。或者，您可以创建中心位于（0,0）或其他位置但预定义的地图，然后在ajax回调中使用map.setCenter( center_latlng );

你也不创建标记......你的回调有

// create the marker
center_latlng = new google.maps.LatLng( lat , lng ); 
global_markers[i] = marker;

你定义了center_latlng值，但是不要使用它...而是将你在回调之外定义的marker放到你的markers数组中。应该是这样的：

// create the marker
center_latlng = new google.maps.LatLng( lat , lng ); 
var hikeMarker = new google.maps.Marker({
   position: center_latlng,
   map: map,
   title:"Hike Start"
}); 
global_markers[i] = hikeMarker ;

编辑：查看上一次实施：

function createMap( center_lat , center_lng ) {
   ...
   map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
   ...
}

该函数在全局范围内创建map，在您真正需要它为全局范围之前，这是不好的。我更新了上面的代码，所以我将在该函数中返回map（看看）。否则，如果你真的需要map是全局的（意味着其他东西可以使用它），那么我宁愿采用另一种方式（上面也很快就说过）：在任何地方创建带有中心的地图，然后在ajax回调中设置它的中心。通过这种方式，您将确保尽快创建映射，并且您不会遇到“null”值的问题（如果它在initialize方法之外使用，甚至在ajax回调之外也是如此：

function createMap( lat, lng ) 
{
   var myLatlng = new google.maps.LatLng(lat , lng ); // Have to make the center as the hike coordinates.
    var myOptions =
    {
        zoom: 9,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    return new google.maps.Map(document.getElementById("map_canvas"), myOptions);    
}

function initialize( hike_id ) {
  var lat = 0;
  var lng = 0;
  var map = createMap( lat, lng ); // create with center in (0,0); probably would be better to use San Francisco

  request.onreadystatechange = function()
  {
      ...
      lat = parseFloat(markers[i].getAttribute("lat"));
      lng = parseFloat(markers[i].getAttribute("lng"));
      ...
      map.setCenter( lat, lng ); // it will change position of map to real one

   } // Closing onReadyStateChange

   request.send(null);
}

Answer 2

在定义center_latlng

后添加map.panTo(center_latlng);

Answer 3

我询问红色标记是否故意放在地图上的原因是因为Google Map V3 API中有一个功能允许基于您希望显示的标记的动态地图中心。

您可以使用var myBounds = new google.maps.LatLngBounds();并基本上通过单独执行myBounds.extend(myMarker);来扩展您拥有的所有积分。获得LatLngBounds()中的所有积分后，您可以使用map.fitBounds(myBounds);，地图将根据边界内的标记居中。

Google Map API LatLngBounds

谷歌地图标记范围问题

3 个答案: