Welcome to ShenZhenJia Knowledge Sharing Community for programmer and developer-Open, Learning and Share
menu search
person
editAsk a Question
Welcome To Ask or Share your Answers For Others

Categories

javascript - Issue With Google map polyline

in Technique[技术] by (71.8m points)

I have a google map and I need to draw links between different locations on the map. I am using google maps polyline to draw links between different points. Following is the code:

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

I am facing a issue the maps sometimes shows irrelevant lines (few of them marked in black ellipse) as shown in the image below:

enter image description here

any idea whats the issue about?. I am using goggle api from the following url https://maps.googleapis.com/maps/api/js?v=3.exp;

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
thumb_up_alt 0 like thumb_down_alt 0 dislike
141 views
Welcome To Ask or Share your Answers For Others

1 Answer

by (71.8m points)

You don't populate the path coordinates in the right way, the full red color lines are lines repeted more and more time and the 50% opacity lines are lines draw one time only, this mean same coordinate are repeted. Probably you are loading the coordinates in path in wrong way or in wrong sequence. Or You are trying to draw more lines but for mistake you draw one or few lines wrong. The code you are provide is not enough for a correct evaluation. probably is necessary evalute the coordinates of marker too.

I have played with your code and this is a functioning and self-consistent code page I have found some minor mistake in coding eand some declaration i preferred move in top of the script. Essentially the problem are the coordinates of the points in many case the coordinates refer to the same line in reverse order or start for the same point and are very near each other. Probabily you need to clear the double lines (i have signed some) and define better whiat you want show in the map. I hope this is useful for you

  <!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>

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
thumb_up_alt 0 like thumb_down_alt 0 dislike
Welcome to ShenZhenJia Knowledge Sharing Community for programmer and developer-Open, Learning and Share

Just Browsing Browsing

548k questions

547k answers

4 comments

86.3k users

Most popular tags

Theme made by Momin Raza, Modified by Ostack
Powered by Question2Answer
...