Google Maps API v3に表示される縮尺を桁数（英国）に変更するには

Question

地図を表示するだけで、経路やルートは表示されません。 mapOptions = {... scaleControl：true、...}でコントロールを追加することはできますが、スケールの単位をimperialに変更することに関するドキュメントは見つかりませんでした。

ここに私のコードです：

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

スケール制御ディスプレイがメトリックと皇帝の両方のユニットを示し（example from documentation）

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

Answer 3

[OK]をので、私はこれを思い付いたが、私は唯一の短期的な修正としてこれを使用します。

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（）」を使用する問題を引き起こす可能性があると聞きました。

Answer 4

いくつかのズームレベルで「M」の代わりキロ」の使用されているので、メモリリークによって答えはすべてのケースでは動作しません。 RegExp処理が必要です（また、彼のソリューションにはjQueryが必要です）。私はRegExpを（m | km）に広げてinnerHTMLに変更した後、Xion Darkのソリューションを手に入れることができました。FirefoxでinnerTextを使ってもうまくいきませんでした。 ）。これは、Firefox 31とChrome 37とIE 10.のsetTimeoutで働く

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

（私は必要なマップID「map_canvas」ハードワイヤードました）

私の完全なソリューションは、それが実行されている防ぐために含まれていますこれはクルージングのようなものなので、GMがスケールを変えるべきで、スケールユニットがいつかは現在のメトリックユニットの代わりに望みのフィート/ミル単位で始まる場合には機能しなくなる可能性があるからです。

注：IE 10でこれを最初にテストするときに、白いボックスが目盛り領域に表示されました。私はまずそれが私のコードによると思ったが、コードを削除したときも同じことが起こった。最後に私はそれが間違ってオンになっている - 互換性ビュー（IE 7エミュレータではめったにIEを使用しないので知らなかった）によると判断しました。スケールバーは正しく表示されません。 IE 10を「標準」モードで使用すると、GMスケールが正しく表示されました（そして私のコードは機能しました）。私は

Answer 5

だっただけで、同じことに遭遇すると混乱するかもしれませんIEの多くの経験のない任意の他の人に警告したかった私は、Googleの課題トラッカーからここに来たhttps://issuetracker.google.com/issues/35825255

ここでの改善完全な例です」 」以前の記事から：

• は
• のみマッチする正規表現だけでJS（ないjqueryの）を使用しています 『ハックをクリックしてGoogleマップが完全に最初
0をロードすることができますのでキロ』と 『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>