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 - 自動縮放級別？

回答

相關問題