logo标签列表

如何在HTML5中显示用户位置在谷歌地图上？

google-mapshtmlgeolocation
3
我正在尝试在我的页面上放置一个Google地图，并使其在页面加载时显示用户的确切位置。为了实现这一点，我已经将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是否正常工作吗？可以通过http://maps.google.com来定位你吗？最后，你尝试过调试吗？如果你使用`console.log(position.coords.latitude);`，你能看到正确的值吗？ - npdoty
是的！我尝试了getposition和watchposition，而且地理位置在我的电脑上工作，但似乎它没有与浏览器显示的地图连接。我该如何将地图居中？我没有在地图上添加任何标记。 - gabriela
1个回答
0
也许在调用地图时，传感器参数需要设置为“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 传感器位置

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接