如何在Android手机上使用本地Google Maps .html文件平移到当前位置？
[英]How to pan to current location with local Google Maps .html file on android phone?
问题描述
The goal is to have a local .html file on an android phone, that can be opened with a standard web browser, which has functionality to pan to current location on Google Maps.
目标是在 Android 手机上拥有一个本地 .html 文件，可以使用标准网络浏览器打开该文件，该浏览器具有平移到 Google 地图上当前位置的功能。 Currently the panning to current location works on mi browser on android phone, but the end user wants it to work on standard web browsers (eg Chrome).目前，平移到当前位置适用于 Android 手机上的 mi 浏览器，但最终用户希望它适用于标准网络浏览器（例如 Chrome）。
Expected result : button "Pan to current location" on top pans the Google Maps to current location of phone.预期结果：顶部的“平移到当前位置”按钮将 Google 地图平移到手机的当前位置。 Actual result : on chrome, firefox, edge web browser the html file can be opened, but the button does not pan to current location on the phone.实际结果：在 chrome、firefox、edge web 浏览器上可以打开 html 文件，但按钮不会平移到手机上的当前位置。 In the chrome browser on laptop the button does pan to current location.在笔记本电脑上的 chrome 浏览器中，按钮会平移到当前位置。 On mi browser (from Xiaomi) on an android phone the button does respond and pan to current location.在 Android 手机上的 mi 浏览器（来自小米）上，按钮确实响应并平移到当前位置。
Since I'm a beginner in HTML/JS, I have no idea if this error can be fixed in the code or it can be fixed with settings in the web browsers.由于我是 HTML/JS 的初学者，我不知道这个错误是否可以在代码中修复，或者可以通过网络浏览器中的设置修复。 It would be nice to get a way to view the local html on android phone with "pan to current location" functionality, and to understand why it did not work.获得一种在具有“平移到当前位置”功能的 android 手机上查看本地 html 的方法，并了解它为什么不起作用会很好。
If you want to run the code, the Google Maps API key should be retrieved.如果要运行代码，应检索 Google Maps API 密钥。 Here is example code:这是示例代码：
<!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, infoWindow, map.getCenter());
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"/>
</body>
</html>
1 个解决方案
解决方案1
0 2020-10-23 14:47:50
Current solution is that the .html is published as a website via Azure.当前的解决方案是通过 Azure 将 .html 发布为网站。 This website can be accessed on the phone via browser, and does have the 'pan to current location' functionality.该网站可以通过浏览器在手机上访问，并且具有“平移到当前位置”的功能。
Most probable reason why the javascript code did not work via the local .html file on the phone, is security of browsers on phones when dealing with local html/javascript. javascript 代码无法通过手机上的本地 .html 文件运行的最可能原因是手机浏览器在处理本地 html/javascript 时的安全性。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.