ASP.NET Google Maps Javascript API V3 实战基础篇一不同种类路线查询-CSDN博客

本文链接：https://blog.csdn.net/wuqinglianga/article/details/6010469

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Direction_Driver_Mode.aspx.cs"
Inherits="Samples.Services.Direction_Driver_Mode" %>

<!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 runat="server">
    <title>不同种类路线查询</title>
    <style type="text/css">
        #maps
        {
            height: 450px;
        }
    </style>

        var directionDisplay; //申明路线显示对象
        var directionsService = new google.maps.DirectionsService(); //查询服务
        var map;
        var haight = new google.maps.LatLng(37.7699298, -122.4469157);
        var oceanBeach = new google.maps.LatLng(37.7683909618184, -122.51089453697205);
        function initialize() {
            directionDisplay = new google.maps.DirectionsRenderer();
            var options = {
                zoom: 14, mapTypeId: google.maps.MapTypeId.ROADMAP, center: haight
            };
            map = new google.maps.Map(document.getElementById("maps"), options);
            directionDisplay.setMap(map);
            calcRoute(); //计算路线
        }
        //根据查询路线类型获取相应路线
        function calcRoute() {
            var selectedMode = document.getElementById("mode").value;
            var request = {
                origin: haight, destination: oceanBeach, travelMode: google.maps.DirectionsTravelMode[selectedMode]
            };
            directionsService.route(
              request, function(response, status) {
                  if (status == google.maps.DirectionsStatus.OK) {
                      directionDisplay.setDirections(response);
                  }
              }
           );
        }
        google.maps.event.addDomListener(window, "load", initialize);
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
        <b>Mode of Travel: </b>
        <select id="mode" οnchange="calcRoute();">
            <option value="DRIVING">Driving</option>
            <option value="WALKING">Walking</option>
            <option value="BICYCLING">Bicycling</option>
        </select>
    </div>
    <div id="maps">
    </div>
    </form>
</body>
</html>