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

    function initialize() {
        var myLatlng = new google.maps.LatLng(35.18061975930, 51.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
            });

            var newLatLon = new google.maps.LatLng(clickLat, clickLon);
            calcRoute(myLatlng, newLatLon);

        });
    }

    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>

在示例代码中我只更改此var myLatlng = new google.maps.LatLng(35.18061975930, 51.36565089010);，当我更改它时，路由服务不起作用。为什么？我在map.google.com上尝试过它并且有效：

Answer 1

如果您查看以下链接：https://developers.google.com/maps/documentation/javascript/directions “旅行模式”部分

“如果您请求该方向类型不可用的区域的路线，则响应将返回DirectionsStatus =”ZERO_RESULTS“。”

在你的情况下，它返回“ZERO_RESULTS”：

JSFiddle

directionsService.route(request, function(response, status) {
      console.log(response);
      alert(status);
        if (status == google.maps.DirectionsStatus.OK) {

          directionsDisplay.setDirections(response);
        }
      });

Answer 2

看起来该位置离任何道路太远，因此路线服务部门不知道从哪里开始路线。如果您将位置移近道路，例如：var myLatlng = new google.maps.LatLng(35.49000000000, 51.36565089010);，那么您会看到它有效。

当我更改google.maps.LatLng时，路线服务在谷歌地图中不起作用

2 个答案: