谷歌地图API - 加载美国

12

我刚接触Google Maps API。 我想要实现以下功能:每次页面加载时,地图都将围绕美国居中加载。 想象一个围绕美国的框,其中给定了纬度/经度来指定最小和最大边界。 我需要地图加载适当的缩放比例(并且需要禁用缩放),以便该框组成整个地图。

基本上,我想知道是否有一种函数可以根据纬度/经度边界加载地图(或某种方式实现此目的),而不是根据缩放级别加载地图。

2个回答

14

假设您正在使用 v3 API,您可能希望按如下方式使用 fitBounds 方法:

<!DOCTYPE html>
<html> 
<head> 
   <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
   <title>Google Maps fitBounds</title> 
   <script src="http://maps.google.com/maps/api/js?sensor=false" 
           type="text/javascript"></script> 
</head> 
<body> 
   <div id="map" style="width: 500px; height: 350px;"></div> 

   <script type="text/javascript"> 
      var myOptions = { mapTypeId: google.maps.MapTypeId.ROADMAP };
      var map = new google.maps.Map(document.getElementById("map"), myOptions);
      var geocoder = new google.maps.Geocoder();

      geocoder.geocode({'address': 'US'}, function (results, status) {
         var ne = results[0].geometry.viewport.getNorthEast();
         var sw = results[0].geometry.viewport.getSouthWest();

         map.fitBounds(results[0].geometry.viewport);               
      }); 
   </script> 
</body> 
</html>

截图:

Google Maps fitBounds

在上面的例子中,我通过地理编码获取了美国的视窗。不过,你也可以通过传递东北和西南点来创建一个LatLngBounds对象,并使用fitBounds方法缩放和平移地图,使其适合于地图画布。


@hjk:我几个月前回答了一个类似的问题(https://dev59.com/UXE95IYBdhLWcg3wCJNf#2496558)。它展示了`fitBounds`如何反应,并用红色边框表示您将传递给`fitBounds`的`LatLngBounds`。 - Daniel Vassallo
谢谢丹尼尔,很有帮助。那么在Google地图中没有办法调整缩放的细粒度?也就是说,他们的缩放级别是固定的? - hjk
另外,在您的其他回复中查看美国的红色边界框时,为什么边界框会剪裁阿拉斯加?如果答案是因为它只考虑了连续的美国州,那么框不应该更“放大”吗? - hjk
@hjk:关于第一个问题,答案是否定的。您无法调整缩放级别的粒度。例如,您不能设置缩放级别为12.5。这就是为什么在fitBounds方法所提供的边界框和地图画布之间总会存在一些边框空间的原因。 - Daniel Vassallo
@hjk:至于第二个问题,在这个例子中(就像这个例子一样),我从谷歌的地理编码API获取了边界框。我认为它只是一个覆盖大部分陆地的边界框。我不知道为什么它返回一个向南偏移的边界框,但我注意到几乎所有国家的地理编码都返回略微裁剪了该国的边界框。请注意那个问题中的俄罗斯和意大利。 - Daniel Vassallo
3
为避免设置位置时的延迟和额外请求,您可以直接硬编码地理编码器设置的值:zoom: 5, center: new google.maps.LatLng(38.55547456,-95.664999)。请注意不要改变原意,并使翻译更加通俗易懂。 - awolf

0

嗯,由于美国的大小和形状并不经常改变,因此您可以手动找到最佳设置并使用它们。


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接