使用JS和HTML的Goole Maps API(从位置A到位置b的方向)

时间:2017-05-30 10:12:41

标签: javascript html json google-maps google-maps-api-3

我想这样做:

  1. 获取从A地到B地的路线
  2. 这两个地方之间的距离
  3. 持续时间(流量)
  4. 因此我有以下代码

    var request = {
            origin:location1, 
            destination:location2,
            travelMode: google.maps.DirectionsTravelMode.DRIVING,
    
    
        };
        directionsService.route(request, function(response, status) 
        {
            if (status == google.maps.DirectionsStatus.OK) 
            {
                directionsDisplay.setDirections(response);
                distance = "Die Entfernung zur Arbeit entspricht: "+ "<b>" +response.routes[0].legs[0].distance.text +"</b>";
                distance += "<br/>Die vorausschauliche Fahrzeit betr&auml;gt: "+ "<b>"+response.routes[0].legs[0].duration_in_traffic.text +"</b>";
                document.getElementById("distance_road").innerHTML = distance;
            }
    
        });
    

    在此代码示例中,我无法获取duration_in_traffic。我想是因为我没有prmium计划?

    所以我在想另一种方式。此URL为我提供了一个JSON对象作为响应。此JSON对象包含duration_in_traffic。

    https://maps.googleapis.com/maps/api/directions/json?origin=Bellheim&destination=Voeklingen&departure_time=now&key=MYKEY
    

    但我不知道如何在javascript中获取json对象,而且我不知道如何从json对象中提取信息。

    你能帮我解决这个问题吗?

1 个答案:

答案 0 :(得分:0)

查看此处提供的文档,我假设您收到以下JSON

{
   "destination_addresses" : [ "New York, NY, USA" ],
   "origin_addresses" : [ "Washington, DC, USA" ],
   "rows" : [
      {
         "elements" : [
            {
               "distance" : {
                  "text" : "225 mi",
                  "value" : 361715
               },
               "duration" : {
                  "text" : "3 hours 49 mins",
                  "value" : 13725
               },
               "status" : "OK"
            }
         ]
      }
   ],
   "status" : "OK"
}

如果以上 响应,那么您可以使用<var_name>.rows.elements.distance

来获取距离
  

查看你的图片后

您可以使用distance_in_traffic

访问<var_name>.routes.0.legs.0.distance.<text/value>