如何使用一些 LatLng 在谷歌地图上放置标记,而不是绘制多边形
How can some LatLng be used to place markers on a Google map, but not to draw a Polygon?
大约一周前,我遇到了一个问题:在自定义的谷歌地图上,我的多边形不会显示,而相同坐标的标记完全没问题。尽管我在谷歌地图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行开始。
[编辑] 一些调试信息:
这似乎是一个渲染问题,而不是"计算"问题。从火虫控制台,在我链接的地图中,两者都
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}
如果我是对的,这意味着它们具有相同的坐标,这与代码相当。
[编辑2] 新进展!
在处理自定义投影时,矢量似乎存在渲染问题,例如用于显示此等距 Minecraft 地图的投影。(由Tectonicus生成(
在最后一条评论之后,我将添加到两个新的调试数组上方链接的实时代码中, debugRegionLatLngs
和debugRegionPoints
.上面的代码已更新,因此您可以看到它们包含的内容。
[编辑3] 投影和坐标
将BicycleDude的研究与我的研究交叉,现在几乎可以肯定是自定义投影破坏了多边形。事实上,谷歌地图的API中有一个可能相关的错误。
之所以使用此投影,是因为 Minecraft 地图几乎可以是无限的,但必须使用 gmap,它在 360° 经度后环绕。同样相关的是,游戏中的坐标是以等距方式呈现的,而 gmaps 期望的东西更像墨卡托投影。
我尝试稍微调整投影,但到目前为止还没有有趣的结果。
嗯,我进一步看了看,我确实看到了那个银条多边形。如果你注意你的纬度,它们非常接近0度,这意味着赤道附近实际上是一条平线。我自己通过将坐标粘贴到全新的 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。我相信这就是您的场景中正在发生的事情。
然后,我建议您在应用程序中查看坐标系。如果可以选择新坐标,则可以避免发生此类边条件。
我注意到你paths
传递为包含另一个MVCArray的MVCArray。 您是否尝试过像Google在文档中的示例那样传递一个简单的一维数组?
您是否需要调用setMap()
或者传入 map
属性是否足以使其呈现?
下面是谷歌的Polygon((代码示例...(从这里开始(
function initialize() {
var myLatLng = new google.maps.LatLng(24.886436490787712, -70.2685546875);
var myOptions = {
zoom: 5,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var bermudaTriangle;
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
var triangleCoords = [
new google.maps.LatLng(25.774252, -80.190262),
new google.maps.LatLng(18.466465, -66.118292),
new google.maps.LatLng(32.321384, -64.75737),
new google.maps.LatLng(25.774252, -80.190262)
];
// Construct the polygon
// Note that we don't specify an array or arrays, but instead just
// a simple array of LatLngs in the paths property
bermudaTriangle = new google.maps.Polygon({
paths: triangleCoords,
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#FF0000",
fillOpacity: 0.35
});
bermudaTriangle.setMap(map);
}
- 如何在OpenLayers中获取动态绘制的多边形的坐标
- 如何使所有绘制的(矩形、圆形、直线、多边形)都可拖动?纯JS
- 我们可以为Cesium中使用CZML绘制的多边形设置outlineWidth属性吗
- 如何在使用鼠标单击动态绘制多边形时在画布中拖放多边形
- 如何在谷歌地图API中使用坐标数组绘制多边形
- OpenLayers徒手绘制多边形,起点没有弹性线
- 在画布上绘制多边形时的间隙
- 谷歌地图绘制多边形并警告重叠
- OL3 在手机或平板电脑上绘制手绘多边形或线串
- 多边形 围绕中心点绘制
- 谷歌地图多边形 - 添加新点后重新绘制
- 通过多边形绘制交互进行开放层 3 选择
- 谷歌地图V3绘制多边形并打开信息窗口
- 谷歌地图绘制 - 通过拖动绘制线条或多边形
- 如果多边形已存在,则禁用绘制
- 在谷歌地图 v2 上绘制多边形
- 谷歌地图绘制多边形并缩放到其边界
- 在基于谷歌地图的标记时间中绘制多边形
- 在画布 jquery HTML 中绘制多边形
- 如何在另一个多边形之上绘制多边形