Question

我维护本地路径协会的网站，并包含带注释的谷歌地图和设施。我添加了标记来显示起点，并调用Google的指示。问题是Google决定将人员送到我指定的位置以外的其他地方。我的例子显示了两个开端（小绿色图标）。如果您单击其中一个并请求路线，则路线结果会将您带到距指定位置约1/3英里的位置。我认为这个问题仅限于沿着路径的位置，因为我已经能够通过使输入位置稍微不准确来在一定程度上解决问题。但这并不总是奏效。有任何想法吗？我以为我可能在某个地方错过了一个属性，但我无法找到任何东西。 #map_canvas {width：900px;高度：80％;向左飘浮}

    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript" src="http://www.montourtrail.org/utilities/infobox_packed.js"></script>
    <script type="text/javascript" src="http://www.montourtrail.org/utilities/keydragzoom_packed.js"></script>

    <script type="text/javascript">
    //define trailheads
    var accesses = new Array(40.2823, -79.986433, 40.28177, -79.98584)

    //text for building directions box
    dirStr = '<br />Directions from:<br /><input type="text" id="start" size="25" />'
        + 'by <select id="mode"><option value="DRIVING" selected>car</option><option value="BICYCLING">bicycle</option>'
        + '<option value="WALKING">foot</option></select>'
        + '<input type="button" value="Go" onclick="calcRoute(\''

    //for displaying directions
    var directionsService = new google.maps.DirectionsService();

   function initialize() {
        //position the directions box so it will print properly
        var w = 900
        directionsDisplay = new google.maps.DirectionsRenderer();
        //create base map
        var latlng = new google.maps.LatLng(40.28217, -79.9864);
        var myOptions = {
        zoom: 18,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        scaleControl: true,
        mapTypeControl: true,
          mapTypeControlOptions: {
            style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
          }
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        map.enableKeyDragZoom({key: 'ctrl'});

        //create infowindow to hold content
        var infowindow = new google.maps.InfoWindow({
            content: "holding..."
        });

        var markers = []
        //show trailheads markers
        for (i = 0; i<accesses.length; i=i+2) {
            //locations that have ammenities but no access have names starting with ' '.
            //display only areas that don't start with ' '.
                var myLatlng = new google.maps.LatLng(accesses[i],accesses[i+1]);
                var marker = new google.maps.Marker({
                    position: myLatlng,
                    map: map,
                    icon: "../images/trailsign.gif",
                    animation: google.maps.Animation.DROP,
                    zIndex:15,
                    html: ''
                });
                markers.push(marker)
        }

        //now add the popup content
        for (i = 0; i < markers.length; i++) {
            var thismarker = markers[i];
            google.maps.event.addListener(thismarker, 'click', function () {
            infowindow.setContent(this.html + dirStr +  this.position + '\')" \>');
            infowindow.open(map, this);
            });
        }

        directionsDisplay.setMap(map);
        directionsDisplay.setPanel(document.getElementById("directions"));
    }

    function calcRoute(end) {
        var output = document.getElementById("directions")
        var start = document.getElementById("start").value
        var mode = document.getElementById('mode')
        var modeval = mode.options[mode.selectedIndex].value
        var request = {
            origin:start,
            destination:end,
            travelMode: google.maps.TravelMode[modeval]
        };
        directionsService.route(request, function(response, status) {
        if (status == google.maps.DirectionsStatus.OK) {
        directionsDisplay.setDirections(response);
        }
    });
  }
    </script>
</head>

<body onload="initialize()">
<div id="map_canvas"></div>
<div id="directions"></div>
</body>
</html>

Answer 1

使用google.maps.LatLng，而不是传递包含坐标的逗号分隔字符串。如果您传递包含坐标的逗号分隔字符串，则API会对它们进行反向地理编码，找到它知道的最近的位置并将其路由到那里。如果您使用google.maps.LatLng，它会尽可能地在道路上行驶（至少对于行车路线而言）。

一种选择是改变：

//text for building directions box
dirStr = '<br />Directions from:<br /><input type="text" id="start" size="25" />'
    + 'by <select id="mode"><option value="DRIVING" selected>car</option><option value="BICYCLING">bicycle</option>'
    + '<option value="WALKING">foot</option></select>'
    + '<input type="button" value="Go" onclick="calcRoute(\''

和

infowindow.setContent(this.html + dirStr +  this.position + '\')" \>');

为：

dirStr = '<br />Directions from:<br /><input type="text" id="start" size="25" />'
    + 'by <select id="mode"><option value="DRIVING" selected>car</option><option value="BICYCLING">bicycle</option>'
    + '<option value="WALKING">foot</option></select>'
    + '<input type="button" value="Go" onclick="calcRoute(new google.maps.LatLng(';

和

infowindow.setContent(this.html + dirStr + this.getPosition().toUrlValue(6) + '))" \>');

proof of concept fiddle

代码段

//define trailheads
     var accesses = new Array(40.2823, -79.986433, 40.28177, -79.98584)

      //text for building directions box
      dirStr = '<br />Directions from:<br /><input type="text" id="start" size="25" />' + 'by <select id="mode"><option value="DRIVING" selected>car</option><option value="BICYCLING">bicycle</option>' + '<option value="WALKING">foot</option></select>' + '<input type="button" value="Go" onclick="calcRoute(new google.maps.LatLng(';

      //for displaying directions
     var directionsService = new google.maps.DirectionsService();

     function initialize() {
       //position the directions box so it will print properly
       var w = 900
       directionsDisplay = new google.maps.DirectionsRenderer();
       //create base map
       var latlng = new google.maps.LatLng(40.28217, -79.9864);
       var myOptions = {
         zoom: 18,
         center: latlng,
         mapTypeId: google.maps.MapTypeId.ROADMAP,
         scaleControl: true,
         mapTypeControl: true,
         mapTypeControlOptions: {
           style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
         }
       };
       var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
       map.enableKeyDragZoom({
         key: 'ctrl'
       });

       //create infowindow to hold content
       var infowindow = new google.maps.InfoWindow({
         content: "holding..."
       });

       var markers = []
         //show trailheads markers
       for (i = 0; i < accesses.length; i = i + 2) {
         //locations that have ammenities but no access have names starting with ' '.
         //display only areas that don't start with ' '.
         var myLatlng = new google.maps.LatLng(accesses[i], accesses[i + 1]);
         var marker = new google.maps.Marker({
           position: myLatlng,
           map: map,
           animation: google.maps.Animation.DROP,
           zIndex: 15,
           html: ''
         });
         markers.push(marker)
       }

       //now add the popup content
       for (i = 0; i < markers.length; i++) {
         var thismarker = markers[i];
         google.maps.event.addListener(thismarker, 'click', function() {
           infowindow.setContent(this.html + dirStr + this.getPosition().toUrlValue(6) + '))" \>');
           infowindow.open(map, this);
         });
       }

       directionsDisplay.setMap(map);
       directionsDisplay.setPanel(document.getElementById("directions"));
     }

     function calcRoute(end) {
       var output = document.getElementById("directions")
       var start = document.getElementById("start").value
       var mode = document.getElementById('mode')
       var modeval = mode.options[mode.selectedIndex].value
       var request = {
         origin: start,
         destination: end,
         travelMode: google.maps.TravelMode[modeval]
       };
       directionsService.route(request, function(response, status) {
         if (status == google.maps.DirectionsStatus.OK) {
           directionsDisplay.setDirections(response);
         }
       });
     }
     google.maps.event.addDomListener(window, "load", initialize);

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

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places&ext=.js"></script>
<script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/07f15d84/keydragzoom/src/keydragzoom_packed.js"></script>
<script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/infobox/src/infobox_packed.js"></script>
<div id="map_canvas"></div>
<div id="directions"></div>

谷歌地图指示错误的地方

1 个答案: