Question

所以我在尝试使用地理定位这个googleMap。我真的只是复制粘贴代码，但我没有设法让地图出现。浏览器甚至要求我获取我的位置，但地图只是没有出现。（哦，我甚至用谷歌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;" 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>

Answer 1

你必须关闭所有标签（脚本，div，样式）。 E.g：

   <script> with </script>

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

谷歌地图与地理位置没有显示

2 个答案: