利用 Google API 调用谷歌地图演示16 - 某地前往某地-优快云博客

本文提供了一个使用Google Maps API实现的基本路线规划示例。该示例通过HTML和JavaScript展示了如何在网页上显示从起点到终点的路线。用户可以选择不同的城市作为起点和终点，系统会自动计算并展示最优路径。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title>Demo19-某地前往某地</title>
    <style type="text/css">
        html { height: 100%; }
        body { height: 100%; margin: 0px; padding: 0px; }
        .search { margin: 30px auto; width: 50%; }
        #map_canvas { width: 80%; height: 70%; margin: 30px auto; }
    </style>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
        var directionDisplay;
        var directionsService = new google.maps.DirectionsService();
        var map;
        function initialize()
        {
            directionsDisplay = new google.maps.DirectionsRenderer();
            var guangzhou = new google.maps.LatLng(34.26667, 108.95000);
            var myOptions = {
                zoom: 4,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                center: guangzhou
            }
            map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
            directionsDisplay.setMap(map);
        }
        function calcRoute()
        {
            var start = document.getElementById("start").value;
            var end = document.getElementById("end").value;
            var request = {
                origin: start,
                destination: end,
                travelMode: google.maps.DirectionsTravelMode.DRIVING
            };
            directionsService.route(request, function(response, status)
            {
                if (status == google.maps.DirectionsStatus.OK)
                {
                    directionsDisplay.setDirections(response);
                }
            });
        }
    </script>
</head>
<body onload="initialize()">
    <div class="search">
        <b>出发地: </b>
        <select id="start" onchange="calcRoute();">
            <option value="广州">广州</option>
            <option value="上海">上海</option>
            <option value="北京">北京</option>
        </select>
        <b>目的地: </b>
        <select id="end" onchange="calcRoute();">
            <option value="广州">广州</option>
            <option value="上海">上海</option>
            <option value="北京">北京</option>
        </select>
    </div>
    <div id="map_canvas">
    </div>
</body>
</html>

效果图如下：