如何将Google Maps API v3中显示的比例更改为英制(英里)单位

Question

我只是显示一张地图,没有路线或方向.我可以使用mapOptions = {... scaleControl:true,...}添加控件但我找不到有关将比例单位更改为英制的文档.

这是我的代码:

var mapOptions = {
    zoom: 4,
    mapTypeControl: false,
    center: new google.maps.LatLng(38.8282, -98.5795),
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    scaleControl: true,
    scaleControlOptions: {position: google.maps.ControlPosition.BOTTOM_LEFT}
};
google.maps.visualRefresh = true;

map = new google.maps.Map(document.getElementById('map'),mapOptions);   

注意:ControlPosition似乎不起作用,始终向右下方.

Answer 1

试试这个临时解决方案(这里是一个就绪函数):

var scaleInterval = setInterval(function() {
  var scale = $(".gm-style-cc:not(.gmnoprint):contains(' km')");
  if (scale.length) {
    scale.click();
    clearInterval(scaleInterval);
  }
}, 100);

Answer 2

Memory Leak的答案并不适用于所有情况,因为在某些缩放级别使用"m"代替"km",需要RegExp处理(他的解决方案需要jQuery).在将RegExp扩展到(m | km)并更改为innerHTML之后,我能够得到Xion Dark的解决方案 - 使用innerText在Firefox中对我不起作用(并且可以解释为什么James Bell无法得到工作的答案) ).

我的完整解决方案(我已经硬连接了所需的地图ID"map_canvas")

var scaleInterval = setInterval( function() {
  var spn = document.getElementById('map_canvas').getElementsByTagName('span');
  var pattern = /\d+\s+(m|km)/i;
  for(var i in spn) {
    if ( pattern.test(spn[i].innerHTML) ) {
      spn[i].click();
      clearInterval(scaleInterval);
    }
  }
}, 500);
setTimeout( function() { clearInterval(scaleInterval) }, 20000 );

这适用于Firefox 31和Chrome 37以及IE 10.包含setTimeout是为了防止它无限期运行,因为这有点像kludge并且如果GM改变他们的规模html可能会停止工作 - 并且如果有一天规模单位开始所需的英尺/英里单位,而不是当前的公制单位.

注意:首次使用IE 10进行测试时,白色框出现在比例区域.我首先想到的是由于我的代码,但是当我删除代码时也是如此.最后我确定它是由于"Compatability View"(IE 7模拟器,我不知道因为我很少使用IE)而无意中打开 - 为此,比例尺无法正确显示.在"标准"模式下使用IE 10,GM刻度确实正确显示(我的代码确实有效).只是想在没有IE经验的情况下警告任何其他人,因为我可能遇到同样的事情而感到困惑

Answer 3

我从 Google 问题跟踪器https://issuetracker.google.com/issues/35825255来到这里

这是早期帖子中“点击黑客”的改进完整示例：

• 只使用 js（不是 Jquery）
• 正则表达式只匹配“km”和“m”
• 等待 1 秒，以便谷歌地图可以首先完全加载

#map {
  height: 100%;
}
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<div id="map"></div>
<script>
  var map;
  function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
      center: { lat: 42.331534, lng: -83.046651 },
      zoom: 12,
      scaleControl: true
    });

    //START hack to set scale to miles/imperial instead of km/metric:
    window.setTimeout(function() {
      var spn = document.getElementById("map").getElementsByClassName("gm-style-cc");
      for (var i in spn) {
        //look for km or m in innerText via regex https://regexr.com/3hiqa
        if ((/\d\s?(km|(m\b))/g).test(spn[i].innerText)) {
          spn[i].click();
        }
      }
    }, 1000);
    //END hack to set scale to miles/imperial instead of km/metric

  }
</script>
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap" async defer></script>