Question

我正在尝试使用谷歌地图开发一个应用程序。

申请说明：

用户节目在屏幕上看到谷歌地图，应该能够点击地图并看到点击的点（第一次点击），当用户再次点击时，应绘制两个位置之间的路线，

所以这是我的代码：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Show Google Map with Latitude and Longitude in asp.net website</title>

<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC6v5-2uaq_wusHDktM9ILcqIrlPtnZgEk&sensor=false">
</script>
<script type="text/javascript">

    var map;
    function initialize() {
        var myLatlng = new google.maps.LatLng(24.18061975930, 79.36565089010);
        var myOptions = {
            zoom: 7,
            center: myLatlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        map = new google.maps.Map(document.getElementById("gmap"), myOptions);
        // marker refers to a global variable
        marker = new google.maps.Marker({
            position: myLatlng,
            map: map
        });

        google.maps.event.addListener(map, "click", function (event) {
            // get lat/lon of click
            var clickLat = event.latLng.lat();
            var clickLon = event.latLng.lng();

            // show in input box
            document.getElementById("lat").value = clickLat.toFixed(5);
            document.getElementById("lon").value = clickLon.toFixed(5);

            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(clickLat, clickLon),
                map: map
            });
        });
    }

    window.onload = function () { initialize() };
</script>
     <style>
 div#gmap {
        width: 80%;
        height: 500px;
        border:double;
 }
    </style>
</head>

<body>
    <form id="form1" runat="server">
        Lat: <input type="text" id='lat'>
Lon: <input type="text" id='lon'>
        <center>
            <!-- MAP HOLDER -->
            <div id="gmap"></div>
            <!-- REFERENCES -->

            lat:
            lon:

        </center>

    </form>
</body>

</html>

用户可以点击地图，可以看到点击的点，但问题是我不知道如何将其与路线服务合并。

Answer 1

您想阅读DirectionsRenderer和DirectionsService。

Working jsFiddle here

var directionsDisplay = new google.maps.DirectionsRenderer();
var directionsService = new google.maps.DirectionsService();

function calcRoute(start,end) {

  directionsDisplay.setMap(map);

  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);
    }
  });
}

获取用户

1 个答案: