Question

我正在制作Google地图原型，我想画一条线连接我地图上的每个标记。但是，目前我正在硬编码与用于标记的坐标分开的线的坐标，并且想知道如何使其成为动态的，这样我只需要添加标记，并且将自动从这些点生成线。

我想要动态生成的脚本部分是注释

这是我目前的代码：

<!DOCTYPE html>
<html>
  <head>
    <title>Travel Log</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
    <script>
      var map;
      var locations = [
        ['Mankato, MN', 44.1834814, -93.9774519, 1],
        ['Duluth, MN', 46.7649885, -92.1112232, 2],
        ['Rochester, MN', 43.9959876, -92.4811724, 3],
        ['Fargo, ND', 46.8541979, -96.8285138, 4],
        ['Minneapolis, MN', 44.970697, -93.2614785, 5]
      ];
      function initialize() {
        var mapOptions = {
          zoom: 5,
          center: new google.maps.LatLng(46.4418595,-93.3655146)
        };
        map = new google.maps.Map(document.getElementById('map-canvas'),
            mapOptions);

        var infowindow = new google.maps.InfoWindow();

        var marker, i;

        for (i = 0; i < locations.length; i++) {  
          marker = new google.maps.Marker({
            position: new google.maps.LatLng(locations[i][1], locations[i][2]),
            map: map
          });

          google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
              infowindow.setContent(locations[i][0]);
              infowindow.open(map, marker);
            }
          })(marker, i));
        }

        /////////////////////////////////////////
        //This is the part I want to be dynamic//
        /////////////////////////////////////////
        var lineCoordinates = [
          new google.maps.LatLng(44.1834814, -93.9774519),
          new google.maps.LatLng(46.7649885, -92.1112232),
          new google.maps.LatLng(43.9959876, -92.4811724),
          new google.maps.LatLng(46.8541979, -96.8285138),
          new google.maps.LatLng(44.970697, -93.2614785)
        ];

        var tripPath = new google.maps.Polyline({
          path: lineCoordinates,
          geodesic: true,
          strokeColor: '#000',
          strokeOpacity: 1.0,
          strokeWeight: 2
        });

        tripPath.setMap(map);
      }

      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    <div id="map-canvas"></div>
  </body>
</html>

JSFiddle

Answer 1

你可以很好地使用Array.prototype.map() method来做到这一点;

var lineCoordinates = locations.map(function (val) {
    return new google.maps.LatLng(val[1], val[2]);
});

http://jsfiddle.net/r3x4qcnk/1/

Google Maps API v3动态生成行？

1 个答案: