找到你要的答案

Q:Google Maps Waypoints not showing whole path

Q:谷歌地图导航点不显示完整路径

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.

我是从一个源到使用谷歌地图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    ;
        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);
                });


    }

先谢谢了。

answer1: 回答1:

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>

一个polylineoptions匿名对象不能(不应该)一google.maps.polyline。

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

    });

应该是:

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

    };

如果我修复了这个问题,就出现了完整的路线:

工作的小提琴

代码段:

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>
javascript  google-maps  google-maps-api-3