Sil*_*ier 12 javascript google-maps polygon projection google-maps-api-3
大约一个星期前,我遇到了一个问题:在自定义谷歌驱动的地图上,我的多边形不会显示,而相同坐标的标记完全没问题.尽管我使用Google Maps API,但似乎无法找到原因.
这是指向地图截图的链接.紫色箭头和数字是我的补充,他们表示:
google.maps.Marker我可以把我的"区域"的边缘.google.maps.Polygon代码生成的工件.它是预期的红色,但完全不合适并且奇怪地平坦.以下是生成标记和多边形的代码部分:
var regionData = tecMap.regions[r];
var regionMapMarkers = new google.maps.MVCArray();
for (c in regionData.coords) {
var point = projection.worldToMap(regionData.coords[c]);
debugRegionPoints.push(point);
var thisLatLng = projection.fromPointToLatLng(point);
debugRegionLatLngs.push(thisLatLng);
regionMapMarkers.push(thisLatLng);
}
regionMapMarkers.forEach(function(latLng, m){
var marker = new google.maps.Marker({
position: latLng,
map: map,
title: '',
optimized: false
});
regionCorners.push(marker);
});
var paths = new google.maps.MVCArray();
paths.push(regionMapMarkers);
var region = new google.maps.Polygon({
fillColor: "#FF0000",
fillOpacity: 0.35,
map: map,
paths: paths,
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 2
});
regionPolys.push(region);
如果您对阵列数组感到疑惑,那么它与Google Maps Javascript API完全相同.
如果您想查看地图和相关脚本,可以在此处找到它.代码片段在Scripts/tectonicus.js,从第659行开始.
[编辑]一些调试信息:
它似乎是一个渲染问题,而不是"计算"问题.从firebug控制台,我链接的地图,两者
regionPolys[0].getPath().getArray();
和
for (i in regionCorners) {console.log(regionCorners[i].getPosition())};
将返回
P { Na=0.20123958504464223, Oa=-22.5249097921875}
P { Na=-0.21702715474330336, Oa=-32.7277467}
P { Na=0.19466306397879407, Oa=-37.51230686484375}
P { Na=0.12889785332031245, Oa=-49.04594858671875}
如果我是对的,这意味着它们具有相同的坐标,与代码相同.
[Edit2]新进展!
在处理自定义投影时,向量似乎存在渲染问题,例如用于显示此等距Minecraft地图的投影.(用Tectonicus生成)
在最后的评论之后,我将添加到两个新的调试阵列上面链接的实时代码,
debugRegionLatLngs以及debugRegionPoints.上面的代码已更新,因此您可以查看它们包含的内容.
[Edit3]投影和坐标
穿越BicycleDude与我的研究,现在几乎可以肯定,这是一个破坏多边形的自定义投影.实际上,Google Maps的API中可能存在相关错误.
使用此投影是因为Minecraft地图几乎可以无限,但必须使用gmap,它在经度360°后环绕.另外相关的是,游戏坐标以等距方式呈现,而gmaps期望更像墨卡托投影.
我尝试稍微调整一下投影,但到目前为止没有任何有趣的结果.
嗯，我进一步观察了这个，我确实看到了那个银色的多边形。如果您记下纬度，它们非常接近 0 度，这意味着赤道附近实际上有一条平坦的线。我亲自验证了这一点，将您的坐标粘贴到全新的 Google 地图样本中，它们似乎没有与您的标记在空间上定位，因此，您需要检查坐标信息被操纵的位置，抱歉，我知道我没有找到你的问题。
我修改了 Google 地图的百慕大三角示例以使用您的编码风格。即我采用了您的变量并遵循了您的代码的精神。此示例显示 3 个标记，并为百慕大三角形绘制一个多边形。
<!DOCTYPE html>
<html>
<head>
<title>Bermuda Hack Triangle</title>
<meta name="viewport"
content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta charset="UTF-8">
<style type="text/css">
#map_canvas {
width: 500px;
height: 500px;
}
</style>
<script type="text/javascript" scr="https://github.com/douglascrockford/JSON-js/blob/master/json2.js"></script>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var map;
function initialize() {
var myoptions = {
zoom: 4,
center: new google.maps.LatLng(25, -70),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(
document.getElementById('map_canvas'),
myoptions
);
// Create pseudo coordinates
var regionMapMarkers = new google.maps.MVCArray();
var p1 = new google.maps.LatLng(25, -80);
var p2 = new google.maps.LatLng(18, -66);
var p3 = new google.maps.LatLng(32, -64);
//p2.Qa += 360;
//p3.Qa -= 360;
regionMapMarkers.push(p1);
regionMapMarkers.push(p2);
regionMapMarkers.push(p3);
console.log(JSON.stringify(regionMapMarkers));
// Draw Markers
regionMapMarkers.forEach(function(latLng, m){
var marker = new google.maps.Marker(
{
position: latLng,
map: map,
title: '',
optimized: false
});
});
// Draw Polygon
var region = new google.maps.Polygon({
map: map,
paths: regionMapMarkers,
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#FF0000",
fillOpacity: 0.35
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map_canvas"></div>
</body>
</html>
该示例有效。如果你要运行它，你会看到百慕大三角被标记包围。那么问题在于，在实践中什么会影响你的算法？到目前为止，我们推测 Minecraft 投影确实发挥了作用。我仍然相信情况确实如此。
为了验证这个理论，我试图破坏百慕大三角样本。我尝试通过取消注释以下行来对两个点添加和减去 360 度经度：
p2.Qa += 360;
p3.Qa -= 360;
这样做的作用是，它仍然允许将标记放置在同一位置，但多边形填充绝对是spacko。我相信这就是您的场景中正在发生的情况。
然后我建议您检查应用程序中的坐标系。如果您可以选择新坐标，则可以避免发生此类边缘情况。
| 归档时间： |
|
| 查看次数： |
1693 次 |
| 最近记录： |