首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >Google Maps API V3 :如何显示从点A到点B的方向(蓝线)?

Google Maps API V3 :如何显示从点A到点B的方向(蓝线)?
EN

Stack Overflow用户
提问于 2011-05-11 13:45:10
回答 5查看 201.6K关注 0票数 74

我有2个点的数据库纬度和经度,我想我的谷歌地图显示从点A到点B的路线…

就像我们看到的here一样(谷歌地图方向)

如何在地图上绘制方向线?

EN

回答 5

Stack Overflow用户

回答已采纳

发布于 2011-05-11 17:42:13

使用Google Maps API v3的directions service。它基本上与directions API相同,但被很好地打包在Google Maps API中,这也提供了一种方便的方法来在地图上轻松呈现路线。

有关在地图上呈现方向路线的信息和示例可以在Google Maps API v3文档的rendering directions section中找到。

票数 57
EN

Stack Overflow用户

发布于 2013-05-11 03:06:36

在您的例子中,这里是一个使用directions service的实现。

代码语言:javascript
复制
function displayRoute() {

    var start = new google.maps.LatLng(28.694004, 77.110291);
    var end = new google.maps.LatLng(28.72082, 77.107241);

    var directionsDisplay = new google.maps.DirectionsRenderer();// also, constructor can get "DirectionsRendererOptions" object
    directionsDisplay.setMap(map); // map should be already initialized.

    var request = {
        origin : start,
        destination : end,
        travelMode : google.maps.TravelMode.DRIVING
    };
    var directionsService = new google.maps.DirectionsService(); 
    directionsService.route(request, function(response, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
        }
    });
}
票数 19
EN

Stack Overflow用户

发布于 2016-12-16 03:18:11

代码语言:javascript
复制
  // First Initiate your map. Tie it to some ID in the HTML eg. 'MyMapID'
  var map = new google.maps.Map(
    document.getElementById('MyMapID'),
    {
      center: {
        lat: Some.latitude,
        lng: Some.longitude
      }
    }
  );
  // Create a new directionsService object.
  var directionsService = new google.maps.DirectionsService;
    directionsService.route({
      origin: origin.latitude +','+ origin.longitude,
      destination: destination.latitude +','+ destination.longitude,
      travelMode: 'DRIVING',
    }, function(response, status) {
      if (status === google.maps.DirectionsStatus.OK) {
        var directionsDisplay = new google.maps.DirectionsRenderer({
          suppressMarkers: true,
          map: map,
          directions: response,
          draggable: false,
          suppressPolylines: true, 
          // IF YOU SET `suppressPolylines` TO FALSE, THE LINE WILL BE
          // AUTOMATICALLY DRAWN FOR YOU.
        });

        // IF YOU WISH TO APPLY USER ACTIONS TO YOUR LINE YOU NEED TO CREATE A 
        // `polyLine` OBJECT BY LOOPING THROUGH THE RESPONSE ROUTES AND CREATING A 
        // LIST
        pathPoints = response.routes[0].overview_path.map(function (location) {
          return {lat: location.lat(), lng: location.lng()};
        });

        var assumedPath = new google.maps.Polyline({
         path: pathPoints, //APPLY LIST TO PATH
         geodesic: true,
         strokeColor: '#708090',
         strokeOpacity: 0.7,
         strokeWeight: 2.5
       });

       assumedPath.setMap(map); // Set the path object to the map
票数 7
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/5959788

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档