谷歌地图 - 使用map.fitBounds(bounds);

时间:2013-10-03 14:40:02

标签: javascript php google-maps google-maps-api-3

我有以下代码(Bottom),它是嵌入在php中的javascript,用一堆标记创建我的谷歌地图。所以我想将缩放设置为显示所有标记的级别。我知道我需要这段代码:

var latlngbounds = new google.maps.LatLngBounds();
for (var i = 0; i < latlng.length; i++) {
      latlngbounds.extend(latlng[i]);
}
map.fitBounds(latlngbounds);

设置边界,但我无法弄清楚我应该把这个或我需要对我正在使用的代码进行哪些更改,如下所示:

$zoom = 10;
$markers = '';
$mrtallyman = 1;
foreach($locations as $location) {
    $markers .= 'var myLatlng = new google.maps.LatLng'.$location[1].';
                    var marker'.$mrtallyman.' = new google.maps.Marker({
                      position: myLatlng,
                      map: map,
                      title:"'.$location[0].'",
                      icon: "https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld='.$mrtallyman.'|FF776B|000000",
                    });'; 
    $mrtallyman++;
}
echo '
<script type="text/javascript">
  function initialize() {
    var userLocation = "'.$area.'";
    var geocoder = new google.maps.Geocoder();
    geocoder.geocode( {"address": userLocation}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            var latLng = results[0].geometry.location;
            var mapOptions = {
              center: latLng,
              zoom: '.$zoom.',
              mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            map = new google.maps.Map(document.getElementById("searchPageMap"), mapOptions);
            '.$markers.'
        } else {
           alert("Geocode failed. Reason: " + status);
        }
     });
 }
  google.maps.event.addDomListener(window, "load", initialize);
</script>';

有人可以帮助我吗?

1 个答案:

答案 0 :(得分:2)

使用该代码的原理。

  1. 创建一个空的google.maps.LatLngBounds对象

    var latlngbounds = new google.maps.LatLngBounds();
    
  2. 添加您想要显示的所有地点。他们需要是google.maps.LatLng对象

    $markers .= 
    'var myLatlng = new google.maps.LatLng'.$location[1].';
    latlngbounds.extend(myLatlng);
    var marker'.$mrtallyman.' = new google.maps.Marker({
                  position: myLatlng,
                  map: map,
                  title:"'.$location[0].'",
                  icon: "https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld='.$mrtallyman.'|FF776B|000000",
                });'; 
    
  3. 将所有位置添加到边界后(在foreach循环结束括号之后),调用map.fitBounds

    map.fitBounds(latlngbounds);