Fatal编程技术网
  • javascript/
  • Javascript 如何使用板条在谷歌地图上放置标记，而不是绘制多边形？

Javascript 如何使用板条在谷歌地图上放置标记，而不是绘制多边形？

javascript google-maps google-maps-api-3

Javascript 如何使用板条在谷歌地图上放置标记，而不是绘制多边形？,javascript,google-maps,google-maps-api-3,polygon,projection,Javascript,Google Maps,Google Maps Api 3,Polygon,Projection,大约一周前，我遇到了一个问题：在一张定制的谷歌地图上，我的多边形不会出现，而相同坐标的标记完全可以。尽管我努力使用谷歌地图API，但似乎我找不到原因 紫色箭头和数字是我添加的，它们显示： 我可以把google.maps.Marker放在我的“区域”的边缘 由google.maps.Polygoncode生成的工件。它像预期的那样是红色的，但完全不合适，而且非常平坦 以下是生成标记和多边形的代码部分： var regionData = tecMap.regions[r]; var regionMa

大约一周前，我遇到了一个问题：在一张定制的谷歌地图上，我的多边形不会出现，而相同坐标的标记完全可以。尽管我努力使用谷歌地图API，但似乎我找不到原因

紫色箭头和数字是我添加的，它们显示：

  • 我可以把
    google.maps.Marker
    放在我的“区域”的边缘
  • 由
    google.maps.Polygon
    code生成的工件。它像预期的那样是红色的，但完全不合适，而且非常平坦
    • 以下是生成标记和多边形的代码部分：

    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);

    如果你对数组数组感到疑惑，它与.< /P>完全一致。 如果您想查看地图和相关脚本，可以。 代码片段位于

    Scripts/tecturicus.js
    中，从第659行开始

    [编辑]一些调试信息：

    这似乎是一个渲染问题，而不是“计算”问题。 从firebug控制台，在我链接的地图中

    regionPolys[0].getPath().getArray();
    及

    会回来的

    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]新进展

    在处理自定义投影时，向量似乎存在渲染问题，例如用于显示此等轴测布雷克拉夫特地图的投影。（由《大地构造记》生成）

    在最后的评论之后，我将添加到链接到上面两个新调试数组的实时代码中， 
    debugregionLattings
    和
    debugRegionPoints
    。上面的代码已更新，因此您可以查看它们包含的内容

    [Edit3]投影和坐标

    通过BicycleEde的研究和我的研究，现在几乎可以肯定的是，破坏多边形的是自定义投影。事实上，有

    之所以使用这种投影，是因为地雷船地图实际上是无限的，而且还必须使用gmap，它在360°经度后环绕。另一个相关的事实是ingame坐标是以等距方式渲染的，而gmaps期望更像墨卡托投影

    我试着调整了一下投影，但到目前为止没有什么有趣的结果。

    嗯，我进一步研究了这个问题，我确实看到了银色多边形。如果你注意你的纬度，它们非常接近0度，这意味着赤道附近实际上是一条平坦的线。我通过将你的坐标粘贴到一个全新的Google Maps示例中验证了这一点，它们似乎与你的标记不在空间位置，因此，你需要查看坐标信息被操纵的位置，对不起，我知道我没有发现你的问题

    我修改了GoogleMap的百慕大三角示例以使用您的编码风格。i、 我采用了你的变量并遵循了你代码的精神。此示例显示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>
    这样做的目的是，它仍然允许将标记放置在相同的位置，但多边形填充完全是空的。我相信这就是你的情况

    然后我建议您检查应用程序中的坐标系。如果您可以选择新的坐标，则可以避免出现此类边缘条件。

    我注意到您正在以包含另一个MVCArray的MVCArray的方式传递路径。你有没有试过在文档中传递一个简单的一维数组

    您是否需要调用
    setMap（）
    ，或者传入
    map
    属性是否足以使其渲染

    下面是Google的Polygon（）代码示例。。。（）

    我相信您在多边形属性中使用的是
    path
    ，而实际上它应该是
    path
    ，否则，在某处查看实时代码会有所帮助。干杯，AndresI foudn在一些空间上传了地图和相关代码的副本。链接是个问题。如果您希望我进行任何测试，请询问。：）你能发布一个稍微小一点的样本来复制这个，或者至少让我们看看你样本中的谷歌地图代码吗？我在所有的JavaScript文件中迷失了方向…@bamnet对不起，我上次编辑时没有包括这个。您要查找的代码部分位于
    Scripts/teconticus.js
    ，从第659行开始。用这个来编辑主要的帖子。在看了更多的文章后，我认为你的自定义投影（无论你在“minecraft”投影中使用的是什么）是给你带来奇怪行为的原因。多边形的坐标看起来很奇怪。经度之间的差值是不同的度数，但纬度的差值是小数。我建议使用以下代码来查看坐标如何不真正遵循地图上的标准北/东南/西逻辑。--google.maps.event.addListener（映射，'click'，函数（e）{alert（e.latLng.lat（）+'，'+e.latLng.lng（））；}）；Hello Simon-很遗憾，是的，无论我使用
    路径
    （单个数组）还是
    路径
    属性（数组数组），也不管映射是在构造函数中设置还是通过
    setMap（）
    函数设置，都会出现问题。谢谢你这么看：）我认为如果没有指定最后一个坐标，谷歌的函数会自动关闭多边形。感谢分享您的想法和代码。我会继续做一些研究+1因为您在这方面花了一些时间。：）谢谢@SilverFXQuettier。我添加了额外的研究供您查看。我不明白的是，为什么这些“thisLatLng”坐标可以用于在指定位置放置标记，尽管有奇怪的“x”属性：/谢谢@SilverFxQuettier。我完全重新审视了我的分析，并戏剧性地更新了我的答案。在这个版本中，我完全同意你的算法。我把注意力转移到了地雷船的投影和潜在的坐标系问题上。至少，我们在井中前进 
    <!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>

            p2.Qa += 360;
        p3.Qa -= 360;

    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);
}