16

我只是显示地图，没有路线或方向。我可以使用 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 似乎不起作用，总是在右下角。

4

5 回答 5

9

试试这个临时解决方案（这里是一个准备好的函数）：

var scaleInterval = setInterval(function() {
  var scale = $(".gm-style-cc:not(.gmnoprint):contains(' km')");
  if (scale.length) {
    scale.click();
    clearInterval(scaleInterval);
  }
}, 100);
于 2014-01-30T15:21:31.433 回答
8

Memory Leak 的答案并不适用于所有情况，因为在某些缩放级别使用“m”而不是“km”，需要 RegExp 处理（他的解决方案需要 jQuery）。在将 RegExp 扩展为 (m|km) 并更改为 innerHTML 后，我能够让 Xion Dark 的解决方案工作 - 在 Firefox 中使用 innerText 对我不起作用（并且可以解释为什么 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 是为了防止它无限期运行，因为这有点像一个杂物，如果 GM 更改其比例 html 可能会停止工作 - 万一有一天比例单位从所需的 ft/mi 单位，而不是当前的公制单位。

注意：当第一次使用 IE 10 进行测试时，比例区域中出现了一个白框。我首先认为这是由于我的代码，但当我删除代码时也发生了同样的情况。最后，我确定这是由于无意中打开了“兼容性视图”（一个我不知道的 IE 7 模拟器，因为我很少使用 IE） - 为此，比例尺无法正确显示。在“标准”模式下使用 IE 10，GM 比例确实正确显示（并且我的代码确实有效）。只是想警告任何没有太多 IE 经验的人可能会遇到同样的事情并感到困惑，就像我一样

于 2014-09-01T07:22:51.910 回答
5

我来自 Google 问题跟踪器https://issuetracker.google.com/issues/35825255

这是早期帖子中“click hack”的改进完整示例：

  • 只使用 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>

于 2017-12-05T19:09:20.373 回答
3

比例控制显示同时显示公制和英制单位（来自文档的示例）

ScaleControl 位置将无法通过视觉刷新来控制 (google.maps.visualRefresh = true;)

于 2013-08-05T21:33:29.887 回答
1

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

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()' 的浏览器出现问题。

于 2013-08-07T20:41:37.813 回答