如何在谷歌地图中的两个标记之间绘制路线 [英] how to draw a route between two markers in google maps

查看：114
本文介绍了如何在谷歌地图中的两个标记之间绘制路线的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

您好，我正在尝试使用javascript在两个标记之间绘制路线图。
我尝试过在线发现的各种示例，但尝试使用不同的示例时我的地图未加载。我无法找出错误的原因。我的地图只是不加载。



我正在为下面两个标记绘制路线。

 < script> 
 
函数mapLocation（）{
 var directionsDisplay; 
 var directionsService = new google.maps.DirectionsService（）; 
 var map; 
 
函数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）; 
 
 
函数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>

有人可以帮我画两条标记之间的路线吗？
您的问题询问标记之间的方向，但是您发布的代码中没有标记。 LatLng对象定义了两个位置。路线服务将自动在路线的起点和终点添加标记。如果您想要在两个标记之间获取路线，您需要先将它们添加到地图中。 在发布的代码中没有对calcRoute的调用（我添加了一个路线按钮这会导致它被执行）。

问题：


  1. 方位服务正在为您的原始点返回ZERO_RESULTS，因此不会绘制路线。如果我更改了 if（status ==OK） test，那么在else情况下添加错误处理来查看。
    2. 指向实际可路由的地点（加利福尼亚州帕洛阿尔托），指示服务路线未呈现，因为您从未设置路线服务的地图属性

工作小提琴 

 函数mapLocation（）{
 var directionsDisplay; 
 var directionsService = new google.maps.DirectionsService（）; 
 var map; 
 
函数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）; 
 
 
函数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 from+ start.toUrlValue（6）+to+ end.toUrlValue（6）+failed：+ status ）; 
} 
}）; 
} 
 
 google.maps.event.addDomListener（window，'load'，initialize）; 
} 
 mapLocation（）;

工作程式码片段： 

  function mapLocation（）{var directionsDisplay; var directionsService = new google.maps.DirectionsService（）; var map;函数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（地图）; 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（）;  

  html，body，＃map-canvas {height：100％;宽度：100％; margin：0px; < script src =https：//


Hi I am trying to draw a route map between two markers using javascript. I have tried various examples found online but my map is not loading while trying out different examples. I am unable to figure out the cause of the error. My map just does not load.

I am trying to draw a route for the below two markers.

    <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>

Can someone please help me draw a route between the two markers?

解决方案

Two comments:

  1. your question asks about directions between markers, but there are no markers in the code you posted. There are two positions defined by LatLng objects. The directions service will add markers at the start and the end of the route automatically. If you want to get directions between two markers, you will need to add them to your map first.
  2. There is no call to calcRoute in the posted code (I added a "route" button which causes it to be executed).

Issues:

  1. the directions service is returning ZERO_RESULTS for your original points, so no route is drawn. Add error handling in the else case for the if (status == "OK") test to see that.
  2. if I change the points to a place that can actually be routed (Palo Alto, CA), the directions service route isn't being rendered because you never set the "map" property of the directions service

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

working code snippet:

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

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

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

这篇关于如何在谷歌地图中的两个标记之间绘制路线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆