谷歌地图 - 使用map.fitBounds（边界）; [英] google maps - using map.fitBounds (bounds);

问题描述

我有以下代码（底部），它的JavaScript嵌入在PHP中用一堆标记创建我的谷歌地图。所以我想将缩放比例设置为显示所有标记的级别。我知道我需要这个代码：

  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为$ location）{
 $ markers。='var myLatlng = new google.maps.LatLng'。$ location [1]。'; 
 var marker'。$ mrtallyman。'= new google.maps.Marker（{
 position：myLatlng，
 map：map，
 title：''。$ location [0 ]。'，
图标：https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld='.$mrtallyman.'|FF776B|000000，
}）;' ; 
 $ mrtallyman ++; 
} 
 echo'
< script type =text / javascript> 
函数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. 创建一个空的google.maps.LatLngBounds对象
   
   

     var latlngbounds = new google.maps.LatLngBounds（）; 
     




2. 添加您想要显示的所有地点。他们需要google.maps.LatLng对象

     $ markers。= 
   'var myLatlng = new google.maps .LatLng '$位置[1]。'; 
    latlngbounds.extend（myLatlng）; 
    var marker'。$ mrtallyman。'= new google.maps.Marker（{
    position：myLatlng，
    map：map，
    title：''。$ location [0 ]。'，
   图标：https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld='.$mrtallyman.'|FF776B|000000，
   }）;' ; 
     




3. 在所有位置添加到边界之后（在foreach循环右括号后） ，调用map.fitBounds

     map.fitBounds（latlngbounds）; 
     

I'm new to javascript and still finding the google maps javascript a bit confusing.

I have the following code (Bottom), it's javascript imbedded in php to create my google map with a bunch of markers. So I want to set the zoom to a level where it will show all my markers. I understand I need this code:

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

To set the boundary, but I can't figure out where I should put this or what changes I need to make to the code I'm using which is below:

$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>';

Can anyone help me out here. Confused!

解决方案

Use the principle of that code.

1. create an empty google.maps.LatLngBounds object

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

2. add all the places that you want to be shown to it. They need to be google.maps.LatLng objects

   $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. after all the places have been added to the bounds (after the foreach loop closing bracket), call map.fitBounds

   map.fitBounds(latlngbounds);
   

这篇关于谷歌地图 - 使用map.fitBounds（边界）;的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！