Как изменить масштаб, отображаемый в API Карт Google v3, на имперские (мили) единицы

Я просто показываю карту без маршрутизации или маршрутов. Я могу добавить элемент управления с 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 не работает, он всегда идет вправо.

Ответы

Ответ 1

Попробуйте это временное решение (здесь оно готово):

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

Ответ 2

Ответ на "Утечка памяти" не работает для всех случаев, так как при некоторых уровнях масштабирования вместо "км" используется "м", для чего требуется обработка RegExp (и его решение требует jQuery). Я смог получить решение от Xion Dark для работы после расширения RegExp до (m | km) и перехода на innerHTML - использование innerText не помогло мне в Firefox (и может объяснить, почему Джеймс Белл не смог получить этот ответ работать).

Мое полное решение (там, где я жестко подключил нужный идентификатор карты "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 - и в случае, когда масштабные единицы когда-нибудь начните с нужных единиц ft/mi вместо текущих единиц измерения.

Примечание: при первом тестировании с IE 10 в виде белого ящика появляется область масштабирования. Сначала я подумал, что это связано с моим кодом, но то же самое произошло, когда я удалил код. Наконец, я решил, что это связано с непреднамеренным включением "Совместимости" (эмулятор IE 7, о котором я не знал, поскольку я редко использую IE) - для чего шкала масштаба отображается неправильно. Используя IE 10 в "стандартном" режиме, шкала GM отображалась правильно (и мой код действительно работал). Просто хотел предупредить всех других без особого опыта IE, которые могут столкнуться с тем же и запутаться, поскольку я был

Ответ 4

Хорошо, поэтому я придумал это, но я бы использовал это как только короткое исправление.

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()".

Ответ 5

Я пришел сюда из Google Issue Tracker https://issuetracker.google.com/issues/35825255

Здесь приведен полный полный пример "click hack" из более ранних сообщений:

  • использует только js (не JQuery)
  • regex, чтобы соответствовать только "km" и "m"
  • ждет 1 секунду, поэтому Google Map может полностью загрузить первую.

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