如何在 Google Maps V3 上居中和缩放多个标记

Posted 2023-02-23

【中文标题】如何在 Google Maps V3 上居中和缩放多个标记

【英文标题】：How to center and zoom multiple markers on Google Maps V3

【发布时间】：2013-12-26 12:15:28

【问题描述】：

我使用以下代码：

 var geocoder;
    var map;
    var markers = [];
    function initialize() 
        geocoder = new google.maps.Geocoder();
        // var latlng = new google.maps.LatLng(51.733833,0.351563);
        var latlng = new google.maps.LatLng(53.590875,-2.279663);
        // var latlng = new Array (new google.maps.LatLng (52.537,-2.061), new google.maps.LatLng (52.564,-2.017));
        var myOptions = 
            zoom: 7,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        
        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

        addPostCode('EX4 5SP');
        addPostCode('EX16 6LH');
        addPostCode('M1 2AP');

我找到了一些示例如何实现这一点 在以下代码中：Google MAP API v3: Center & Zoom on displayed markers 实现这一点，使用以下代码。

// map: an instance of GMap3
// latlng: an array of instances of GLatLng
var latlngbounds = new google.maps.LatLngBounds();
latlng.each(function(n)
   latlngbounds.extend(n);
);
map.setCenter(latlngbounds.getCenter());
map.fitBounds(latlngbounds); 

问题是我需要使用邮政编码在地图上显示位置。是否可以从邮政编码创建一个 GLatLng 实例数组，然后使用上面的代码在地图上缩放和居中多个标记？

【问题讨论】：

GLatLng 来自 Google Maps API v2，而不是 v3。你的意思是我希望的一组 google.maps.LatLng 实例？

Google Maps API v3 - fitBounds after multiple geocoder requests的可能重复

【参考方案1】：

GClientGeocoder 可以获取邮政编码并返回 GLatLng：请参阅 https://groups.google.com/forum/#!topic/google-maps-api/JN8OW5Tyaws。

要使多个标记居中，请参阅Find center of multiple locations in Google Maps

是的，这是 V2——GLatLng 把我扔了。 V3 中存在相同的功能： https://developers.google.com/maps/documentation/javascript/examples/geocoding-simple

【讨论】：

GClientGeocoder 来自已弃用的 Google Maps API v2，@Roman 使用 API v3（尽管他对 GLatLng 的误导性引用）

我通过在 ColdFusion 中调用以下 url 解决了将邮政编码转换为 lat/long 的问题：maps.googleapis.com/maps/api/geocode/…" result="myResult"> 这将返回带有 lat/long 的 json .感谢您的帮助。

【参考方案2】：

//locationsColl 包含坐标列表

var latlng = [];
_.forEach(locationsColl, function (address) 
    latlng.push(address);
);

var latlngbounds = new google.maps.LatLngBounds();
_.forEach(latlng,function (n) 
    latlngbounds.extend(n);
);
// center map to central point between markers
map.setCenter(latlngbounds.getCenter());
// set zoom to fit all coord
map.fitBounds(latlngbounds);