Google maps api 3 当添加多条路线时，谷歌地图的代码会变得混乱吗？

我有以下标记：

            var markers = [

                {
                    "title": '1. Welgemeend',
                    "lat": '-33.805556',
                    "stopover": true,
                    "lng": '18.869722',
                    "description": '1. Welgemeend'
                },
                {
                    "title": '2. Ruitersvlei',
                    "lat": '-33.783294',
                    "lng": '18.935900',
                    "stopover": true,
                    "description": '2. Ruitersvlei'
                }
            ];

但是，当我添加第三个标记时：

            var markers = [

                {
                    "title": '1. Welgemeend',
                    "lat": '-33.805556',
                    "stopover": true,
                    "lng": '18.869722',
                    "description": '1. Welgemeend'
                },
                {
                    "title": '2. Ruitersvlei',
                    "lat": '-33.783294',
                    "lng": '18.935900',
                    "stopover": true,
                    "description": '2. Ruitersvlei'
                }
                ,                           
                {
                    "title": '3. Spice Route',
                    "lat": '-33.760815',
                    "lng": '18.916757',
                    "stopover": true,
                    "description": '3. Spice Route'
                },

            ];

线条画得很疯狂。这是我的gmaps代码：

<div id="property-map"></div>
<script type="text/javascript">

            jQuery(function($) {

                var mapOptions = {
                    center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
                    zoom: 10,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                var map = new google.maps.Map(document.getElementById("property-map"), mapOptions);
                var infoWindow = new google.maps.InfoWindow();
                var lat_lng = new Array();
                var latlngbounds = new google.maps.LatLngBounds();
                for (i = 0; i < markers.length; i++) {
                    var data = markers[i]
                    var myLatlng = new google.maps.LatLng(data.lat, data.lng);
                    lat_lng.push(myLatlng);
                    var marker = new google.maps.Marker({
                        position: myLatlng,
                        map: map,
                        title: data.title
                    });
                    latlngbounds.extend(marker.position);
                    (function (marker, data) {
                        google.maps.event.addListener(marker, "click", function (e) {
                            infoWindow.setContent(data.description);
                            infoWindow.open(map, marker);
                        });
                    })(marker, data);
                }
                map.setCenter(latlngbounds.getCenter());
                map.fitBounds(latlngbounds);

                //***********ROUTING****************//

                //Intialize the Path Array
                var path = new google.maps.MVCArray();

                //Intialize the Direction Service
                var service = new google.maps.DirectionsService();

                //Set the Path Stroke Color
                var poly = new google.maps.Polyline({ map: map, strokeColor: '#4986E7' });

                //Loop and Draw Path Route between the Points on MAP
                for (var i = 0; i < lat_lng.length - 1; i++) {

                        var src = lat_lng[i];
                        var des = lat_lng[i + 1];
                        path.push(src);
                        poly.setPath(path);
                        service.route({
                            origin: src,
                            destination: des,
                            travelMode: google.maps.DirectionsTravelMode.DRIVING
                        }, function (result, status) {
                            if (status == google.maps.DirectionsStatus.OK) {
                                for (var i = 0, len = result.routes[0].overview_path.length; i < len; i++) {
                                    path.push(result.routes[0].overview_path[i]);
                                }
                            }
                        });

                }
            });
        </script>

jQuery（函数（$）{
变量映射选项={
中心：新建google.maps.LatLng（标记[0].lat，标记[0].lng），
缩放：10，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
var map=new google.maps.map（document.getElementById（“属性映射”），mapOptions）；
var infoWindow=new google.maps.infoWindow（）；
var lat_lng=新阵列（）；
var latlngbounds=new google.maps.latlngbounds（）；
对于（i=0；i

---

什么原因可能导致此问题？

第51行：拆下该行

path.push(src);

第一次将多段线推送到该阵列时；再向前推几行线路段。
这将提供两组不同的叠加线

---

您正在使用令人困惑的变量名；这会引起问题。“path”对于存储数据数组来说可能不是一个好名字（当然，对于您正在做的事情来说不是）

其他一些细节：for（var i…->应该将var放在for（）的第一个位置，而不是第二个位置

poly.setPath（path）；不应位于循环内

---

下面是我应该如何做到这一点。 （我添加了第四个随机点。如果需要，请删除它）

html，正文，#属性映射{
高度：400px；
边际：0px；
填充：0px
}
#内容{
宽度：200px；
溢出：隐藏；
}
变量标记=[{
“标题”：“1.欢迎”，
“lat”：“-33.805556”，
“液化天然气”：“18.869722”，
“中途停留”：没错，
“说明”：“1.欢迎”
},
{
“标题”：“2.Ruitersvlei”，
“纬度”：“-33.783294”，
“液化天然气”：“18.935900”，
“中途停留”：没错，
“说明”：“2.Ruitersvlei”
}
, 
{
“标题”：“3.香料路线”，
“lat”：“-33.760815”，
“液化天然气”：“18.916757”，
“中途停留”：没错，
“说明”：“3.香料路线”
}, 
{
“标题”：“4.一些随机点”，
“lat”：“-33.75”，
“液化天然气”：“18.90”，
“中途停留”：没错，
“说明”：“4.一些随机点”
}];
jQuery（函数（$）{
变量映射选项={
中心：新建google.maps.LatLng（标记[0].lat，标记[0].lng），
缩放：10，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
var map=new google.maps.map（document.getElementById（“属性映射”），mapOptions）；
var infoWindow=new google.maps.infoWindow（）；
var routeObjects=[]；
var markeroobjects=[]；
var directionService=new google.maps.directionService（）；
var latlngbounds=new google.maps.latlngbounds（）；
//循环通过标记。
//创建标记，然后在该标记和下一个标记之间发送路由请求（上一次迭代除外）。
对于（var i=0；我能在a中复制该问题吗？我在下面更新了我的脚本。删除该行无效，但您的解决方案解决了我的问题。
<head>
  <style>
    html, body, #property-map {
      height: 400px;
      margin: 0px;
      padding: 0px
    }
    #content {
      width: 200px;
      overflow: hidden;
    }
  </style>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?"></script>    
  <script>
  var markers = [{
      "title": '1. Welgemeend',
      "lat": '-33.805556',
      "lng": '18.869722',
      "stopover": true,
      "description": '1. Welgemeend'
    },
    {
      "title": '2. Ruitersvlei',
      "lat": '-33.783294',
      "lng": '18.935900',
      "stopover": true,
      "description": '2. Ruitersvlei'
    }
    , 
    {
      "title": '3. Spice Route',
      "lat": '-33.760815',
      "lng": '18.916757',
      "stopover": true,
      "description": '3. Spice Route'
    }, 
    {
      "title": '4. Some random point',
      "lat": '-33.75',
      "lng": '18.90',
      "stopover": true,
      "description": '4. Some random point'
  }];

  jQuery(function($) {
    var mapOptions = {
      center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
      zoom: 10,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("property-map"), mapOptions);
    var infoWindow = new google.maps.InfoWindow();
    var routeObjects = [];
    var markerObjects = [];
    var directionService = new google.maps.DirectionsService();
    var latlngbounds = new google.maps.LatLngBounds();

    // loop through the markers.  
    // Create the marker, then send a request for a route between this marker and the next (except for the last iteration).  
    for (var i=0; i<markers.length; i++) {
      // create the marker
      var marker = new google.maps.Marker({
        position: new google.maps.LatLng(markers[i].lat, markers[i].lng),
        title: markers[i].title,
        map: map
      });
      markerObjects.push(marker);
      latlngbounds.extend(marker.position);

      // click event: show an infowindow with the description
      google.maps.event.addListener(marker, "click", function (e) {
        var i = markerObjects.indexOf(this);
        infoWindow.setContent('<div id="content">' + markers[i].description + '</div>');
        infoWindow.setPosition(this.getPosition());
        infoWindow.open(map, this);
      });

      // send a route request, except on the last iteration
      if (i < markers.length - 1) {
        directionService.route({
          origin: new google.maps.LatLng(markers[i].lat, markers[i].lng),
          destination: new google.maps.LatLng(markers[i + 1].lat, markers[i + 1].lng),
          travelMode: google.maps.DirectionsTravelMode.DRIVING
        }, function (result, status) {
          if (status == google.maps.DirectionsStatus.OK) {
            // We will draw this part of the route on the map; not worry about the other requests
            var path = new google.maps.MVCArray();
            for (var j = 0; j < result.routes[0].overview_path.length; j++) {
              path.push(result.routes[0].overview_path[j]);
            }
            var poly = new google.maps.Polyline({ 
              path: path,
              map: map, 
              strokeColor: '#4986E7'
            }); 
            routeObjects.push(path);  // I don't really us this in this script, but it might be useful
          }
        });
      }
      else {  // last iteration.  This might be a good place to do the last-minute things
        map.fitBounds(latlngbounds);
      }
    }
  });
  </script>
</head>
<body>
  <div id="property-map"></div>
</body>