如何使用Android手机上的本地Google Maps .html文件平移到当前位置？

如何解决如何使用Android手机上的本地Google Maps .html文件平移到当前位置？

目标是在Android手机上拥有一个本地.html文件，该文件可以通过标准的网络浏览器打开，该浏览器具有可平移至Google Maps当前位置的功能。目前，平移到当前位置可以在Android手机上的mi浏览器上运行，但最终用户希望它可以在标准网络浏览器（例如Chrome）上运行。

预期结果：顶部的“平移到当前位置”按钮将Google Map平移到手机的当前位置。 实际结果：在chrome，firefox，边缘网络浏览器上，可以打开html文件，但是按钮无法平移到手机上的当前位置。在笔记本电脑的Chrome浏览器中，按钮会平移到当前位置。在Android手机上的mi浏览器（来自Xiaomi）上，按钮会响应并平移到当前位置。

由于我是HTML / JS的初学者，所以我不知道该错误是否可以在代码中解决，也可以通过Web浏览器中的设置解决。最好有一种方法可以查看具有“ pan to current location”功能的Android手机上的本地html，并了解为什么它不起作用。

如果您要运行代码，则应检索Google Maps API密钥。这是示例代码：

<!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}&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,map.getCenter());
    }
  });

}

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

解决方法

当前的解决方案是.html通过Azure作为网站发布。该网站可以通过浏览器在电话上访问，并且具有“平移到当前位置”功能。

javascript代码无法通过电话上的本地.html文件运行的最可能的原因是在处理本地html / javascript时电话上的浏览器的安全性。

如何使用Android手机上的本地Google Maps .html文件平移到当前位置？

如何解决如何使用Android手机上的本地Google Maps .html文件平移到当前位置？

解决方法

相关推荐