谷歌地圖顯示路線

根據谷歌地圖我可以規劃一條路線，跨過幾個航點。這裏解釋：http：//code.google.com/intl/nl-NL/apis/maps/documentation/javascript/services.html#Routes谷歌地圖顯示路線

現在，api希望我添加像這樣的路標：

location: waypoints

所以航點是一個數組至極我必須分配給位置：參數但是從香港專業教育學院在他們充滿位置的字符串數組演示觀察。我想知道是否有可能傳遞經緯度而不是字符串？

更新：這是我嘗試創建路線的部分。我已經把整個環位置大致相同的值，但現在如果我使用的變量值既不

function calcRoute() { 

    var waypts = []; 

    for (var i in owt.stores.spotStore.data.map) { 
     waypts.push({ 
      location: new google.maps.LatLng(12.3, -33.6), 
      stopover:true 
     }); 
     console.log(waypts); 
    } 
    var request = { 
     origin: new google.maps.LatLng(50.82788, 3.26499), 
     destination: new google.maps.LatLng(50.82788, 3.26499), 
     waypoints: waypts, 
     optimizeWaypoints: true, 
     travelMode: google.maps.DirectionsTravelMode.DRIVING 
    }; 

    directionsService.route(request, function(response, status) { 
     if (status == google.maps.DirectionsStatus.OK) { 
      directionsDisplay.setDirections(response); 
     } 
    }); 
} 
;

來源

2011-03-24 vincent

按照API reference：

阿爲DirectionsWaypoint代表起點和終點之間的位置，通過該行程應該被路由。

位置 LatLng | string航點位置。 可以是地址字符串或 LatLng。可選

所以創建一個帶有經緯度長值的新的航點應該是如下

return { 
    location:new google.maps.LatLng(12.3, -33.6), 
    stopover:true 
};

來源

2011-03-24 23:13:35

好，我做到了這一點，但是狀態一直說ZERO_RESULTS，我已經更新我的職務，以顯示其中i編譯路由功能，也許你可以有看看是否有什麼問題？這只是代碼的最後一部分，因爲除了這部分以外，其他部分都正常工作。 – vincent 2011-03-24 23:22:52

爲了舉例說明你如何創建一個新點，例如喬納森上面指出的那樣，我把值放在'（12.3，-33.6）'中，這些座標位於大西洋中部！這可能是你沒有得到結果的原因。另外，在你的代碼示例中，你的起源和目標是相同的，這是設計，對嗎？ – 2011-03-25 03:39:23

的方式點可以是一個字符串或經緯度ID不起作用。

http://code.google.com/intl/nl-NL/apis/maps/documentation/javascript/services.html#Directions

特別是：

航點[]（可選）指定一個陣列DirectionsWaypoints的。航點通過路線通過指定的位置來改變路線。甲航點被指定爲對象字面與下表所示的字段：
location specifies the location of the waypoint, either as a LatLng or as 
可進行地理編碼的字符串。中途停留是一個布爾值，指示該航點是路線上的停靠點，其效果爲將路線分爲兩條路線。

（有關航點的詳細信息，看到在路線中使用路標下方。）

編輯

您的航點是不是有效的路由，即它們在水中 - 嘗試定心地圖(12, -33.6)。

這是一個使用方式點的示例（不是最漂亮的代碼，但它是一個例子;））。

<!doctype html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title></title> 
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> 
    <script type="text/javascript"> 

     var myRouter = { 
      map_: null, 
      directionsHelper_: null, 

      stores: [ 
        {name: "store1", location: new google.maps.LatLng(50.82788, 3.76499)}, 
        {name: "store2", location: new google.maps.LatLng(51.02788, 3.9)} 
       ], 

      calcRoute: function() { 

       var waypts = []; 

       for (var i in this.stores) { 
        waypts.push({ 
         location: this.stores[i].location, 
         stopover:true 
        }); 
       } 
       var request = { 
        origin: new google.maps.LatLng(50.82788, 3.26499), 
        destination: "Antwerp", 
        waypoints: waypts, 
        optimizeWaypoints: true, 
        travelMode: google.maps.DirectionsTravelMode.DRIVING 
       }; 

       var _SELF = this; 
       this.directionsHelper_.route(request, function(response, status) { 
        if (status == google.maps.DirectionsStatus.OK) { 
         _SELF.directionsDisplay_.setDirections(response); 
         return; 
        } 
        console.log('Directions Status: ' + status); 
       }); 
      }, 

      init: function(mapid) { 

       this.directionsHelper_ = new google.maps.DirectionsService(); 
       this.directionsDisplay_ = new google.maps.DirectionsRenderer(); 

       var center = new google.maps.LatLng(50.82788, 3.26499); 
       var myOptions = { 
        zoom:7, 
        mapTypeId: google.maps.MapTypeId.ROADMAP, 
        center: center 
       } 
       this.map_ = new google.maps.Map(document.getElementById(mapid), myOptions); 
       this.directionsDisplay_.setMap(this.map_); 

       this.calcRoute(); 
      } 
     }; 

     $(document).ready(function() { 
      myRouter.init('map'); 
     }); 

    </script> 
    <style type="text/css"> 
     #map { 
      height: 500px; 
      width: 600px; 
      border: 1px solid #000; 
     } 
    </style> 
</head> 
<body> 
    <div id="map"></div> 
</body> 
</html>

來源

2011-03-24 23:11:07 Jonathan

根據谷歌文檔的航點可以是一個字符串或一個經緯度對象。 http://code.google.com/apis/maps/documentation/javascript/reference.html#DirectionsWaypoint

這裏是利用經緯度

爲例

<!DOCTYPE html> 
<html> 
    <head><meta name="viewport" content="initial-scale=1.0, user-scalable=no"/><meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
     <title>Google Maps JavaScript API v3 Example: Directions Waypoints</title> 
     <link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" /> 
     <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"> 
     </script> 
     <script type="text/javascript"> 
    var directionDisplay; 
    var directionsService = new google.maps.DirectionsService(); 
    var map; 

    function initialize() { 
     directionsDisplay = new google.maps.DirectionsRenderer(); 
     var chicago = new google.maps.LatLng(-40.321, 175.54); 
     var myOptions = { 
      zoom: 6, 
      mapTypeId: google.maps.MapTypeId.ROADMAP, 
      center: chicago 
     } 
     map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
     directionsDisplay.setMap(map); 
     calcRoute(); 
    } 

    function calcRoute() { 

     var waypts = []; 


stop = new google.maps.LatLng(-39.419, 175.57) 
     waypts.push({ 
      location:stop, 
      stopover:true}); 


     start = new google.maps.LatLng(-40.321, 175.54); 
     end = new google.maps.LatLng(-38.942, 175.76); 
     var request = { 
      origin: start, 
      destination: end, 
      waypoints: waypts, 
      optimizeWaypoints: true, 
      travelMode: google.maps.DirectionsTravelMode.WALKING 
     }; 
     directionsService.route(request, function(response, status) { 
      if (status == google.maps.DirectionsStatus.OK) { 
       directionsDisplay.setDirections(response); 
       var route = response.routes[0]; 

      } 
     }); 
    } 
     </script> 
    </head> 
    <body onload="initialize()"> 
     <div id="map_canvas" style="width:70%;height:80%;"> 
     </div> 
     <br /> 
     <div> 

     </div> 
    </body> 
</html>

來源

2011-03-24 23:21:51 Michal

上面的代碼不起作用。沒有錯誤，沒有地圖。 – htm11h 2014-02-07 20:59:40

谷歌地圖顯示路線

回答

相關問題