Блог

Главная - Вопросы по программированию - Как перейти к текущему местоположению с помощью локального файла Google Maps .html на телефоне Android?

Как перейти к текущему местоположению с помощью локального файла Google Maps .html на телефоне Android?

#javascript #android #html #google-maps #currentlocation

#javascript #Android #HTML #google-карты #currentlocation

Вопрос:

Цель состоит в том, чтобы иметь локальный файл .html на телефоне Android, который можно открыть с помощью стандартного веб-браузера, который имеет функциональность для перехода к текущему местоположению на Картах Google. В настоящее время панорамирование к текущему местоположению работает в mi browser на телефоне Android, но конечный пользователь хочет, чтобы оно работало в стандартных веб-браузерах (например, Chrome).

Ожидаемый результат: кнопка «Перейти к текущему местоположению» вверху перемещает Карты Google к текущему местоположению телефона. Фактический результат: в Chrome, firefox, edge веб-браузере HTML-файл можно открыть, но кнопка не переходит к текущему местоположению на телефоне. В браузере Chrome на ноутбуке кнопка выполняет переход к текущему местоположению. В Mi browser (от Xiaomi) на телефоне Android кнопка реагирует и переходит к текущему местоположению.

Поскольку я новичок в HTML / JS, я понятия не имею, можно ли исправить эту ошибку в коде или ее можно исправить с помощью настроек в веб-браузерах. Было бы неплохо получить способ просмотра локального html на телефоне Android с помощью функции «переход к текущему местоположению» и понять, почему это не сработало.

Если вы хотите запустить код, необходимо получить ключ API Карт Google. Вот пример кода:

 <!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map-canvas { height: 100% }
    </style>
    <script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?key={GOOGLE_MAPS_API_KEY}amp;sensor=true">
    </script>
    <script type="text/javascript">

function initialize() {

var mapOptions = {
    zoom: 15,
    center: new google.maps.LatLng(51.924003,4.4601963),
    mapTypeId: google.maps.MapTypeId.HYBRID }
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
infoWindow = new google.maps.InfoWindow();
const locationButton = document.createElement("button");
  locationButton.textContent = "Pan to Current Location";
  locationButton.classList.add("custom-map-control-button");
  map.controls[google.maps.ControlPosition.TOP_CENTER].push(locationButton);
  locationButton.addEventListener("click", () => {
    // Try HTML5 geolocation.
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(
        (position) => {
          const pos = {
            lat: position.coords.latitude,
            lng: position.coords.longitude,
          };
          infoWindow.setPosition(pos);
          infoWindow.setContent("Location found.");
          infoWindow.open(map);
          map.setCenter(pos);
        },
        () => {
          handleLocationError(true, infoWindow, map.getCenter());
        }
      );
    } else {
      // Browser doesn't support Geolocation
      handleLocationError(false, infoWindow, map.getCenter());
    }
  });

}

google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
  <div id="map-canvas"/>
  </body>
</html>

Ответ №1:

Текущее решение заключается в том, что .html публикуется как веб-сайт через Azure. К этому веб-сайту можно получить доступ с телефона через браузер, и у него есть функция «переход к текущему местоположению».

Наиболее вероятной причиной, по которой код javascript не работал через локальный файл .html на телефоне, является безопасность браузеров на телефонах при работе с локальным html / javascript.