Google Map如么课程 04 做导航

最新推荐文章于 2019-07-17 22:36:02 发布

小源子2016

最新推荐文章于 2019-07-17 22:36:02 发布

阅读量928

点赞数

CC 4.0 BY-SA版权

分类专栏： ASP GooleMap

本文链接：https://blog.youkuaiyun.com/rnZuoZuo/article/details/23769489

ASP 同时被 2 个专栏收录

8 篇文章

订阅专栏

GooleMap

4 篇文章

订阅专栏

本文介绍如何利用ASP.NET和Google Maps API实现一个简单的路线规划应用。该应用允许用户输入起点和终点，通过调用Google Maps Directions Service计算最优路径，并在地图上展示出来。

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

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script language="javascript" type="text/javascript">
    var directionsDisplay;
    var directionsService = new google.maps.DirectionsService();

    function InitializeMap() {
        directionsDisplay = new google.maps.DirectionsRenderer();
        var latlng = new google.maps.LatLng(-34.397, 150.644);
        var myOptions =
        {
            zoom: 8,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map"), myOptions);

        directionsDisplay.setMap(map);
        directionsDisplay.setPanel(document.getElementById('directionpanel'));

        var control = document.getElementById('control');
        control.style.display = 'block'; 


    }



    function calcRoute() {
        var start = document.getElementById('startvalue').value;
        var end = document.getElementById('endvalue').value;
        
        start = new google.maps.LatLng(39.9,116.3);
        end  = new google.maps.LatLng(31.0,121.1);
        
        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);
            }
        });

    }



    function Button1_onclick() {
        calcRoute();
    }

    window.onload = InitializeMap;
    </script>
    
<table id ="control">
<tr>
<td>
<table>
<tr>
<td>From:</td>
<td>
    <input id="startvalue" type="text" style="width: 305px" /></td>
</tr>
<tr>
<td>To:</td>
<td><input id="endvalue" type="text" style="width: 301px" /></td>
</tr>
<tr>
<td align ="right">
    <input id="Button1" type="button" value="GetDirections" onclick="return Button1_onclick()" /></td>
</tr>
</table>
</td>
</tr>
<tr>
<td valign ="top">
<div id ="directionpanel"  style="height: 390px;overflow: auto" ></div>
</td>
<td valign ="top">
<div id ="map" style="height: 390px; width: 489px"></div>
</td>
</tr>
</table>
</asp:Content>