寻找多边形中心谷歌地图API 3

问题描述 投票:0回答:2

我想在谷歌地图中找到多边形的中心,我尝试了几种解决方案,但是它们都不能正确用于直角三角形多边形,这里是示例代码:

var path = new Array(new google.maps.LatLng(1, 1), new google.maps.LatLng(1, 10), new google.maps.LatLng(10, 10), new google.maps.LatLng(1, 1));

var mapOptions = {
    zoom: 4,
    center: new google.maps.LatLng(40, 9),
    mapTypeId: google.maps.MapTypeId.ROADMAP
};

var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

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);
    const marker = new google.maps.Marker({
  position: {
    lat: bounds.getCenter().lat(),
    lng: bounds.getCenter().lng()
  },
  map: this.map,
  title: "Hello World!"
});
marker.setMap(map);

我使用

google.maps.LatLngBounds();
来查找三角形的中心并在地图中标记中心,但结果中心实际上并不是三角形的真正中心,jsfiddle 此代码的示例
我使用了另一个解决方案(此处讨论)来查找多边形的中心,但这也不起作用,那么是否有其他解决方案可以找到准确的多边形中心,无论多边形类型如何?

google-maps google-maps-api-3 polygon
2个回答
1
投票
points 是多边形点数组,调用 getCenter 获取中心坐标。

var points = [[1,1],[1,10],[10,10]]; function getCenter(){ var sumX = 0, sumY = 0; for(var i = 0; i < points.length; i++){ var point = points[i]; var x = point[0]; var y = point[1]; sumX += x; sumY += y; } return {x:sumX / points.length,y:sumY / points.length}; } var centerOfPoints = getCenter();
    

0
投票
要获取多边形的中心,而不是所有点的平均值,请尝试此

/** * Calculates the center point of a polygon. * * @param {google.maps.Polygon} polygon - The polygon object. * @returns {google.maps.LatLng} - The center point of the polygon. */ function getPolygonCenter(polygon) { const path = polygon.getPath(); let latSum = 0; let lngSum = 0; path.forEach(function (point) { latSum += point.lat(); lngSum += point.lng(); }); const centerLat = latSum / path.getLength(); const centerLng = lngSum / path.getLength(); return new google.maps.LatLng(centerLat, centerLng); }
这对于墨卡托扭曲更加稳健,因为它使用了 Google 魔法。

© www.soinside.com 2019 - 2024. All rights reserved.