如何在 HTML5 中的 Google 地图上显示用户的位置？
Posted
技术标签:
【中文标题】如何在 HTML5 中的 Google 地图上显示用户的位置？【英文标题】：How do I display the location of the user on a Google Map in HTML5? 【发布时间】：2010-10-14 00:24:48 【问题描述】：我正在尝试在我的页面中放置一个 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，地理定位在我的计算机上工作，但似乎没有与浏览器显示的地图连接。如何使地图居中？我没有在其中添加任何图钉。
【参考方案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
【讨论】：
以上是关于如何在 HTML5 中的 Google 地图上显示用户的位置？的主要内容，如果未能解决你的问题，请参考以下文章
如何在不使用 Google 地图的情况下将纬度/经度转换为 HTML5 坐标？
html5应用 调用百度地图API 为啥在手机端显示不了，求大神解!!!!!!
如何在 Android 上的 Google 地图上的标记旁边显示标签？
myLocationButton 未在 Google 地图上显示