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

时间:2010-10-14 00:24:48

标签: google-maps html5 geolocation

我正在尝试在我的页面中放置一张谷歌地图并使其成为当页面加载时,地图将准确显示用户的位置。为此,我使用了谷歌地图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>

    

1 个答案:

答案 0 :(得分:0)

也许map调用中的sensor参数需要设置为“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