Jak zmienić skalę wyświetlaną w Google Maps API v3 na jednostki imperialne (mile)

Question

Po prostu wyświetlam mapę, bez trasowania i wskazówek. Mogę dodać kontrolę za pomocą mapOptions = {... scaleControl: true, ...}, ale nie mogłem znaleźć żadnej dokumentacji dotyczącej zmiany jednostek skali na imperialną.

Oto mój kod:

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

Uwaga: ControlPosition wydaje się nie do pracy, zawsze idzie na dole po prawej stronie.

Wskaźnik kontroli

Answer 1

Spróbuj tego rozwiązania tymczasowego (tutaj jest w postaci gotowej funkcji):

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

Answer 2

Skala pokazuje zarówno metrycznych i angielskich jednostek (example from documentation)

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

Answer 3

Ok, więc wpadłem na to, ale chciałbym używać tego jako jedyny krótki termin poprawki.

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

To działało w chromie, ale słyszałem, że ".Kliknij() może spowodować problemy w jakiejś przeglądarce, które używają„.onclick()”zamiast.

Answer 4

Odpowiedź przez Przeciek pamięci nie działa we wszystkich przypadkach, ponieważ w niektórych poziomach powiększenia „m” jest stosowany zamiast "km ", wymagający leczenia RegExp (a jego rozwiązanie wymaga jQuery). Udało mi się znaleźć rozwiązanie Xion Dark do pracy po rozszerzeniu RegExp do (m | km) i zmianie na innerHTML - użycie innerText nie działało dla mnie w Firefoksie (i może wyjaśnić, dlaczego James Bell nie mógł uzyskać tej odpowiedzi do pracy).

Moja kompletne rozwiązanie (gdzie mam hard-wired wymagana mapa 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); 

To działa w Firefoksie i Chrome 31 37 oraz IE 10. setTimeout jest włączone, aby zapobiec to działa w nieskończoność, ponieważ jest to rodzaj kludge i może przestać działać, gdyby GM zmienił swoją skalę html - i na wypadek, gdyby jednostki skali mogły pewnego dnia rozpoczynać się od pożądanych jednostek ft/mi zamiast aktualnych jednostek metrycznych.

Uwaga: przy pierwszym testowaniu z IE 10 jako białym pudełkiem pojawiło się w obszarze skali. Najpierw myślałem, że to z powodu mojego kodu, ale to samo miało miejsce, gdy usunąłem kod. W końcu stwierdziłem, że było to spowodowane "Widok zgodności" (emulator IE 7, którego nie znałem, ponieważ rzadko używam IE), który został przypadkowo włączony - dla którego pasek skali nie wyświetla się poprawnie. Używając IE 10 w trybie "standardowym", skala GM wyświetliła się poprawnie (a mój kod zadziałał).Po prostu chciał ostrzec innych, bez większego doświadczenia IE, który może działać na tej samej rzeczy i się mylić, jak byłem

Answer 5

Przyjechałem tu z Tracker Emisji Google https://issuetracker.google.com/issues/35825255

Oto ulepszona pełny przykładem " kliknij hack”z wcześniejszych wypowiedzi:

• wykorzystuje zaledwie js (jQuery) nie
• regex tylko dopasować "km" i "m"
• czeka 1 sekundę, Google Map można w pełni załadować pierwszy

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