Google Maps JavaScript API - 自动缩放级别？

我正在使用多个地图标记。目前我在我的JavaScript中使用map.fitBounds(bounds);来调整地图大小。边界包含多个LatLng对象。Google Maps JavaScript API - 自动缩放级别？

我在做什么错了？因为它缩小太远:-(

JavaScript源

var geocoder, map; 
$(document).ready(function(){ 
    var coll_gmap = $(".gmap"); 
    if (coll_gmap.length != 0) 
    { 
     //initiate map 
     geocoder = new google.maps.Geocoder(); 
     var latlng = new google.maps.LatLng(-34.397, 150.644); 
     var myOptions = { 
      zoom: 13, 
      center: latlng, 
      mapTypeControl: true, 
      navigationControl: true, 
      scaleControl: true, 
      navigationControlOptions: {style: google.maps.NavigationControlStyle.ZOOM_PAN}, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     } 
     var bounds = new google.maps.LatLngBounds(); 
     //loop all addressen + insert into map 
      map = new google.maps.Map(coll_gmap[0], myOptions); 
     coll_gmap.each(function(index) 
     { 
      if (geocoder) { 
        geocoder.geocode({ 'address': $(this).attr("address")}, function(results, status) { 
         if (status == google.maps.GeocoderStatus.OK) { 
          map.setCenter(results[0].geometry.location); 
          bounds.extend(results[0].geometry.location); 

          var marker = new google.maps.Marker({ 
           map: map, 
           position: results[0].geometry.location 
          }); 
         } else { 
          console.log("Geocode was not successful for the following reason: " + status); 
         }//end if status 
        }); //end if geocoder.geocode 
       } //end if geocoder 

     }) //end coll_gmap each 
     map.fitBounds(bounds); 

     }//end if coll_gmap length 
     /* console.log("Script created by NicoJuicy");*/ 
}); //end onload

HTML源

<div class="gmap" address="SomeAddress1" style="width:700px;height:350px"></div> 
<div class="gmap" address="someAddress2"></div>

来源

2010-07-14 NicoJuicy

我已经找到了解决办法。

而不是做一个

bounds.extend(myLatLng)

每次你一myLatLng添加到您的界限，做这些动作的

bounds = map.getBounds(); 
bounds.extend(results[0].geometry.location); 
map.fitBounds(bounds);

希望这有助于任何人！

来源

2010-07-16 09:03:31 NicoJuicy

的fitBounds()方法应该工作。但是请注意，它始终保持一些填充考虑下面的例子：

从上面的例子

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

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

     var bounds = new google.maps.LatLngBounds(); 

     var points = [ 
     new google.maps.LatLng(51.22, 4.40), 
     new google.maps.LatLng(50.94, 3.13) 
     ]; 

     // Extend bounds with each point 
     for (var i = 0; i < points.length; i++) { 
     bounds.extend(points[i]); 
     new google.maps.Marker({position: points[i], map: map}); 
     } 

     // Apply fitBounds 
     map.fitBounds(bounds); 

     // Draw the bounds rectangle on the map 
     var ne = bounds.getNorthEast(); 
     var sw = bounds.getSouthWest(); 

     var boundingBox = new google.maps.Polyline({ 
     path: [ 
      ne, new google.maps.LatLng(ne.lat(), sw.lng()), 
      sw, new google.maps.LatLng(sw.lat(), ne.lng()), ne 
     ], 
     strokeColor: '#FF0000', 
     strokeOpacity: 1.0, 
     strokeWeight: 2 
     }); 

     boundingBox.setMap(map); 
    </script> 
</body> 
</html>

截图：

Google Maps fitBounds Padding

红色边界框表示当与这两个标记扩展LatLngBounds对象。请注意，地图画布宽度为543px，并且还要注意边界框左侧和右侧的填充边距。

现在，如果我们仅通过1px缩小地图画布的宽度，使用542px，该fitBounds()方法将弹出到较低的缩放级别：

Google Maps fitBounds Padding

来源

2010-07-14 23:11:14

尼斯反应。不过，我想知道，如果你发现我的截图，我的标记并不是在中间，更多的左半部。所以别的东西必须是错的，另外，变焦时不我调整宽度得到“接近” ... – NicoJuicy 2010-07-15 08:15:40

@NicoJuicy：是否有可能与复制您的问题一个完整的例子来更新你的问题？我试图把标记在相同的位置和你，和'fitBounds（）'似乎是工作在我截图好多了。 – 2010-07-15 11:32:11

我已经更新我的源:) – NicoJuicy 2010-07-16 08:45:51

我在这里使用了一个“相关”链接到右边，我认为你的问题的答案与前面的问题相同。：p

看到的情况是，每次使用平移/缩放地图的函数时，脚本都会忽略新的相似输入，直到它再次准备好。因此，您必须检测到这一点，并且只有在接受它时才调用fitBounds（）。试试你的

map.fitBounds(bounds);

与

var listener = google.maps.event.addListener(map, "idle", function() { 
       map.fitBounds(bounds); 
       google.maps.event.removeListener(listener); });

好运更换。

来源

2010-11-03 15:37:47 LGT

只需使用setZoom函数即可。

var geocoder = new google.maps.Geocoder(); 
geocoder.geocode({ 'address': zipcode }, function(results, status) 
{ 
    if (status == google.maps.GeocoderStatus.OK) 
    { 
     map.setCenter(results[0].geometry.location); 
     map.setZoom(12); 
    } 
    else 
    { 
     alert(zipcode + " not found" + "\nstatus : " + status); 
    } 
});

来源

2012-12-03 18:07:08 VRC

//Custom zoom if you have just type of geocode response  
function get_node(node_name){ 
return document.getElementById(node_name); 
} 

var map_options = {}; 
var options = { 
    'zoom'  : LB_listing.zoomopt, 
    'minZoom' : 3, 
    'center' : latlng, 
    'mapTypeId' : google.maps.MapTypeId.ROADMAP 
}; 
map_options.map = new google.maps.Map(get_node('googleMap'), options); 


geocoder = new google.maps.Geocoder(); 
var address = $("#search_location").val(); 
geocoder.geocode({ 'address': address}, function(results, status) { 
    if (status == google.maps.GeocoderStatus.OK) { 
     switch(results[0].types[0]){ 
      case 'street_address': 
       map_options.zoomopt = 6; 
       break; 
      case 'route': 
       map_options.zoomopt = 14; 
       break; 
      case 'bus_station': 
       map_options.zoomopt = 14; 
       break; 
      case 'intersection': 
       map_options.zoomopt = 6; 
       break; 
      case 'political': 
       map_options.zoomopt = 14; 
       break; 
      case 'country': 
       map_options.zoomopt = 5; 
       break; 
      case 'administrative_area_level_1': 
       map_options.zoomopt = 6; 
       break; 
      case 'administrative_area_level_2': 
       map_options.zoomopt = 6; 
       break; 
      case 'administrative_area_level_3': 
       map_options.zoomopt = 6; 
       break; 
      case 'administrative_area_level_4': 
       map_options.zoomopt = 6; 
       break; 
      case 'administrative_area_level_5': 
       map_options.zoomopt = 6; 
       break; 
      case 'colloquial_area': 
       map_options.zoomopt = 6; 
       break; 
      case 'locality': 
       map_options.zoomopt = 11; 
       break; 
      case 'ward': 
       map_options.zoomopt = 6; 
       break; 
      case 'sublocality': 
       map_options.zoomopt = 6; 
       break; 
      case 'neighborhood': 
       map_options.zoomopt = 14; 
       break; 
      case 'premise': 
       map_options.zoomopt = 6; 
       break; 
      case 'subpremise': 
       map_options.zoomopt = 6; 
       break; 
      case 'postal_code': 
       map_options.zoomopt = 6; 
       break; 
      case 'natural_feature': 
       map_options.zoomopt = 6; 
       break; 
      case 'airport': 
       map_options.zoomopt = 6; 
       break; 
      case 'park': 
       map_options.zoomopt = 6; 
       break; 
      case 'point_of_interest': 
       map_options.zoomopt = 6; 
       break; 
      default: 
       map_options.zoomopt = 6; 
       break; 
     } 
     map_options.newLocation(results[0].geometry.location.lat(),results[0].geometry.location.lng()); 
    }else { 
     $('#message_error').show().delay(3000).fadeOut(1000); 
     $('#message_error_msg').html("Geocode was not successful for the following reason: " + status); 
    } 
}); 

map_options.newLocation = function(newLat,newLng) { 
map_options.map.setCenter({ 
    lat : newLat, 
    lng : newLng 
}); 
map_options.map.setZoom(map_options.zoomopt);

}

来源

2016-10-21 09:15:22

欢迎来到SO。您的意见总是受欢迎的，但通常一些注释也很好 – YakovL 2016-10-21 09:41:51

Google Maps JavaScript API - 自动缩放级别？

回答

相关问题