Google地图API v3 - 标记上的中心地图 [英] Google Map API v3 - Centre Map on Markers

问题描述

我最近开始使用Google Maps API v3。

我需要绘制一些位置（可能是3或4），同时将地图居中在这些方面 - 而不是手动设置地图的长和经度为中心...

有人可以分享一些提示，或者指向我正确的方向？

预先感谢！
Dan

 函数初始化（）{
 var latlng = new google.maps.LatLng（51.50816， 0.02712）; 
 var myOptions = {
 zoom：12，
 center：latlng，
 mapTypeId：google.maps.MapTypeId.ROADMAP 
}; 
 var firstmap = new google.maps.Map（document.getElementById（map），myOptions）; 
 // EVENT MARKER 
 var point = new google.maps.LatLng（51.50816，0.02712）; 
 var marker = new google.maps.Marker（{
 position：point，
 map：firstmap，
 title：'ExCel London'，
 draggable：false， 
 icon：'images / event.png'
}）
 var contentstring ='< div> Hello World< / div>'
 var infoWindow = new google.maps。 InfoWindow（{
 content：contentstring 
}）; 
 //酒店1标记
 var point = new google.maps.LatLng（51.503146，-0.113259）; 
 var marker = new google.maps.Marker（{
 position：point，
 map：firstmap，
 title：'Waterloo Hotel'，
 draggable：false， 
 icon：'images / flag.png'
}）
 var contentstring ='< div> Hello World< / div>'; 
 var infoWindow = new google.maps.InfoWindow（{
 content：contentstring 
}）; 
 google.maps.event.addListener（marker，'click'，function（）{
 infoWindow.open（firstmap，marker）; 
}）
}; 
  

解决方案

您需要将标记保存在数组中，然后使用函数中心：

  function autoCenter（）{
 var limits = new google.maps.LatLngBounds（） ; 
 $ .each（arrayMarkers，function（index，marker）{
 limits.extend（marker.position）; 
}）; 
 map.fitBounds（限制）; 
} 
  

I've recently started using Google Maps API v3.

I need to plot some locations (maybe 3 or 4) and at the same time, centre the map on these points - as opposed to manually having to set the long and lat for the map to centre on...

Can someone share some tips, or point me in the right direction?

Thanks in advance! Dan

function initialize() {
      var latlng = new google.maps.LatLng(51.50816, 0.02712);
      var myOptions = {
        zoom: 12,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      };
      var firstmap = new google.maps.Map(document.getElementById("map"),myOptions);
      //EVENT MARKER
      var point = new google.maps.LatLng(51.50816, 0.02712);
      var marker = new google.maps.Marker({
        position:point,
        map:firstmap,
        title: 'ExCel London',
        draggable:false,
        icon:'images/event.png'
      })
      var contentstring = '<div>Hello World</div>'
      var infoWindow = new google.maps.InfoWindow({
        content:contentstring
      });
      //HOTEL 1 MARKER
      var point = new google.maps.LatLng(51.503146, -0.113259);
      var marker = new google.maps.Marker({
        position:point,
        map:firstmap,
        title: 'Waterloo Hotel',
        draggable:false,
        icon:'images/flag.png'
      })
      var contentstring = '<div>Hello World</div>';
      var infoWindow = new google.maps.InfoWindow({
          content:contentstring
      });
      google.maps.event.addListener(marker,'click',function(){
          infoWindow.open(firstmap,marker);
      })
    };

解决方案

You need to save your marker on an array, and then use the function center:

function autoCenter(){
    var limits = new google.maps.LatLngBounds();
    $.each(arrayMarkers, function (index, marker){
        limits.extend(marker.position);
    });
    map.fitBounds(limits);
}

这篇关于Google地图API v3 - 标记上的中心地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！