如何使用 android 手机上的本地 Google Maps .html 文件平移到当前位置？
Posted
技术标签:
【中文标题】如何使用 android 手机上的本地 Google Maps .html 文件平移到当前位置？【英文标题】：How to pan to current location with local Google Maps .html file on android phone? 【发布时间】：2021-02-06 06:57:20 【问题描述】：目标是在 android 手机上创建一个本地 .html 文件，该文件可以使用标准网络浏览器打开，该浏览器具有在 Google 地图上平移到当前位置的功能。目前平移到当前位置可以在安卓手机的小米浏览器上运行，但最终用户希望它可以在标准网络浏览器（例如 Chrome）上运行。
预期结果：顶部的“平移到当前位置”按钮可将 Google 地图平移到手机的当前位置。 实际结果：在chrome、firefox、edge web浏览器上可以打开html文件，但是按钮没有平移到手机上的当前位置。在笔记本电脑上的 chrome 浏览器中，该按钮确实平移到当前位置。在 Android 手机上的 mi 浏览器（来自小米）上，该按钮会响应并平移到当前位置。
由于我是 HTML/JS 的初学者，我不知道是否可以在代码中修复此错误，或者可以通过 Web 浏览器中的设置进行修复。如果能找到一种方法来使用“平移到当前位置”功能在 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, infoWindow, map.getCenter());
);
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"/>
</body>
</html>
【问题讨论】：
【参考方案1】：当前的解决方案是通过 Azure 将 .html 作为网站发布。该网站可以通过手机浏览器访问，并且具有“平移到当前位置”功能。
javascript 代码无法通过手机上的本地 .html 文件运行的最可能原因是手机上的浏览器在处理本地 html/javascript 时的安全性。
【讨论】：
以上是关于如何使用 android 手机上的本地 Google Maps .html 文件平移到当前位置？的主要内容，如果未能解决你的问题，请参考以下文章