没有显示地理位置的googleMap
Posted
技术标签:
【中文标题】没有显示地理位置的googleMap【英文标题】：googleMap with geolocation not showing up 【发布时间】：2013-01-03 18:45:34 【问题描述】：所以我正在尝试这个 googleMap 的地理定位。我真的只是复制粘贴了代码，但我没有设法让地图出现。浏览器甚至要求我获取我的位置，但地图只是不显示。 （哦，我什至用google api键来调用它）
<!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;" control control>
<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>
【问题讨论】：
你不应该在style 标签内有 meta title 和 script 标签。如果你解决了这个问题，它可能会起作用。
去掉了标签，还是什么都没有。它实际上变得更糟了。 :P
【参考方案1】：
您必须关闭所有标签（脚本、div、样式）。例如：
<script> with </script>
【讨论】：
问题是（如果您实际上尝试复制 n' 粘贴代码并在浏览器上尝试）如果我采用包装第一个元标题和脚本的初始样式，则页面停止工作。我也试过按你说的做，但对我没有用。 （我复制代码的页面：html5doctor.com/demos/geolocation/…）【参考方案2】：从Your example 复制完美。
您的代码在开头至少有 20 行，在结尾处大约有 9 行。
根据Google，Google Maps JavaScript API v3 不需要 API 密钥即可正常运行。但是，我们强烈建议您使用 API 控制台密钥加载 Maps API，以便监控应用程序的 Maps API 使用情况。
<!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>
【讨论】：
以上是关于没有显示地理位置的googleMap的主要内容，如果未能解决你的问题，请参考以下文章
GoogleMaps v2 Android 的我的位置按钮，不显示
使用 GoogleMaps 时，myLocationEnabled 快速更改为 isMyLocationEnabled