如何在 HTML5 中的 Google 地图上显示用户的位置？答案

【问题标题】：How do I display the location of the user on a Google Map in HTML5?如何在 HTML5 中的 Google 地图上显示用户的位置？
【发布时间】：2023-03-21 12:14:01
【问题描述】：

我正在尝试在我的页面中放置一个 Google 地图，以便在页面加载时地图将准确显示用户的位置。为此，我采用了谷歌地图 API 代码并将其插入到我的 HTML5 页面中。起初浏览器确实要求允许分享我的位置，但它实际上并没有在地图上显示这个位置；我已经尝试了两种或多种功能组合，但仍然无法正常工作....拜托，我需要帮助！如果有人能告诉我代码有什么问题，请这样做：

<html lang="en" manifest="halma.manifest">

<head>

<meta charset="utf-8">

<title>helmas</title> 
<link rel="stylesheet" type="text/css" href="css2.css">
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>

<script src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=ABQIAAAAycdS3aS7dItIegOaJzT2RBT2yXp_ZAY8_ufC3CFXhHIE1NvwkxSiGkO1l1KdZvNzo-8b-o7M21o4UA"></script>

<!--[if IE]>
    <script src="excanvas.js"></script>
<![endif]-->
</head>

<<body onload="loadMap()" onunload="GUnload()">

<article>
<div id="map" style="width:100%;height:800px;"></div>

<script>
if (navigator.geolocation) {
   // try to get the users location
}


if (navigator.geolocation) {
   var timeoutVal = 10 * 1000 * 1000;
   navigator.geolocation.watchPosition(showPositionOnMap, errorMessage,
   { enableHighAccuracy: true, timeout: timeoutVal, maximumAge: 0 });
}
else {
   alert("Geolocation is not supported by this browser");
}

var map = null;
function loadMap() {
   map = new GMap2(document.getElementById("map"));
   map.setCenter(new GLatLng(52.2021, 0.1346 ), 12); // (sets the map centre to Cambridge UK)
   map.setUIToDefault();
}
function showPositionOnMap(position) {
   var geoCoords = new GLatLng(position.coords.latitude, position.coords.longitude);
   map.addOverlay(new GMarker(geoCoords));
}
function errorMessage(error) {
   var errors = { 
      1: 'Permission denied',
      2: 'Position unavailable',
      3: 'Request timeout'
   };
   alert("Error: " + errors[error.code]);
}
</script>

【问题讨论】：

你试过getCurrentPosition和watchPosition吗？另外，也许您应该在添加标记后重新居中地图？您是否确认 Geolocation 在您的浏览器中正常工作——maps.google.com 会找到您吗？最后，您是否尝试过调试？如果您console.log(position.coords.latitude); 看到正确的值吗？
是的！我尝试了 getposition 和 watchposition，地理定位在我的计算机上工作，但似乎没有与浏览器显示的地图连接。如何使地图居中？我没有在其中添加任何图钉。

标签： google-maps html geolocation

【解决方案1】：

也许地图调用中的传感器参数需要设置为“true” - 目前您已将其设置为“false”。所以你的脚本标签应该包含这个 url

<script src="http://maps.google.com/maps?file=api&v=2&sensor=true&key=ABQIAAAAycdS3aS7dItIegOaJzT2RBT2yXp_ZAY8_ufC3CFXhHIE1NvwkxSiGkO1l1KdZvNzo-8b-o7M21o4UA"></script>

更多信息： Google Maps Api sensor location

【讨论】：