我如何在谷歌地图画一条路径？

本文介绍了我如何在谷歌地图画一条路径？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述

<%@ Page Title="Login" Language="C#" MasterPageFile="~/MapMasterPage.master" AutoEventWireup="true" CodeFile="Login.aspx.cs" Inherits="Login" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
    <style type="text/css">
        .auto-style5 {
            height: 201px;
        }
    </style>
</asp:Content>
<asp:Content ID="Content2" runat="server" contentplaceholderid="ContentPlaceHolder1">

            <table class="auto-style1">
                <tr>
                    <td class="auto-style2" style="text-align: center; font-size: 65px; font-family: Algerian; background-color: #808080;">COLOMBO DIRECTION MAP</td>
                </tr>
                <tr>
                    <td class="auto-style3">

                                <script

src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>
                        <script type="text/javascript">

var directionDisplay;
    var directionsService = new google.maps.DirectionsService();


    function initialize() {
        directionsDisplay = new google.maps.DirectionsRenderer();
        var mapProp = {
            center: new google.maps.LatLng(6.927079, 79.861243),
            zoom: 11,
            mapTypeIds: [google.maps.MapTypeId.HYBRID,
            google.maps.MapTypeId.TERRAIN,
            google.maps.MapTypeId.ROADMAP,
              google.maps.MapTypeId.SATELLITE]


        };


        var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);

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

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

    function calcRoute() {

        //var start = Label1 + Label2;;
        //var end = Label3 + Label4;
        var start = document.getElementById('TextBox1').value;
        var end = document.getElementById('TextBox2').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);
            }
        });

    }

    google.maps.event.addDomListener(window, 'load', initialize);

   //function calculate() {
     // var startLoc = TextBox1.Text;
       // TextBox2 = startLoc;
      //}
</script>
</head>

<body>
<div id="googleMap" style="width:100%;height:400px;"></div>

</body>
</html>
                    </td>

                </tr>
                <tr>
                    <td class="auto-style5" style="background-color: #996633; vertical-align: top; text-align: center;">
                        <br />
                        Map Type&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;<asp:DropDownList ID="DropDownList1" runat="server" Height="22px" Width="128px">
                        </asp:DropDownList>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <br />
                        <br />
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Source&nbsp;&nbsp;&nbsp;
                        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
                        &nbsp; Lattitude =
                        <asp:Label ID="Label1" runat="server" Text="Lat1"></asp:Label>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Longitude =
                        <asp:Label ID="Label2" runat="server" Text="LngT1"></asp:Label>
                        <br />
                        &nbsp;&nbsp;&nbsp;
                        <br />
                        Destination&nbsp;&nbsp;&nbsp;
                        <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
                        &nbsp; Lattitude =
                        <asp:Label ID="Label3" runat="server" Text="Lat2"></asp:Label>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Longitude =
                        <asp:Label ID="Label4" runat="server" Text="LngT2"></asp:Label>
                        <br />
                        <br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <asp:Button ID="Button1" OnServerClick="calculate();return false;" runat="server" Text="Button" OnClick="Button1_Click" Width="120px" />
                        <br />
                        <br />
                        &nbsp;&nbsp;&nbsp;
                        </td>
                </tr>
                <tr>
                    <td style="background-color: #808080">&nbsp;</td>
                </tr>
            </table>

        </asp:Content>
我如何在谷歌地图画一条路径

问题描述

推荐答案
