Google Maps v3 API扩展边界。 Javascript的方法？ [英] Google Maps v3 API Extend Bounds. Javascript How-To?

问题描述

  function initialize（）{
 //创建地图
 var map = new google.maps.Map（document.getElementById（'map'），{ 
 zoom：10，
 center：new google.maps.LatLng（53.0123601276819，-2.44519164333635），
 mapTypeId：google.maps.MapTypeId.ROADMAP 
}）; 
 
 var m = []; 
 
函数addMarker（title，lat，lng）{
m [m.length] = new google.maps.Marker（{
 position：new google.maps.LatLng（lat ，lng），
 map：map，
 title：title，
 clickable：true，
 icon：'http://domain.com/MVC/images/full.png '
}）; 
 
} 
 
 addMarker（'Home'，53.0682143712504，-2.52150736731894）; 
 addMarker（'Away'，53.0123601276819，-2.44519164333635）; 
 addMarker（'Away'，59.0123601276819，-2.44519164333635）; 
 
 //创建一个LatLngBounds对象
 var bounds = new google.maps.LatLngBounds（）; 
 
 for（var i = 0; i< m.length; i ++）{
 //插入代码添加标记以映射到这里
 
 // Extend LatLngBound对象
 bounds.extend（m [i]）; 
 
} 
 alert（m [0]）; 
 map.fitBounds（bounds）; 
 document.write（getBounds（））; 
 
} 
  

以上是我的代码。

我的意图是开发一个地图，显示大量标记并放大缩放，以便所有标记适合我的屏幕。

我是JS的新手。

我的理解是：

  var m = []; 
  

创建一个空数组。

然后每次我调用 addMarker（）详细信息将被添加到此数组中m

在顶部，我设置了默认缩放然后我添加各种标记。

然后循环遍历m数组中的每个键并使用这些数据扩展边界。

然后我知道 map.fitBounds（bounds）; 应重新定义适用于所有标记的缩放/中心。

它不会。
我所有的标记显示，但缩放/中心不自动调整，我不知道为什么。

任何意见将不胜感激。
谢谢

解决方案

您需要传递 LatLng 对象到 bounds.extend 函数。

以下是代码：

  .... 
 bounds.extend（new google.maps.LatLng（lat，lng））; 
 .... 
  

function initialize(){
// Creating a map
var map = new google.maps.Map(document.getElementById('map'), {
  zoom: 10,
  center: new google.maps.LatLng(53.0123601276819, -2.44519164333635),
  mapTypeId: google.maps.MapTypeId.ROADMAP
});

var m = [];

function addMarker(title, lat, lng) {
    m[m.length] = new google.maps.Marker({
        position: new google.maps.LatLng(lat, lng),
        map: map,
        title: title,  
        clickable: true,
        icon: 'http://domain.com/MVC/images/full.png' 
    });

} 

addMarker('Home', 53.0682143712504, -2.52150736731894);
addMarker('Away', 53.0123601276819, -2.44519164333635);
addMarker('Away', 59.0123601276819, -2.44519164333635);    

// Create a LatLngBounds object
var bounds = new google.maps.LatLngBounds(); 

for (var i = 0; i < m.length; i++) {
  // Insert code to add marker to map here

  // Extend the LatLngBound object
  bounds.extend(m[i]);

}
alert(m[0]);
map.fitBounds(bounds);
  document.write(getBounds());   

}

The above is my code.

My intentions are to develop a map which shows numerous markers and pans the zoom such that all the markers fit on my screen.

I am new to JS.

My understanding is that

var m = [];

creates an empty array.

Then everytime i call addMarker() the details get added to this array m

At the top I set a default zoom and center point.

I then add various markers.

I then loop through each key in the m array and extend the bounds using the data from this.

It is then my understanding that map.fitBounds(bounds); should redefine the zoom/center as applicable to fit all the markers.

It does not. All my markers show, but the zoom/center is not auto adjusting as such, and I have no idea why.

Any advice would be greatly appreciated. Thanks

解决方案

You need to pass a LatLng object to the bounds.extend function.

Here is the code :

....
bounds.extend(new google.maps.LatLng(lat, lng));
....

这篇关于Google Maps v3 API扩展边界。 Javascript的方法？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！