使用位置坐标值在谷歌地图中绘制路线图答案

【问题标题】：Route map drawing in google maps using coordinate values of location使用位置坐标值在谷歌地图中绘制路线图
【发布时间】：2015-12-12 10:16:26
【问题描述】：

我正在开发一个地图应用程序，用户将在其中选择从可用点列表中的起点和终点落下。我想要的是生成的地图应该采用这些值纬度和经度，而不是我在中提到的字符串值下面的代码。我怎样才能做到这一点？

我也想知道是否可以使用自己的路线而不是谷歌生成的路线来绘制我的自定义地图。

感谢任何帮助！

 <b>Start: </b>
    <select id="start" onchange="calcRoute();">
      <option value="chicago, il">Chicago</option>
      <option value="st louis, mo">St Louis</option>
      <option value="joplin, mo">Joplin, MO</option>
      <option value="oklahoma city, ok">Oklahoma City</option>
      <option value="amarillo, tx">Amarillo</option>
      <option value="gallup, nm">Gallup, NM</option>
      <option value="flagstaff, az">Flagstaff, AZ</option>
      <option value="winona, az">Winona</option>
      <option value="kingman, az">Kingman</option>
      <option value="barstow, ca">Barstow</option>
      <option value="san bernardino, ca">San Bernardino</option>
      <option value="los angeles, ca">Los Angeles</option>
    </select>
    <b>End: </b>
     <select id="end" onchange="calcRoute();">
      <option value="chicago, il">Chicago</option>
      <option value="st louis, mo">St Louis</option>
      <option value="joplin, mo">Joplin, MO</option>
      <option value="oklahoma city, ok">Oklahoma City</option>
      <option value="amarillo, tx">Amarillo</option>
      <option value="gallup, nm">Gallup, NM</option>
      <option value="flagstaff, az">Flagstaff, AZ</option>
      <option value="winona, az">Winona</option>
      <option value="kingman, az">Kingman</option>
      <option value="barstow, ca">Barstow</option>
      <option value="san bernardino, ca">San Bernardino</option>
      <option value="los angeles, ca">Los Angeles</option>
    </select>
    </div>

JS部分是：

<script>
    function initMap() {
        var directionsService = new google.maps.DirectionsService;
        var directionsDisplay = new google.maps.DirectionsRenderer;
        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 7,
            center: {
                lat: 41.85,
                lng: -87.65
            }
        });
        directionsDisplay.setMap(map);

    var onChangeHandler = function() {
        calculateAndDisplayRoute(directionsService, directionsDisplay);
    };
    document.getElementById('start').addEventListener('change', onChangeHandler);
    document.getElementById('end').addEventListener('change', onChangeHandler);
}

function calculateAndDisplayRoute(directionsService, directionsDisplay) {
    directionsService.route({
        origin: document.getElementById('start').value,
        destination: document.getElementById('end').value,
        travelMode: google.maps.TravelMode.DRIVING
    }, function(response, status) {
        if (status === google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
        } else {
            window.alert('Directions request failed due to ' + status);
        }
    });
}
</script>

【问题讨论】：

感谢您的回复，但它是 android API 的解决方案，对吗？我需要一些用于直接 Web 应用程序的东西。
哦，对不起。我看到了“谷歌地图标签”，并认为它默认是 Android 的。我的错。我已删除该评论。
这可能是一个很好的起点：developers.google.com/maps/documentation/javascript/examples
你想使用什么坐标？他们来自哪里？问题中的代码包含地址（和作品）。请提供一个 Minimal, Complete, Tested and Readable example 来证明该问题。

标签： javascript google-maps google-maps-api-3

【解决方案1】：

您可以为此使用航点，您必须输入位置，即航点的地址。您可以将一组航点添加到您的路线中。请参阅此documentation 以了解如何使用它。

【讨论】：