How do I display the location of the user on a Google Map in HTML5?_问答_开发者

How do I display the location of the user on a Google Map in HTML5?

开发者 https://www.devze.com 2023-01-19 18:29 出处：网络

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 in

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: timeo开发者_运维技巧utVal, 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>

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