Question

从DirectionService渲染转弯列表时。该列表显示输入的不同地址。让我们说一下1659 N Hobart Blvd洛杉矶，CA 90027＆＃39;作为origin，那么directionService.route将地址显示为＆＃39; 1647 N Hobart Blvd，Los Angeles，CA 90027，USA＆＃39;甚至搜索结果返回＆＃39; ROOFTOP＆＃39;。这也发生在目的地地址。

如何使方向结果显示输入地址和原点。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="UTF-8">
    <title>4SoftPOS Directions</title>
    <style type="text/css">
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }

        #map_canvas {
            height: 100%;
            width: 70%;
            float: right;
        }

        #direction_panel {
            height: 100%;
            overflow: scroll;
            background: aqua;
        }

        #control {
            background: #fff;
            padding: 5px;
            font-size: 14px;
            font-family: Arial;
            border: 1px solid #ccc;
            box-shadow: 0 2px 2px rgba(33, 33, 33, 0.4);
            display: none;
        }

        #floating-panel {
            position: absolute;
            top: 10px;
            left: 25%;
            z-index: 5;
            background-color: #fff;
            padding: 5px;
            border: 1px solid #999;
            text-align: center;
            font-family: 'Roboto', 'sans-serif';
            line-height: 30px;
            padding-left: 10px;
        }


        @media print {
            #map-canvas {
                width: 100%;
                margin: 0;
            }

            #direction_panel {
                width: 100%;
                position: static;
            }
        }

        .adp-placemark {
            background-color: #1C7DD7;
        }


        .adp-legal {
            color: black;
        }

        .warnbox-content {
            background: white;
            color: black;
        }
    </style>
    <script type="text/javascript"
            src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript"
            src='http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js'></script>

    <script type="text/javascript">

        // register when errors suppress them
        window.onerror = function () {
            // Return true to tell IE we handled it
            return true;
        };

        var geocoder;
        var map;
        var directionsDisplay;
        var directionsService;
        var origin = '1659 N Hobart Blvd Los Angeles, CA 90027';
        var destination = '7352 Camellia Ave N Holloywood, CA 91605';
        var latlng_origin;
        var latlng_destination;
        var markers = [];

        //var origin = new google.maps.LatLng([origin]);
        //var destination = new google.maps.LatLng([destination]);
        function isBlank(str) {
            return (!str || /^\s*$/.test(str));
        }

        function isEmpty(str) {
            return (!str || 0 === str.length);
        }

        function initialize() {
            // init direction services
            directionsService = new google.maps.DirectionsService();
            if (isBlank(destination) || isEmpty(destination)) {
                alert("Destination is not spedified.");
                displayDefault();
            } else {
                displayDirection();
            }
        }

        function displayDefault() {
            geocoder = new google.maps.Geocoder();
            geocoder.geocode({ 'address': origin }, function (results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    latlng_origin = results[0].geometry.location;
                    map = new google.maps.Map(document.getElementById('map_canvas'),
                    {
                        zoom: 18,
                        center: latlng_origin
                    });
                    var marker = new google.maps.Marker({
                        position: latlng_origin,
                        map: map,
                        title: 'Your restaurant'
                    });

                } else {
                    alert("Geocode was not successful for the following reason: origin " + status);
                }
            });
        }

        function displayDirection() {
            // init google map and display the map at map_canvas
            var myOptions = {
                zoom: 1,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                center: origin
            }
            map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

            // set display to show traffic
            var trafficLayer = new google.maps.TrafficLayer();
            trafficLayer.setMap(map);

            // init direction display
            directionsDisplay = new google.maps.DirectionsRenderer();
            // set display direction turn by turn
            directionsDisplay.setMap(map);
            // display direction panel
            directionsDisplay.setPanel(document.getElementById("turnbyturn"));

            geocoder = new google.maps.Geocoder();
            geocoder.geocode({ 'address': origin }, function (results, status) {
                if (status == window.google.maps.GeocoderStatus.OK) {
                    latlng_origin = results[0].geometry.location;
                    var final_result;
                    var i = 0;
                    for (i = 0; i < results.length; i++) alert(results[i].geometry.location_type); // for debug

                    for (i = 0; i < results.length; i++)
                        if (results[i].geometry.location_type === google.maps.GeocoderLocationType.ROOFTOP) final_result = results[i];
                    if (typeof final_result === "undefined")
                        for (i = 0; i < results.length; i++)
                            if (results[i].geometry.location_type === google.maps.GeocoderLocationType.RANGE_INTERPOLATED) final_result = results[i];
                    if (typeof final_result === "undefined")
                        for (i = 0; i < results.length; i++)
                            if (results[i].geometry.location_type === google.maps.GeocoderLocationType.GEOMETRIC_CENTER) final_result = results[i];
                    if (typeof final_result === "undefined")
                        for (i = 0; i < results.length; i++)
                            if (results[i].geometry.location_type === google.maps.GeocoderLocationType.APPROXIMATE) final_result = results[i];

                    if (typeof final_result !== "undefined") latlng_origin = final_result.geometry.location;
                } else {
                    alert("Geocode was not successful for the following reason: origin " + status);
                }
                if (latlng_origin && latlng_destination) calcRoute();
            });

            geocoder.geocode({ 'address': destination }, function (results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    latlng_destination = results[0].geometry.location;
                    var final_result;
                    var i = 0;
                    //for (i = 0; i < results.length; i++) alert(results[i].geometry.location_type); // for debug

                    for (i = 0; i < results.length; i++)
                        if (results[i].geometry.location_type === google.maps.GeocoderLocationType.ROOFTOP) final_result = results[i];
                    if (typeof final_result === "undefined")
                        for (i = 0; i < results.length; i++)
                            if (results[i].geometry.location_type === google.maps.GeocoderLocationType.RANGE_INTERPOLATED) final_result = results[i];
                    if (typeof final_result === "undefined")
                        for (i = 0; i < results.length; i++)
                            if (results[i].geometry.location_type === google.maps.GeocoderLocationType.GEOMETRIC_CENTER) final_result = results[i];
                    if (typeof final_result === "undefined")
                        for (i = 0; i < results.length; i++)
                            if (results[i].geometry.location_type === google.maps.GeocoderLocationType.APPROXIMATE) final_result = results[i];

                    if (typeof final_result !== "undefined") latlng_destination = final_result.geometry.location;
                } else {
                    alert("Geocode was not successful for the following reason: destination " + status);
                }
                if (latlng_origin && latlng_destination) calcRoute();
            });
        }

        function calcRoute() {
            var selectedMode = document.getElementById("mode").value;
            var request = {
                origin: latlng_origin,
                destination: latlng_destination,
                // Note that Javascript allows us to access the constant
                // using square brackets and a string value as its
                // "property."
                travelMode: google.maps.TravelMode[selectedMode]
            };
            directionsService.route(request, function (response, status) {
                if (status == google.maps.DirectionsStatus.OK) {
                    directionsDisplay.setDirections(response);
                }
            });
        }

        function codeAddress() {
            var address = document.getElementById("address").value;
            geocoder.geocode({ 'address': address }, function (results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    map.setCenter(results[0].geometry.location);
                    var marker = new google.maps.Marker({
                        map: map,
                        position: results[0].geometry.location
                    });
                } else {
                    alert("Geocode was not successful for the following reason: " + status);
                }
            });

            var image = 'down2.png';
            var marker = new google.maps.Marker({
                position: origin,
                map: map,
                icon: image,
                animation: google.maps.Animation.DROP,
                title: "Click for show the data of the client"
            });
        }
    </script>
</head>
<body onload="initialize()">
    <div id="map_canvas"></div>
    <div id="direction_panel">
        <strong>Mode of Travel: </strong>
        <select id="mode" onchange="calcRoute();">
            <option value="DRIVING">Driving</option>
            <option value="WALKING">Walking</option>
            <option value="BICYCLING">Bicycling</option>
        </select>
        <div id="turnbyturn"></div>
    </div>
</body>
</html>

Answer 1

如果您将原始地址和目标地址直接传递到路线服务，而不是对第一个地址进行地理编码并传入生成的Google。 maps.LatLng，地址将是相同的。

proof of concept fiddle

代码段

＆＃13;

var geocoder;
var map;
var directionsDisplay;
var directionsService;
var origin = '1659 N Hobart Blvd Los Angeles, CA 90027';
var destination = '7352 Camellia Ave N Holloywood, CA 91605';
var latlng_origin;
var latlng_destination;
var markers = [];

function initialize() {
  // init direction services
  directionsService = new google.maps.DirectionsService();
  displayDirection();
}

function displayDirection() {
  // init google map and display the map at map_canvas
  var myOptions = {
    zoom: 1,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    // center: origin
  }
  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

  // set display to show traffic
  var trafficLayer = new google.maps.TrafficLayer();
  trafficLayer.setMap(map);

  // init direction display
  directionsDisplay = new google.maps.DirectionsRenderer();
  // set display direction turn by turn
  directionsDisplay.setMap(map);
  // display direction panel
  directionsDisplay.setPanel(document.getElementById("turnbyturn"));
  calcRoute();
}

function calcRoute() {
  var selectedMode = document.getElementById("mode").value;
  var request = {
    origin: origin, // latlng_origin,
    destination: destination, // latlng_destination,
    // Note that Javascript allows us to access the constant
    // using square brackets and a string value as its
    // "property."
    travelMode: google.maps.TravelMode[selectedMode]
  };
  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
    }
  });
}

google.maps.event.addDomListener(window, 'load', function() {
  initialize();
  displayDirection();
});

＆＃13;

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#map_canvas {
  height: 350px;
  width: 70%;
  /* float: right;*/
}
#direction_panel {
  height: 100%;
  overflow: scroll;
  background: aqua;
}
#control {
  background: #fff;
  padding: 5px;
  font-size: 14px;
  font-family: Arial;
  border: 1px solid #ccc;
  box-shadow: 0 2px 2px rgba(33, 33, 33, 0.4);
  display: none;
}
#floating-panel {
  position: absolute;
  top: 10px;
  left: 25%;
  z-index: 5;
  background-color: #fff;
  padding: 5px;
  border: 1px solid #999;
  text-align: center;
  font-family: 'Roboto', 'sans-serif';
  line-height: 30px;
  padding-left: 10px;
}
@media print {
  #map-canvas {
    width: 100%;
    margin: 0;
  }
  #direction_panel {
    width: 100%;
    position: static;
  }
}
.adp-placemark {
  background-color: #1C7DD7;
}
.adp-legal {
  color: black;
}
.warnbox-content {
  background: white;
  color: black;
}

＆＃13;

<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js"></script>
<div id="floating-panel">
  <b>Mode of Travel: </b>
  <select id="mode">
    <option value="DRIVING">Driving</option>
    <option value="WALKING">Walking</option>
    <option value="BICYCLING">Bicycling</option>
    <option value="TRANSIT">Transit</option>
  </select>
</div>
<div id="map_canvas"></div>
<div id="turnbyturn"></div>

＆＃13;

Google地图API，directionService.route依次轮流列表依次显示不同的地址

1 个答案: