问题描述
目标是在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时电话上的浏览器的安全性。