问题
So I was trying this googleMap thing with geolocation. I really just copy pasted the code, but I didnt manage to make the map appear. The browser even asks me to get my location, but the map just doesnt show up. (Oh and I even used the google api key to call it)
<!DOCTYPE html>
<html lang="en-gb" dir="ltr">
<head>
<style type="text/css">
<meta charset="utf-8">
<title>Geolocation API getCurrentPosition example</title>
<style>
<script src="http://maps.google.com/maps/api/js?key=AIzaSyDBy_moo4fAc2Z2DmSLBayqjry_VkthwyU&sensor=false">
<script type="text/javascript" src="http://maps.gstatic.com/intl/pt_pt/mapfiles/api-3/10/19/main.js">
<script type="text/javascript" charset="UTF-8" src="http://maps.gstatic.com/cat_js/intl/pt_pt/mapfiles/api-3/10/19/%7Bcommon,util,stats%7D.js">
<script type="text/javascript" charset="UTF-8" src="http://maps.gstatic.com/cat_js/intl/pt_pt/mapfiles/api-3/10/19/%7Bmap,marker,infowindow%7D.js">
<script type="text/javascript" charset="UTF-8" src="http://maps.gstatic.com/cat_js/intl/pt_pt/mapfiles/api-3/10/19/%7Bonion%7D.js">
<script type="text/javascript" charset="UTF-8" src="http://maps.gstatic.com/cat_js/intl/pt_pt/mapfiles/api-3/10/19/%7Bcontrols%7D.js">
</style>
</head>
<body>
<p>Click on the marker for position information.</p>
<div id="map" style="position: relative; background-color: rgb(229, 227, 223); overflow: hidden;">
<div style="position: absolute; left: 0px; top: 0px; overflow: hidden; width: 100%; height: 100%; z-index: 0;">
<div style="position: absolute; left: 0px; top: 0px; overflow: hidden; width: 100%; height: 100%; z-index: 0;">
<div style="position: absolute; left: 0px; top: 0px; z-index: 1; cursor: url("http://maps.gstatic.com/mapfiles/openhand_8_8.cur"), default;">
<div style="position: absolute; left: 0px; top: 0px; z-index: 200;">
<div style="position: absolute; left: 0px; top: 0px; z-index: 201;">
<div style="position: absolute; left: 0px; top: 0px; z-index: 202;">
<div style="position: absolute; left: 0px; top: 0px; z-index: 100;">
<div style="position: absolute; left: 0px; top: 0px; z-index: 0;">
</div>
</div>
<div style="margin: 2px 5px 2px 2px; z-index: 1000000; position: absolute; left: 0px; bottom: 0px;">
<div class="gmnoprint" style="z-index: 1000001; position: absolute; right: 0px; bottom: 0px;">
<div style="background-color: white; padding: 15px 21px; border: 1px solid rgb(171, 171, 171); font-family: Arial,sans-serif; color: rgb(34, 34, 34); box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.2); z-index: 10000002; display: none; width: 256px; height: 148px; position: absolute; left: 475px; top: 310px;">
<div class="gmnoscreen" style="position: absolute; right: 0px; bottom: 0px;">
<div class="gmnoprint" style="display: none; font-size: 10px; height: 17px; background-color: rgb(245, 245, 245); border: 1px solid rgb(220, 220, 220); line-height: 19px; position: absolute; right: 0px; bottom: 0px;">
<div class="gmnoprint" style="margin: 5px; -moz-user-select: none; position: absolute; left: 0px; top: 0px;" controlwidth="78" controlheight="356">
<div class="gmnoprint" style="margin: 5px; z-index: 0; position: absolute; cursor: pointer; right: 0px; top: 0px;">
</div>
</div>
<script>
if (navigator.geolocation) {
var timeoutVal = 10 * 1000 * 1000;
navigator.geolocation.getCurrentPosition(
displayPosition,
displayError,
{ enableHighAccuracy: true, timeout: timeoutVal, maximumAge: 0 }
);
}
else {
alert("Geolocation is not supported by this browser");
}
function displayPosition(position) {
var pos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var options = {
zoom: 10,
center: pos,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"), options);
var marker = new google.maps.Marker({
position: pos,
map: map,
title: "User location"
});
var contentString = "<b>Timestamp:</b> " + parseTimestamp(position.timestamp) + "<br/><b>User location:</b> lat " + position.coords.latitude + ", long " + position.coords.longitude + ", accuracy " + position.coords.accuracy;
var infowindow = new google.maps.InfoWindow({
content: contentString
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
}
function displayError(error) {
var errors = {
1: 'Permission denied',
2: 'Position unavailable',
3: 'Request timeout'
};
alert("Error: " + errors[error.code]);
}
function parseTimestamp(timestamp) {
var d = new Date(timestamp);
var day = d.getDate();
var month = d.getMonth() + 1;
var year = d.getFullYear();
var hour = d.getHours();
var mins = d.getMinutes();
var secs = d.getSeconds();
var msec = d.getMilliseconds();
return day + "." + month + "." + year + " " + hour + ":" + mins + ":" + secs + "," + msec;
}
</script>
<div id="YontooInstallID" style="display: none;">E5458842-7EDA-B28E-B9F2-4CFB1EEAD44D</div>
<div id="Y2PluginIds" style="display: none;">Y2:E5458842-7EDA-B28E-B9F2-4CFB1EEAD44D</div>
</body>
</html>
</style>
</head>
<body>
<div id="YontooInstallID" style="display: none;">E5458842-7EDA-B28E-B9F2-4CFB1EEAD44D</div>
<div id="Y2PluginIds" style="display: none;">Y2:E5458842-7EDA-B28E-B9F2-4CFB1EEAD44D</div>
</body>
</html>
回答1:
And you have to close all your tags (script, div, style). E.g.:
<script> with </script>
回答2:
Copied from Your example works perfectly.
Your code has at least 20 lines extra at the start and about 9 at the end.
According to Google The Google Maps JavaScript API v3 does not require an API key to function correctly. However, we strongly encourage you to load the Maps API using an APIs Console key which allows you to monitor your application's Maps API usage.
<!DOCTYPE html>
<html dir="ltr" lang="en-gb">
<head>
<meta charset="utf-8" />
<title>Geolocation API getCurrentPosition example</title>
<style>
#map { width:100%; height:800px; }
</style>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
</head>
<body>
<p>Click on the marker for position information.</p>
<div id="map"></div>
<script>
if (navigator.geolocation) {
var timeoutVal = 10 * 1000 * 1000;
navigator.geolocation.getCurrentPosition(
displayPosition,
displayError,
{ enableHighAccuracy: true, timeout: timeoutVal, maximumAge: 0 }
);
}
else {
alert("Geolocation is not supported by this browser");
}
function displayPosition(position) {
var pos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var options = {
zoom: 10,
center: pos,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"), options);
var marker = new google.maps.Marker({
position: pos,
map: map,
title: "User location"
});
var contentString = "<b>Timestamp:</b> " + parseTimestamp(position.timestamp) + "<br/><b>User location:</b> lat " + position.coords.latitude + ", long " + position.coords.longitude + ", accuracy " + position.coords.accuracy;
var infowindow = new google.maps.InfoWindow({
content: contentString
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
}
function displayError(error) {
var errors = {
1: 'Permission denied',
2: 'Position unavailable',
3: 'Request timeout'
};
alert("Error: " + errors[error.code]);
}
function parseTimestamp(timestamp) {
var d = new Date(timestamp);
var day = d.getDate();
var month = d.getMonth() + 1;
var year = d.getFullYear();
var hour = d.getHours();
var mins = d.getMinutes();
var secs = d.getSeconds();
var msec = d.getMilliseconds();
return day + "." + month + "." + year + " " + hour + ":" + mins + ":" + secs + "," + msec;
}
</script>
</body>
</html>
来源：https://stackoverflow.com/questions/14145167/googlemap-with-geolocation-not-showing-up