问题使用Google地图折线

时间：2015-07-15 16:10:50

标签： javascript google-maps google-maps-api-3

我有一张谷歌地图，我需要在地图上的不同位置之间绘制链接。我使用谷歌地图折线绘制不同点之间的链接。以下是代码：

// code to draw map
var map;
var mapProp = {
        // center : new google.maps.LatLng(51.4848, -0.20325),
        zoom : 8,
        mapTypeId : google.maps.MapTypeId.ROADMAP
    };

map = new google.maps.Map(document.getElementById("map"), mapProp);

 // data to show the links between locations, first part of lat & long denotes from location and second part is to location for a link.
 var links_data = [
 {"path":[{"lat":53.408123,"lng":-2.985655},{"lat":53.416366,"lng":-2.985655}]},
 {"path":[{"lat":53.416366,"lng":-2.985655},{"lat":53.408123,"lng":-3.038971}]},
 {"path":[{"lat":53.409477,"lng":-2.982685},{"lat":53.390648,"lng":-3.014405}]},
 {"path":[{"lat":53.390648,"lng":-3.014405},{"lat":53.409477,"lng":-2.982685}]},
 {"path":[{"lat":53.407086,"lng":-2.989244},{"lat":53.390648,"lng":-3.014405}]},
 {"path":[{"lat":53.390648,"lng":-3.014405},{"lat":53.407086,"lng":-2.989244}]},
 {"path":[{"lat":53.409477,"lng":-2.982685},{"lat":53.407086,"lng":-2.989244}]},
 {"path":[{"lat":53.409477,"lng":-2.982685},{"lat":53.409477,"lng":-2.982685}]}, 
 {"path":[{"lat":53.389557,"lng":-2.989244},{"lat":53.388615,"lng":-3.015866}]},
 {"path":[{"lat":53.388615,"lng":-3.015866},{"lat":53.409477,"lng":-2.982685}]},
 {"path":[{"lat":53.388615,"lng":-3.015866},{"lat":53.407086,"lng":-2.989244}]},
 {"path":[{"lat":53.409477,"lng":-2.982685},{"lat":53.389557,"lng":-3.014986}]},
 {"path":[{"lat":53.388615,"lng":-3.015866},{"lat":53.390648,"lng":-3.014405}]},
 {"path":[{"lat":53.389557,"lng":-3.014405},{"lat":53.389557,"lng":-3.022483}]},
 {"path":[{"lat":53.408123,"lng":-3.038971},{"lat":53.410152,"lng":-3.022483}]},
 {"path":[{"lat":53.416366,"lng":-2.985655},{"lat":53.410152,"lng":-3.022483}]},
 {"path":[{"lat":53.410152,"lng":-3.022483},{"lat":53.408123,"lng":-3.038971}]},
 {"path":[{"lat":53.410152,"lng":-3.022483},{"lat":53.416366,"lng":-2.985655}]}
 ];

    // draw links
    for(var i = 0 ; i < links_data.length; i++)
    {
      var latLng = links_data[i].path; 
      // polylines lat long array
      var polypoints = [];
      for ( var j = 0; j < latLng .length; j++) {
        polypoints[j] = new google.maps.LatLng(
                parseFloat(latLng [j].lat),
                parseFloat(latLng [j].lng));
    }

    var link = new google.maps.Polyline({
       path : polypoints,
       geodesic : true,
       strokeColor : col,
       strokeOpacity : 0.5,
       strokeWeight : 3,
       title : "test"
    });
    link.setMap(map);
}

我遇到一个问题，地图有时会显示不相关的线条（其中很少标有黑色椭圆），如下图所示：

enter image description here

关于这个问题的任何想法？我正在使用以下网址中的goggle api https://maps.googleapis.com/maps/api/js?v=3.exp;

1 个答案:

答案 0 :(得分：0)

您没有以正确的方式填充路径坐标，完整的红色线条是重复的线条越来越多的时间和50％的不透明度线条只是画线一次，这意味着相同的坐标被重复。您可能以错误的方式或错误的顺序加载路径中的坐标。或者您正在尝试绘制更多线条但是由于错误，您会错误地绘制一条或几条线条。您提供的代码不足以进行正确的评估。可能还需要评估标记的坐标。

我玩过您的代码，这是一个功能齐全且自洽的代码页 我发现编码eand的一些小错误我喜欢在脚本顶部移动一些声明。基本上问题是点的坐标，在许多情况下，坐标以相反的顺序引用相同的线或者从相同的点开始并且彼此非常接近。顺便说一句，你需要清除双线（我签了一些）并定义你想要在地图中显示的更好的whiat。 我希望这对你有用

  <!DOCTYPE html>
  <html>
    <head>
      <title>test sandbox 8</title>

      <style type="text/css">
        #main {
          margin: 60px 15px; 
        }
        #map { 
          min-height: 600px; 
          min-width: 800px; 
        }
      </style>

          <script src="http://maps.google.com/maps/api/js?v=3&sensor=false" type="text/javascript"></script>
      <script>
        // code to draw map
        var map;
        var col = '#FF0000';
        var link ;
        var latLng;
        var polypoints;

        function initialize() {
        var mapProp = {
                center : new google.maps.LatLng(53.40, -2.99),
                zoom : 12,
                mapTypeId : google.maps.MapTypeId.ROADMAP
            };


        map = new google.maps.Map(document.getElementById("map"), mapProp);

         // data to show the links between locations, first part of lat & long denotes from location and second part is to location for a link.
         var links_data = [
         {"path":[{"lat":53.408123,"lng":-2.985655},{"lat":53.416366,"lng":-2.985655}]},
         {"path":[{"lat":53.416366,"lng":-2.985655},{"lat":53.408123,"lng":-3.038971}]},
         {"path":[{"lat":53.409477,"lng":-2.982685},{"lat":53.390648,"lng":-3.014405}]},
         {"path":[{"lat":53.390648,"lng":-3.014405},{"lat":53.409477,"lng":-2.982685}]},
         {"path":[{"lat":53.407086,"lng":-2.989244},{"lat":53.390648,"lng":-3.014405}]},
         {"path":[{"lat":53.390648,"lng":-3.014405},{"lat":53.407086,"lng":-2.989244}]},
         {"path":[{"lat":53.409477,"lng":-2.982685},{"lat":53.407086,"lng":-2.989244}]},
         {"path":[{"lat":53.409477,"lng":-2.982685},{"lat":53.409477,"lng":-2.982685}]}, 
         {"path":[{"lat":53.389557,"lng":-2.989244},{"lat":53.388615,"lng":-3.015866}]},   // line 9   same origin of line  13
         {"path":[{"lat":53.388615,"lng":-3.015866},{"lat":53.409477,"lng":-2.982685}]},   // line 10  same origin of line 13
         {"path":[{"lat":53.388615,"lng":-3.015866},{"lat":53.407086,"lng":-2.989244}]},   // line 11
         {"path":[{"lat":53.409477,"lng":-2.982685},{"lat":53.389557,"lng":-3.014986}]},   // line 12
         {"path":[{"lat":53.388615,"lng":-3.015866},{"lat":53.390648,"lng":-3.014405}]},   // line 13 
         {"path":[{"lat":53.389557,"lng":-3.014405},{"lat":53.389557,"lng":-3.022483}]},   // line 14 
         {"path":[{"lat":53.408123,"lng":-3.038971},{"lat":53.410152,"lng":-3.022483}]},   // line 15 repeat line 17 in reverse order 
         {"path":[{"lat":53.416366,"lng":-2.985655},{"lat":53.410152,"lng":-3.022483}]},   // line 16  repeat line 18 in reverse order
         {"path":[{"lat":53.410152,"lng":-3.022483},{"lat":53.408123,"lng":-3.038971}]},   // line 17
         {"path":[{"lat":53.410152,"lng":-3.022483},{"lat":53.416366,"lng":-2.985655}]}    // line 18
         ];

            // draw links
            for(var i = 0 ; i < links_data.length; i++)
            {
              latLng = links_data[i].path; 
              // polylines lat long array
              polypoints = [];
              for ( var j = 0; j < latLng.length; j++) {
                polypoints[j] = new google.maps.LatLng(
                        parseFloat(latLng[j].lat),
                        parseFloat(latLng[j].lng));

              }
             link = new google.maps.Polyline({
               path : polypoints,
               geodesic : true,
               strokeColor : col,
               strokeOpacity : 0.5,
               strokeWeight : 3,
               title : "test"
            });
            link.setMap(map);
           }
        }

         google.maps.event.addDomListener(window, 'load', initialize); 
      </script>
    </head>
    <body>
           <div id="map"></div>
     </body>
  </html>
相关问题
最新问题