Question

我正试图找到一种更好的方法来集中我的谷歌地图。

我已经编写了代码添加到Markers to Outline中，并且正方形区域存储在一个数组中：Coords [i]，in-当保存后返回地图时，它将地图窗口居中基于＆＃34;第一标记＆＃34; lat / lng坐标Coords [0]。

我正试图找出一种更好的方法来将地图居中，在我的轮廓区域周围有足够的空间。

我尝试在Dragend上做这件事，这在某种程度上有效：

google.maps.event.addListener(this.map, 'dragend', function(mapEvent) {
var lat = mapEvent.getCenter() .lat(),
lng = mapEvent.getCenter() .lng(),

console.log(lat + " " + lng + " " + this);

});

但它一直在抛出错误说： ＆＃34;无法获得财产＆＃39; getCenter＆＃39;未定义或空引用＆＃34;

有人可以告诉我我做错了什么或告诉我更好的方法来实现我想要做的事情吗？

作为另一种选择

如果可能的话，我可以将第一个标记[0]保留为已经存在的居中标记，但不要让它勾勒出来...只是标记1 +和在....但我不知道如何修改我的代码来做到这一点。

只是寻找有效的解决方案。

我的完整代码在这里： http://pastiebin.com/embed/593d6d809e2f0

Answer 1

您可以使用LatLngBounds对象。如果有多个多边形，则遍历多边形并使用每个路径坐标扩展边界对象。

LatLngBounds

然后，您可以使地图适合边界对象，以便使用map.fitBounds()进行相应缩放和居中。

fitBounds

如果您使用多路径多边形，请确保使用getPaths方法而不是getPath，如下面的代码所示。

function initialize() {

    var mapOptions = {
        zoom: 4,
        center: new google.maps.LatLng(0, 0),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

    var polygon = new google.maps.Polygon({
        editable: true,
        strokeOpacity: 0,
        strokeWeight: 0,
        fillColor: '#00FF00',
        fillOpacity: .6,
        paths: [
        new google.maps.LatLng(39, 4),
        new google.maps.LatLng(34, 24),
        new google.maps.LatLng(43, 24),
        new google.maps.LatLng(39, 4)],
        map: map
    });
    
    // Create the bounds object
    var bounds = new google.maps.LatLngBounds();

    // Get paths from polygon and set event listeners for each path separately
    polygon.getPath().forEach(function (path, index) {
    
        bounds.extend(path);
    });
    
    // Fit Polygon path bounds
    map.fitBounds(bounds);
}

initialize();

#map-canvas {
  height: 200px;
}

<div id="map-canvas"></div>

<script src="https://maps.googleapis.com/maps/api/js"></script>

Answer 2

好的，我只想出办法！我只是抓住绘制的多边形中心的纬度/经度坐标，并用我的整个地图居中。

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

//Get Center of Saved Coordinates of the drawn polygons
for (var i = 0; i < values["coords"].length; i++) {

bounds.extend(values["coords"][i]);

}

var movemaplat = bounds.getCenter().lat();
var movemaplng= bounds.getCenter().lng();

console.log("MY MAP CENTER " + movemaplat + ", " + movemaplng);

感谢@Daniel Vassallo在这里的回答：How to get the center of a polygon in google maps v3?

使用多边形

2 个答案: