google-maps - 寻找多边形中心谷歌地图api 3
问题描述
我想在谷歌地图中找到多边形的中心,我尝试了几种解决方案,但是对于直角三角形多边形,它们都没有正确工作这里是示例代码:
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 example of this code。
我使用了另一种解决方案,该解决方案在此处讨论用于查找多边形的中心,但这也不起作用,那么无论多边形类型如何,是否有任何其他解决方案可以找到准确的多边形中心?
解决方案
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();
推荐阅读
- service-worker - 如何修改 Workbox 生成的预缓存清单文件?需要 url 前面有 '/'
- visual-studio-2019 - VS2019 中缺少 LaunchSettings.json
- php - 错误:预期的已知函数,得到“GROUP_CONCAT”
- reactjs - Material-ui:选项卡列表中的按钮
- vue.js - (Vue.js) 在模态中滚动也会滚动到模态的后面
- wordpress - 联系表格 7 - [您的姓名] - “无效的邮箱语法”
- python - 在 Plotly 中创建 Scatter 时出现 ValueError
- android - Android maven发布插件未发布项目依赖项
- php - wp_generate_attachment_metadata 返回一个空数组
- c - 有条件的跳转或移动取决于未初始化的值,但我想我会