谷歌地图Waypoint没有显示完整路径 [英] Google Maps Waypoints not showing whole path

查看：80
本文介绍了谷歌地图Waypoint没有显示完整路径的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我使用Google Maps V3路线服务从源代码到目的地绘制了一条简单路线。



我需要添加路线（中点或路点）必须通过。谷歌地图为此提供了切入点。



我已经提到了他们的文档以及添加航点的示例。但是，当我尝试通过添加航点来绘制路线时，路线仅会显示在数组中添加到目的地的最后一个地点中。我希望显示从 src 到目的地的路线，并在路线中包含航点。



我附上我的代码。我在哪里出错了？

  var map; 
 var wyPts = []; 
 
 
 
 function addWayPoints（location）
 {
 wyPts.push（{
 location：location，
 stopover：true 
}）; 
} 
 
 function createInfoWindowContent（latLng，contentStr）{
 var content ='< p>< b>'+ contentStr +'< / b> < / p>'+'LatLng：'+ latLng; 
返回内容; 
 
 
 
函数displayRoute（origin，destination，service，display）{
 service.route（{
 origin：origin，
目的地：目的地，
 //航点：[{location：new google.maps.LatLng（30.439025，-97.685654）}，{location：new google.maps.LatLng（30.434882，-97.677015）}，{location： new google.maps.LatLng（30.429495，-97.675274）}]，
航点：wyPts，
 optimizeWaypoints：true，
 travelMode：google.maps.DirectionsTravelMode.DRIVING 
}，函数（响应，状态）{
 if（status === google.maps.DirectionsStatus.OK）{
 display.setDirections（response）; 
} else {
 alert（ '无法显示路线，因为：+状态）; 
 
} 
}）; 
 
 
 
函数initMap（）{
 
 
 //////////源目标和中间路点
 
 var src = new google.maps.LatLng（30.444719，-97.686202）; // //学校
 // addWayPoints（src）; 
 var midPt1 = new google.maps.LatLng（30.439025，-97.685654）; // 
 addWayPoints（midPt1）; 
 var midPt2 = new google.maps.LatLng（30.434882，-97.677015）; // 
 addWayPoints（midPt2）; 
 var midPt3 = new google.maps.LatLng（30.429495，-97.675274）; // 
 addWayPoints（midPt3）; 
 
 $ b / * for（var i = 0; i  alert（pts are：+ wyPts [i] .location） ; 
} * / 
 
 var destination = new google.maps.LatLng（30.401820，-97.669545）; // 
 
 
 ///////////绘制地图
 map = new google.maps.Map（document.getElementById（'map'）， {
 center：src，
 mapTypeControlOptions：{
 style：google.maps.MapTypeControlStyle.HORIZONTAL_BAR，
 position：google.maps.ControlPosition.TOP_RIGHT，
 mapTypeIds： [google.maps.MapTypeId.ROADMAP，
 google.maps.MapTypeId.TERRAIN，
 google.maps.MapTypeId.HYBRID] 
}，
 zoomControl：true，
 zoomControlOptions：{
 position：google.maps.ControlPosition.RIGHT_CENTER 
}，
 zoom：14 
}）; 
 
 //在src和目标处绘制infowindow 
 var coordInfoWindowSrc = new google.maps.InfoWindow（{$ b $ content：createInfoWindowContent（src，Source），
 maxWidth：180 
}）; 
 coordInfoWindowSrc.setPosition（src）; 
 coordInfoWindowSrc.open（map）; 
 
 var coordInfoWindowDest = new google.maps.InfoWindow（{
 content：createInfoWindowContent（destination，Destination），
 maxWidth：180 
}）; 
 coordInfoWindowDest.setPosition（destination）; 
 coordInfoWindowDest.open（map）; 
 
 
 //显示路线
 var polylineProps =新google.maps.Polyline（{
 strokeColor：'＃009933'，
 strokeOpacity：1.0， 
 strokeWeight：3 
 
}）; 
 
 
 var directionsDisplay = new google.maps.DirectionsRenderer（{
 draggable：false，//不让路由可拖曳
 map：map，
 suppressMarkers：true，
 polylineOptions：polylineProps 
}）; 
 
 var directionsService = new google.maps.DirectionsService（）; 
 
 displayRoute（src，destination，directionsService，directionsDisplay）; 
 
 //添加侦听器到地图
 directionsDisplay.addListener（
'change'，
 function（）{
 displayRoute（src，destination，directionsService， 
 directionsDisplay）; 
}）; 
 
 
}

预先致谢。

解决方案

polylineOptions匿名对象不是（也不应该是）google.maps.Polyline。 

  var polylineProps =新google.maps.Polyline（{
 strokeColor：'＃009933'，
 strokeOpacity：1.0，
 strokeWeight：3 
 
}）;

应该是： 

  var polylineProps = {
 strokeColor：'＃009933'，
 strokeOpacity：1.0，
 strokeWeight：3 
 
};

如果我解决了这个问题，该行就会出现在完整的路径中：



工作小提琴



代码段：
$ b

var map; var wyPts = []; function addWayPoints（location） {wyPts.push（{location：location，stopover：true}）;} function createInfoWindowContent（latLng，contentStr）{var content ='< p>< b>'+ contentStr +'< / b> < / p>'+'LatLng：'+ latLng;返回内容;} function displayRoute（origin，destination，service，display）{service.route（{origin：origin，destination：destination，// waypoints：[{location：new google.maps.LatLng（30.439025，-97.685654）} ，{location：new google.maps.LatLng（30.434882，-97.677015）}，{location：new google.maps.LatLng（30.429495，-97.675274）}]，waypoints：wyPts，optimizeWaypoints：true，travelMode：google.maps。 DirectionsTravelMode.DRIVING}，function（response，status）{if（status === google.maps.DirectionsStatus.OK）{display.setDirections（response）;} else {alert（'Could not display directions due：'+ status ）;}}）;}函数initMap（）{////////// source destination and middle waypoints var src = new google.maps.LatLng（30.444719，-97.686202）; // //学校// addWayPoints（src）; var midPt1 = new google.maps.LatLng（30.439025，-97.685654）; // addWayPoints（midPt1）; var midPt2 = new google.maps.LatLng（30.434882，-97.677015）; // addWayPoints（midPt2）; var midPt3 = new google.maps.LatLng（30.429495，-97.675274）; // addWayPoints（midPt3）; / * for（var i = 0; i

html，body，＃map {height：100％;宽度：100％; margin：0px; < script src =https：//


I am drawing a simple route from a source to destination using Google Maps V3 Directions Service.

I need to add some locations(midpoints or waypoints) that the route has to pass through. Google maps provides waypoints for this.

I have referred to their documentation and example to add waypoints. But when I try to draw the route by adding waypoints the route is displayed only from the last location added in the waypoints array to the destination. I want the route displayed from src to destination with waypoints included along the route.

I have attached my code. Where am I going wrong?

        var map;
        var wyPts = [];



    function addWayPoints(location)
    {           
        wyPts.push({
            location:location,
            stopover:true
            });
    }

    function createInfoWindowContent(latLng, contentStr) {
        var content = '<p><b>' + contentStr + ' </b> </p>' + 'LatLng: ' + latLng    ;
        return content;
    }


    function displayRoute(origin, destination, service, display) {
        service.route({
            origin : origin,
            destination : destination,
            //waypoints: [{location: new google.maps.LatLng(30.439025, -97.685654)}, {location: new google.maps.LatLng(30.434882, -97.677015)} , {location:new google.maps.LatLng(30.429495, -97.675274)}],
            waypoints:wyPts,
            optimizeWaypoints: true,
            travelMode : google.maps.DirectionsTravelMode.DRIVING       
        }, function(response, status) {
            if (status === google.maps.DirectionsStatus.OK) {
                display.setDirections(response);
            } else {
                alert('Could not display directions due to: ' + status);

            }
        });
    }


    function initMap() {


        //////////source  destination and middle waypoints

        var src = new google.maps.LatLng(30.444719, -97.686202); // //school
            //addWayPoints(src);
        var midPt1 = new google.maps.LatLng(30.439025, -97.685654); // 
            addWayPoints(midPt1);
        var midPt2 = new google.maps.LatLng(30.434882, -97.677015); // 
            addWayPoints(midPt2);
        var midPt3 = new google.maps.LatLng(30.429495, -97.675274); // 
            addWayPoints(midPt3);


            /* for (var i = 0; i < wyPts.length; i++) {
                alert("pts are : " + wyPts[i].location);
            } */

        var destination = new google.maps.LatLng(30.401820, -97.669545); //


        ///////////draw the map
        map = new google.maps.Map(document.getElementById('map'), {
            center : src,
            mapTypeControlOptions : {
                style : google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
                position : google.maps.ControlPosition.TOP_RIGHT,
                mapTypeIds : [ google.maps.MapTypeId.ROADMAP,
                        google.maps.MapTypeId.TERRAIN,
                        google.maps.MapTypeId.HYBRID ]
            },
            zoomControl : true,
            zoomControlOptions : {
                position : google.maps.ControlPosition.RIGHT_CENTER
            },
            zoom : 14
        });

        //draw infowindow at src and destination
         var coordInfoWindowSrc = new google.maps.InfoWindow({
            content: createInfoWindowContent(src , "Source"),
            maxWidth : 180
        });
        coordInfoWindowSrc.setPosition(src);
        coordInfoWindowSrc.open(map);

         var coordInfoWindowDest = new google.maps.InfoWindow({
            content: createInfoWindowContent(destination , "Destination"),
            maxWidth : 180
        });
        coordInfoWindowDest.setPosition(destination);
        coordInfoWindowDest.open(map);


        //display route
        var polylineProps = new google.maps.Polyline({
            strokeColor : '#009933',
            strokeOpacity : 1.0,
            strokeWeight : 3

        });


        var directionsDisplay = new google.maps.DirectionsRenderer({
            draggable : false, //do not make the route draggable
            map : map,
            suppressMarkers: true ,
            polylineOptions : polylineProps
        });

        var directionsService = new google.maps.DirectionsService();

        displayRoute(src, destination, directionsService,directionsDisplay);

        //add listener to map
        directionsDisplay.addListener(
                'change',
                function() {
                    displayRoute(src, destination, directionsService,
                            directionsDisplay);
                });


    }

Thanks in advance.

解决方案

A polylineOptions anonymous object is not (and shouldn't be) a google.maps.Polyline. 

var polylineProps = new google.maps.Polyline({
        strokeColor : '#009933',
        strokeOpacity : 1.0,
        strokeWeight : 3

    });

Should be:

var polylineProps = {
        strokeColor : '#009933',
        strokeOpacity : 1.0,
        strokeWeight : 3

    };

If I fix that that, the line appears for the complete route:

working fiddle

code snippet:

var map;
var wyPts = [];



function addWayPoints(location) {
  wyPts.push({
    location: location,
    stopover: true
  });
}

function createInfoWindowContent(latLng, contentStr) {
  var content = '<p><b>' + contentStr + ' </b> </p>' + 'LatLng: ' + latLng;
  return content;
}


function displayRoute(origin, destination, service, display) {
  service.route({
    origin: origin,
    destination: destination,
    //waypoints: [{location: new google.maps.LatLng(30.439025, -97.685654)}, {location: new google.maps.LatLng(30.434882, -97.677015)} , {location:new google.maps.LatLng(30.429495, -97.675274)}],
    waypoints: wyPts,
    optimizeWaypoints: true,
    travelMode: google.maps.DirectionsTravelMode.DRIVING
  }, function(response, status) {
    if (status === google.maps.DirectionsStatus.OK) {
      display.setDirections(response);
    } else {
      alert('Could not display directions due to: ' + status);

    }
  });
}


function initMap() {


  //////////source  destination and middle waypoints

  var src = new google.maps.LatLng(30.444719, -97.686202); // //school
  //addWayPoints(src);
  var midPt1 = new google.maps.LatLng(30.439025, -97.685654); // 
  addWayPoints(midPt1);
  var midPt2 = new google.maps.LatLng(30.434882, -97.677015); // 
  addWayPoints(midPt2);
  var midPt3 = new google.maps.LatLng(30.429495, -97.675274); // 
  addWayPoints(midPt3);


  /* for (var i = 0; i < wyPts.length; i++) {
              alert("pts are : " + wyPts[i].location);
          } */

  var destination = new google.maps.LatLng(30.401820, -97.669545); //


  ///////////draw the map
  map = new google.maps.Map(document.getElementById('map'), {
    center: src,
    mapTypeControlOptions: {
      style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
      position: google.maps.ControlPosition.TOP_RIGHT,
      mapTypeIds: [google.maps.MapTypeId.ROADMAP,
        google.maps.MapTypeId.TERRAIN,
        google.maps.MapTypeId.HYBRID
      ]
    },
    zoomControl: true,
    zoomControlOptions: {
      position: google.maps.ControlPosition.RIGHT_CENTER
    },
    zoom: 14
  });

  //draw infowindow at src and destination
  var coordInfoWindowSrc = new google.maps.InfoWindow({
    content: createInfoWindowContent(src, "Source"),
    maxWidth: 180
  });
  coordInfoWindowSrc.setPosition(src);
  coordInfoWindowSrc.open(map);

  var coordInfoWindowDest = new google.maps.InfoWindow({
    content: createInfoWindowContent(destination, "Destination"),
    maxWidth: 180
  });
  coordInfoWindowDest.setPosition(destination);
  coordInfoWindowDest.open(map);


  //display route
  var polylineProps = {
    strokeColor: '#009933',
    strokeOpacity: 1.0,
    strokeWeight: 3

  };


  var directionsDisplay = new google.maps.DirectionsRenderer({
    draggable: false, //do not make the route draggable
    map: map,
    suppressMarkers: true,
    polylineOptions: polylineProps
  });

  var directionsService = new google.maps.DirectionsService();

  displayRoute(src, destination, directionsService, directionsDisplay);

  //add listener to map
  directionsDisplay.addListener(
    'change',

    function() {
      displayRoute(src, destination, directionsService,
        directionsDisplay);
    });


}
google.maps.event.addDomListener(window, 'load', initMap);

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>

这篇关于谷歌地图Waypoint没有显示完整路径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆