将Google地图上的单位从公制更改为英制 [英] Changing the units on google maps from metric to imperial

查看:804
本文介绍了将Google地图上的单位从公制更改为英制的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有以下代码:

 < script> 

var rendererOptions = {
draggable:false
};
var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);;
var directionsService = new google.maps.DirectionsService();
var map;

var England = new google.maps.LatLng(53.7415,1.6860);

函数initialize(){

var mapOptions = {
zoom:6,
mapTypeId:google.maps.MapTypeId.ROADMAP,
中心:英格兰
};
map = new google.maps.Map(document.getElementById('map_canvas'),mapOptions);
map.setTilt(45);
directionsDisplay.setMap(map)
directionsDisplay.setPanel(document.getElementById('directionsPanel'));

google.maps.event.addListener(directionsDisplay'directions_changed',function(){
computeTotalDistance(directionsDisplay.directions);
});

calcRoute();


函数calcRoute(){

var request = {
origin:'postcode',
destination:'postcode',
航点:[{location:'waypoint postcode'},{location:'waypoint postcode'},{location:'waypoint postcode'}],
travelMode:google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request,function(response,status){
if(status == google.maps.DirectionsStatus.OK){
directionsDisplay.setDirections(response);
}
});
}

函数computeTotalDistance(结果){
var total = 0;
var myroute = result.routes [0];
for(i = 0; i< myroute.legs.length; i ++){
total + = myroute.legs [i] .distance.value;
}
total = total / 1000.
document.getElementById('total')。innerHTML = total +'km';
}
< / script>
< / head>
< body onload =initialize()>
< div id =map_canvasstyle =float:left; width:70%; height:100%>< / div>
< div id =directionsPanelstyle =float:right; width:30%; height 100%>
< p>总距离:< span id =total>< / span>< / p>
< / div>

使用google api的方向服务,地图显示出始点和目的地,并且沿途有特定的路标。方向面板以公制单位显示所有距离。如何改变它,以便所有距离以英制单位显示,例如英里,英尺? 解决方案

来自文档


单位制



默认情况下,使用原产国的单位
系统计算和显示路线或地区。 (注意:起点用纬度/经度坐标表示
,而不是地址总是
默认为公制单位)。例如,从Chicago,IL到
Toronto,ONT的路线将以英里显示结果,而反向路线
将以千米为单位显示结果。您可以通过使用UnitSystem值之后的
之一在请求中明确设置一个单位系统来重写此单位系统



  • UnitSystem.METRIC 指定度量系统的用法。使用公里显示距离。
  • UnitSystem.IMPERIA L指定帝国(英语)系统的使用情况。注意:此单位系统设置仅影响显示给
    用户的文字。 路线结果还包含距离值,未显示给用户
    ,它们总是以米为单位。



I have the following code:

<script>

      var rendererOptions = {
        draggable: false
      };
      var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);;
      var directionsService = new google.maps.DirectionsService();
      var map;

      var England = new google.maps.LatLng(53.7415, 1.6860);

      function initialize() {

        var mapOptions = {
          zoom: 6,
          mapTypeId: google.maps.MapTypeId.ROADMAP,
          center: England
        };
        map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
        map.setTilt(45);
        directionsDisplay.setMap(map)
        directionsDisplay.setPanel(document.getElementById('directionsPanel'));

        google.maps.event.addListener(directionsDisplay, 'directions_changed', function() {
          computeTotalDistance(directionsDisplay.directions);
        });

        calcRoute();
      }

      function calcRoute() {

        var request = {
          origin: 'postcode',
          destination: 'postcode',
          waypoints:[{location: 'waypoint postcode'}, {location: 'waypoint postcode'}, {location: 'waypoint postcode'}],
          travelMode: google.maps.DirectionsTravelMode.DRIVING
        };
        directionsService.route(request, function(response, status) {
          if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
          }
        });
      }

      function computeTotalDistance(result) {
        var total = 0;
        var myroute = result.routes[0];
        for (i = 0; i < myroute.legs.length; i++) {
          total += myroute.legs[i].distance.value;
        }
        total = total / 1000.
        document.getElementById('total').innerHTML = total + ' km';
      }
    </script>
  </head>
  <body onload="initialize()">
    <div id="map_canvas" style="float:left;width:70%; height:100%"></div>
    <div id="directionsPanel" style="float:right;width:30%;height 100%">
    <p>Total Distance: <span id="total"></span></p>
    </div>

The map, shows an origin and destination, with certain waypoints along the way, using google api's direction service. The directions panel shows all distances in metric units. How do I change it, so that all distances are shown in imperial units i.e miles,feet?

解决方案

From the docs

Unit Systems

By default, directions are calculated and displayed using the unit system of the origin's country or region. (Note: origins expressed using latitude/longitude coordinates rather than addresses always default to metric units.) For example, a route from "Chicago, IL" to "Toronto, ONT" will display results in miles, while the reverse route will display results in kilometers. You may override this unit system by setting one explicitly within the request using one of the following UnitSystem values:

  • UnitSystem.METRIC specifies usage of the metric system. Distances are shown using kilometers.
  • UnitSystem.IMPERIAL specifies usage of the Imperial (English) system. Distances are shown using miles.

Note: this unit system setting only affects the text displayed to the user. The directions result also contains distance values, not shown to the user, which are always expressed in meters.

这篇关于将Google地图上的单位从公制更改为英制的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆