如何在谷歌地图javascript v3中居中多边形？答案

【问题标题】：How to center polygon in google maps javascript v3?如何在谷歌地图javascript v3中居中多边形？
【发布时间】：2015-05-25 03:34:25
【问题描述】：

我有一个带有来自 JSON 的多边形数组的谷歌地图。加载地图后，我需要将多边形居中。我在这部分遇到了麻烦。请。有人来帮助我。

这是我的 JSON 示例

[{"ZoneID":7,"Name":"Testing Site Zone","Type":"Home","TypeID":0,"Perimeter":"25.774252,-80.190262 18.466465,-66.11829 32.321384,-64.75737","CellIds":"","Location":"","Company":"Company Co. Ltd.","CompanyID":0,"Color":"#598527","Image":null,"ImageFill":null,"Tag":null,"TagID":null,"CreatedDate":"2015-05-04T08:24:25.297345","LastModified":"2015-05-04T08:24:25.297345","Created_UserID":0,"Modified_UserID":0,"Created_User":"","Modified_User":"","ErrorMessage":null}]

这是加载 JAVASCRIPT

var geocoder;
var perimeter = obj.Perimeter;
var name = obj.Name;
var type = obj.Type;
var company = obj.Company;
var address = obj.Location;
var color = obj.Color;
var map;
var polygon;
var pathCoordinates = new google.maps.MVCArray();

function initialize() {
    geocoder = new google.maps.Geocoder();
    map = new google.maps.Map(document.getElementById('map'), {
        zoom: 10,
        center: new google.maps.LatLng(13.7500, 100.4833),
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        disableDefaultUI: true,
        zoomControl: true
    });
    var parsePerimeter = perimeter.replace(/\),/g, "");
    var coords = parsePerimeter.split(" ");
    var recoords;
    for (var k = 0; k < coords.length; k++) {
        recoords = coords[k].split(",");
        pathCoordinates.push(new google.maps.LatLng(parseFloat(recoords[0]), parseFloat(recoords[1])));
    }
    polygon = new google.maps.Polygon({
        path: pathCoordinates,
        strokeColor: color,
        strokeOpacity: 0.8,
        strokeWeight: 3,
        fillColor: color,
        fillOpacity: 0.35,
        Company: company,
        Name: name,
        Address: address,
        map: map
    });
    pathCoordinates = [];
    polygon.setMap(map);
    // Add a listener for the click event.
    google.maps.event.addListener(polygon, 'click', showArrays);
    infoWindow = new google.maps.InfoWindow();
    google.maps.event.addListener(polygon, 'click', (function (polygon, k) {
        return function () {
            map.panTo(this.position);
        }
    })(polygon, k));
}

【问题讨论】：

标签： javascript json google-maps google-maps-api-3

【解决方案1】：

由于 Polygon 没有 getBounds 或 getCenter 方法，所以你必须自己做。

这里的关键是创建一个LatLngBounds 对象并用每个多边形点扩展它。然后您可以将此对象与地图fitBounds 方法一起使用。

var polygon = new google.maps.Polygon({
    path: path,
    map: map
});

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

for (var i=0; i<polygon.getPath().length; i++) {

    var point = new google.maps.LatLng(path[i].lat(), path[i].lng());
    bounds.extend(point);
}

map.fitBounds(bounds);

JSFiddle demo

【讨论】：