Question

您好我正在尝试使用javascript在两个标记之间绘制路线图。我尝试了在线发现的各种示例，但在尝试不同的示例时我的地图没有加载。我无法弄清楚错误的原因。我的地图无法加载。

我正在尝试为以下两个标记画一条路线。

    <script>

        function mapLocation() {
            var directionsDisplay;
            var directionsService = new google.maps.DirectionsService();
            var map;

            function initialize() {
                directionsDisplay = new google.maps.DirectionsRenderer();
                var chicago = new google.maps.LatLng(37.334818, -121.884886);
                var mapOptions = {
                    zoom: 7,
                    center: chicago
                };
                map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
                directionsDisplay.setMap(map);
            }

            function calcRoute() {
                var start = new google.maps.LatLng(37.334818, -121.884886);
                var end = new google.maps.LatLng(38.334818, -181.884886);
                var request = {
                    origin: start,
                    destination: end,
                    travelMode: google.maps.TravelMode.DRIVING
                };
                directionsService.route(request, function (response, status) {
                    if (status == google.maps.DirectionsStatus.OK) {
                        directionsDisplay.setDirections(response);
                    }
                });
            }            

            google.maps.event.addDomListener(window, 'load', initialize);
        }
        mapLocation();
    </script>

有人可以帮我画两个标记之间的路线吗？

Answer 1

两条评论：

您的问题询问标记之间的方向，但您发布的代码中没有标记。 LatLng对象定义了两个位置。路线服务将自动在路线的开头和结尾添加标记。如果您想获得两个标记之间的路线，则需要先将它们添加到地图中。
在发布的代码中没有对calcRoute的调用（我添加了一个＆＃34; route＆＃34;按钮，导致它被执行）。

的问题：

路线服务为您的原始点返回ZERO_RESULTS，因此不会绘制任何路线。在其他情况下为if (status == "OK")测试添加错误处理以查看。
如果我将点数更改为实际可以路由的地方（Palo Alto，CA），则路线服务路线不会被渲染，因为您从未设置过＆＃34;地图＆＃34;指示服务的财产

working fiddle

function mapLocation() {
    var directionsDisplay;
    var directionsService = new google.maps.DirectionsService();
    var map;

    function initialize() {
        directionsDisplay = new google.maps.DirectionsRenderer();
        var chicago = new google.maps.LatLng(37.334818, -121.884886);
        var mapOptions = {
            zoom: 7,
            center: chicago
        };
        map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
        directionsDisplay.setMap(map);
        google.maps.event.addDomListener(document.getElementById('routebtn'), 'click', calcRoute);
    }

    function calcRoute() {
        var start = new google.maps.LatLng(37.334818, -121.884886);
        //var end = new google.maps.LatLng(38.334818, -181.884886);
        var end = new google.maps.LatLng(37.441883, -122.143019);
        var bounds = new google.maps.LatLngBounds();
        bounds.extend(start);
        bounds.extend(end);
        map.fitBounds(bounds);
        var request = {
            origin: start,
            destination: end,
            travelMode: google.maps.TravelMode.DRIVING
        };
        directionsService.route(request, function (response, status) {
            if (status == google.maps.DirectionsStatus.OK) {
                directionsDisplay.setDirections(response);
                directionsDisplay.setMap(map);
            } else {
                alert("Directions Request from " + start.toUrlValue(6) + " to " + end.toUrlValue(6) + " failed: " + status);
            }
        });
    }

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

工作代码段：

＆＃13;

function mapLocation() {
  var directionsDisplay;
  var directionsService = new google.maps.DirectionsService();
  var map;

  function initialize() {
    directionsDisplay = new google.maps.DirectionsRenderer();
    var chicago = new google.maps.LatLng(37.334818, -121.884886);
    var mapOptions = {
      zoom: 7,
      center: chicago
    };
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    directionsDisplay.setMap(map);
    google.maps.event.addDomListener(document.getElementById('routebtn'), 'click', calcRoute);
  }

  function calcRoute() {
    var start = new google.maps.LatLng(37.334818, -121.884886);
    //var end = new google.maps.LatLng(38.334818, -181.884886);
    var end = new google.maps.LatLng(37.441883, -122.143019);
    var request = {
      origin: start,
      destination: end,
      travelMode: google.maps.TravelMode.DRIVING
    };
    directionsService.route(request, function(response, status) {
      if (status == google.maps.DirectionsStatus.OK) {
        directionsDisplay.setDirections(response);
        directionsDisplay.setMap(map);
      } else {
        alert("Directions Request from " + start.toUrlValue(6) + " to " + end.toUrlValue(6) + " failed: " + status);
      }
    });
  }

  google.maps.event.addDomListener(window, 'load', initialize);
}
mapLocation();

＆＃13;

html,
body,
#map-canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

＆＃13;

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<input type="button" id="routebtn" value="route" />
<div id="map-canvas"></div>

＆＃13;

Answer 2

相当多的错误。首先是地理位置。你的第二个位置是错误的，因为经度只能从+180到-180，所以-181在地球上不存在！其次，正如MrUpsidedown在评论中提到的那样，你在一个函数中调用一个函数。首先纠正地理位置，然后纠正您的函数调用，这应该可以解决您遇到的问题。

Answer 3

在开始编写代码之前，请务必正确检查/配置您的 google Maps API 及其订阅计划（不要担心它不会花费您一分钱。只需从云门户添加配置即可）。如果上述配置有错误，您将无法加载地图。

请参考以下脚本获取两点间的路线。为了便于理解，我用最简单的方式写了。

    <!DOCTYPE html>
<html>
<head>
    <title>Google Map</title>
</head>
<style type="text/css">
    #map{
        height: 80%;
    }
    html , body {
        height: 100%;
    }
</style>
<body onload="myfunction();">
<div id="map">
</div>
<script type="text/javascript">
    function myfunction(){
        var map;
        var start = new google.maps.LatLng(7.434876909631617,80.4424951234613);
        var end = new google.maps.LatLng(7.3178281209262686,80.8735878891028);
        var option ={
            zoom : 10,
            center : start 
        };
        map = new google.maps.Map(document.getElementById('map'),option);
        var display = new google.maps.DirectionsRenderer();
        var services = new google.maps.DirectionsService();
        display.setMap(map);
            var request ={
                origin : start,
                destination:end,
                travelMode: 'DRIVING'
            };
            services.route(request,function(result,status){
                if(status =='OK'){
                    display.setDirections(result);
                }
            });
    }
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=**Your API KEY**&libraries=places"></script>

</body>
</html>

如何在谷歌地图中绘制两个标记之间的路线

3 个答案: