没有显示地理位置的googleMap [英] googleMap with geolocation not showing up
本文介绍了没有显示地理位置的googleMap的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
<！DOCTYPE html>
< html lang =en-gbdir =ltr>
< head>
< style type =text / css>
< meta charset =utf-8>
< title> Geolocation API getCurrentPosition示例< / title>
< style>
< script src =http://maps.google.com/maps/api/js?key=AIzaSyDBy_moo4fAc2Z2DmSLBayqjry_VkthwyU&sensor=false>
< script type =text / javascriptsrc =http://maps.gstatic.com/intl/pt_pt/mapfiles/api-3/10/19/main.js>
< script type =text / javascriptcharset =UTF-8src =http://maps.gstatic.com/cat_js/intl/pt_pt/mapfiles/api-3/10/19/ ％7Bcommon，UTIL，统计％7D.js>
< script type =text / javascriptcharset =UTF-8src =http://maps.gstatic.com/cat_js/intl/pt_pt/mapfiles/api-3/10/19/ ％7Bmap，标记，信息窗口％7D.js>
< script type =text / javascriptcharset =UTF-8src =http://maps.gstatic.com/cat_js/intl/pt_pt/mapfiles/api-3/10/19/ ％7Bcontrols％7D.js>
< / style>
< / head>
< body>
< p>点击位置信息标记。< / p>
< div id =mapstyle =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） ，默认;>
< 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 =gmnoprintstyle =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 =gmnoscreenstyle =position：absolute; right：0px; bottom：0px;>
div class =gmnoprintstyle =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 =gmnoprintstyle =margin：5px; -moz-user-select：none; position：absolute; left：0px; top：0px; controlwidth =78controlheight =356>
< div class =gmnoprintstyle =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（此浏览器不支持地理定位）;
}
函数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>时间戳：< / b>+ parseTimestamp（position.timestamp）+< br />< b>用户位置：< / b> lat position.coords.latitude +，long+ position.coords.longitude +，准确性+ position.coords.accuracy;
var infowindow = new google.maps.InfoWindow（{
content：contentString
}）;
google.maps.event.addListener（marker，'click'，function（）{
infowindow.open（map，marker）;
}）;
}
函数displayError（error）{
var errors = {
1：'Permission denied'，
2：'Position unavailable'，
3 ：'请求超时'
};
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（）;
返回日+。 +月+。 + year ++ hour +：+ mins +：+ secs +，+ msec;
}
< / script>
< div id =YontooInstallIDstyle =display：none;> E5458842-7EDA-B28E-B9F2-4CFB1EEAD44D< / div>
< div id =Y2PluginIdsstyle =display：none;> Y2：E5458842-7EDA-B28E-B9F2-4CFB1EEAD44D< / div>
< / body>
< / html>
< / style>
< / head>
< body>
< div id =YontooInstallIDstyle =display：none;> E5458842-7EDA-B28E-B9F2-4CFB1EEAD44D< / div>
< div id =Y2PluginIdsstyle =display：none;> Y2：E5458842-7EDA-B28E-B9F2-4CFB1EEAD44D< / div>
< / body>
< / html>
解决方案
从你的例子完美地工作。
您的代码在开始时至少有20行额外字符，结尾大约9个字符。
根据 Google Google Maps JavaScript API v3不需要API密钥即可功能正常。不过，我们强烈建议您使用API控制台密钥加载Google地图API，以便您监控应用的Maps API使用情况。
<！DOCTYPE html>
< html dir =ltrlang =en-gb>
< head>
< meta charset =utf-8/>
< title> Geolocation API getCurrentPosition示例< / title>
< style>
#map {width：100％;高度：800像素; }
< / style>
< script src =http://maps.google.com/maps/api/js?sensor=false>< / script>
< / head>
< body>
< p>点击位置信息标记。< / 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（此浏览器不支持地理定位）;
}
函数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>时间戳：< / b>+ parseTimestamp（position.timestamp）+< br />< b>用户位置：< / b> lat position.coords.latitude +，long+ position.coords.longitude +，准确性+ position.coords.accuracy;
var infowindow = new google.maps.InfoWindow（{
content：contentString
}）;
google.maps.event.addListener（marker，'click'，function（）{
infowindow.open（map，marker）;
}）;
}
函数displayError（error）{
var errors = {
1：'Permission denied'，
2：'Position unavailable'，
3 ：'请求超时'
};
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（）;
返回日+。 +月+。 + year ++ hour +：+ mins +：+ secs +，+ msec;
}
< / script>
< / body>
< / html>
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>
解决方案
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>
这篇关于没有显示地理位置的googleMap的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
