Question

目前，我正在尝试查找代码，以便在Google地图中获取从当前位置到所需位置的路线。场景：在我的aspx页面上载时，地图应该查看我当前的位置，当我在下拉框中单击所需位置时，它应该显示我当前位置的方向。我只是一个初学者作为程序员，如果我的问题很愚蠢，请原谅我。

显示我当前位置的代码是.....

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Get User Current Location using Google Map Geolocation API Service in asp.net website</title>
    <style type="text/css">
    html { height: 100% }
    body { height: 100%; margin: 0; padding: 0 }
    #map_canvas { height: 100% }
    </style>
    <script type="text/javascript"
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD1axwAuIx3vQ0oIJLxkUg9P1SF38AkT2A&sensor=false">
    </script>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places">
    </script>
    <script type="text/javascript">
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(success);
        } else {
            alert("Geo Location is not supported on your current browser!");
        }
        function success(position) {
            var lat = position.coords.latitude;
            var long = position.coords.longitude;
            var city = position.coords.locality;
            var myLatlng = new google.maps.LatLng(lat, long);
            var myOptions = {
                center: myLatlng,
                zoom: 12,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
            var marker = new google.maps.Marker({
                position: myLatlng,
                title: "lat: " + lat + " long: " + long
            });

            marker.setMap(map);
           // var infowindow = new google.maps.InfoWindow({ content: "<b>User Address</b><br/> Latitude:" + lat + "<br /> Longitude:" + long + "" });
            infowindow.open(map, marker);
        }
    </script>

    </head>
    <body >
    <form id="form1" runat="server">
    <div id="map_canvas" style="width: 500px; height: 400px"></div>
    </form>
    </body>
    </html>

Answer 1

  <script> 
   function initMap(){
       var markerArray = [];
       var directionsService = new google.maps.DirectionsService;
      if(navigator.geolocation){
        navigator.geolocation.getCurrentPosition(function (position){
            map = new google.maps.Map(document.getElementById('map'),{
                zoom: 17,
                center: {lat: position.coords.latitude, lng:  
                 position.coords.longitude}
            });
            var marker = new google.maps.Marker({
                draggable: true,
                position: {lat: position.coords.latitude, lng: 
      position.coords.longitude},
                map: map
            });
            directionsDisplay.setMap(map);
        },
        function (){
            alert("unable to get current loaction!");
        });
    }
    else{
        alert("Location service is not support in your web browser!");
    }

    var directionsDisplay = new google.maps.DirectionsRenderer;
    calculateAndDisplayRoute(directionsDisplay, directionsService, markerArray, map);
    var onChangeHandler = function (){
        calculateAndDisplayRoute(directionsDisplay, directionsService, markerArray, map);
    };
    document.getElementById('start').addEventListener('change', onChangeHandler);
    document.getElementById('end').addEventListener('change', onChangeHandler);
}

function calculateAndDisplayRoute(directionsDisplay, directionsSerivce, markerArray, map){
    directionsSerivce.route({
        origin: document.getElementById('start').value,
        destination: document.getElementById('end').value,
        travelMode: google.maps.TravelMode.DRIVING
    },
    function(response, status){
        if(status === 'OK'){
            document.getElementById('warnings-panel').innerHTML = '<b>' + response.routes[0].warnings + '</b>';
            directionsDisplay.setDirections(response);

        }
        else{
            window.alert('Direction request failed due to ' + status);
        }
    });
}

标记

      <b>Start: </b>
       <select id="start">
        <option>Select Start Location</option>
        <option value="I-9/2, Islamabad, ICT">I-9/2</option>
        <option value="I-10/2, Islamabad, ICT">I-10/2</option>
        <option value="G-10/1, Islamabad, ICT">G-10/1</option>
        <option value="F-8, Islamabad, ICT">F-8</option>
        <option value="Shah Faisal Mosque, Islamabad, ICT">Faisal 
      Masjid</option>
        <option value="I-8/2, Islamabad, ICT">I-8/2</option>
        <option value="F-5, Islamabad, ICT">F-5</option>
        <option value="Zero Point, Islamabad, ICT">Zero Point</option>
        <option value="F-6/7, Islamabad, ICT">F-6/7</option>
        <option value="F-5/1, Islamabad, ICT">F-5/1</option>
        <option value="F-7, Islamabad, ICT">F-7</option>
        <option value="Golra, Islamabad, ICT">Golra Morr</option>
        <option value="Zoo, Islamabad">Zoo</option>
        <option value="Muree, Muree">Muree</option>
       </select>
      <b>End: </b>
      <select id="end">
        <option>Select Distination</option>
        <option value="I-8/2, Islamabad, ICT">I-8/2</option>
        <option value="F-5, Islamabad, ICT">F-5</option>
        <option value="Zero Point, Islamabad, ICT">Zero Point</option>
        <option value="F-6/7, Islamabad, ICT">F-6/7</option>
        <option value="F-5/1, Islamabad, ICT">F-5/1</option>
        <option value="F-7, Islamabad, ICT">F-7</option>
        <option value="Golra, Islamabad, ICT">Golra Morr</option>
        <option value="Zoo, Islamabad">Zoo</option>
        <option value="I-9/2, Islamabad, ICT">I-9/2</option>
        <option value="I-10/2, Islamabad, ICT">I-10/2</option>
        <option value="G-10/1, Islamabad, ICT">G-10/1</option>
        <option value="F-8, Islamabad, ICT">F-8</option>
        <option value="Shah Faisal Mosque, Islamabad, ICT">Faisal 
      Masjid</option>
        <option value="Fatima jinah park, Islamabad">Fatima jinah 
       park</option>
      </select>
            <div id="map">

            </div>

<div id="warnings-panel"></div>

使用asp.net中的谷歌地图显示从当前位置到所需位置的方向

1 个答案: