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

发布于 2024-09-27 01:20:48 字数 1937 浏览 5 评论 0原文

我正在尝试将 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>

原文

I'm trying to put a Google map in my page and make it so that when the page loads the map will display exactly the location of the user. In order to do so, I've taken the google maps API code and inserted it into my HTML5 page. At first the browser did ask for permission to share my location but it isn't actually showing this location on the map; I've tried with two or more combinations of functions but it is still not working.... please, I need help! If anyone can tell me what is wrong with the code please do:

<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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

起风了 2024-10-04 01:20:48

也许地图调用中的传感器参数需要设置为“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 传感器位置

Perhaps the sensor parameter in the maps invocation needs to be set to "true" - at the moment you have it set to "false". So your script tag should contain this url

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

For more info:
Google Maps Api sensor location

回复收藏 0 原文

~没有更多了~