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的答案并不适用于所有情况，因为在某些缩放级别＆＃34;米＆＃34;用来代替＆＃34; km＆＃34;，需要RegExp处理（他的解决方案需要jQuery）。在将RegExp扩展到（m | km）并更改为innerHTML之后，我能够通过Xion Dark获得解决方案 - 使用innerText在Firefox中对我不起作用（并且可以解释为什么James Bell无法得到工作的答案）。

我的完整解决方案（我已经硬连接了所需的地图ID＆＃34; map_canvas＆＃34;）

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进行测试时，白色框出现在比例区域。我首先想到的是由于我的代码，但是当我删除代码时也是如此。最后我确定这是由于＆＃34; Compatability View＆＃34; （由于我很少使用IE而不知道的IE 7模拟器）无意中打开 - 为此，比例尺无法正确显示。在＆＃34;标准＆＃34;中使用IE 10模式，GM标度确实正确显示（我的代码确实有效）。只是想在没有IE经验的情况下警告任何其他人，因为我可能遇到同样的事情而感到困惑，因为我是

Answer 3

比例控制显示屏显示公制和英制单位（example from documentation）

ScaleControl position will not be controllable with the visual refresh (google.maps.visualRefresh = true;)

Answer 4

我来自Google Issue Tracker https://issuetracker.google.com/issues/35825255

这是＆＃34;点击黑客＆＃34;的改进完整示例来自之前的帖子：

仅使用js（不是Jquery）
正则表达式仅匹配＆＃34; km＆＃34;和＆＃34; m＆＃34;
等待1秒，以便Google Map可以完全加载

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 5

好的，所以我想出了这个，但我会用它作为短期修复。

function switchScale(mapId){
    var spn = document.getElementById(mapId).getElementsByTagName("span");
    for(var i in spn){ 
        if( (/\d+\s?(mi|km)/g).test(spn[i].innerText) ){ 
            spn[i].click(); 
        } 
    }
}

这适用于Chrome，但我听说'.click（）'会导致某些使用'.onclick（）'的浏览器出现问题。

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

5 个答案: