0
HTML5 페이지에서 Google지도를 사용하고 있습니다. 단락에서지도 위에 좌표를 표시하고 싶지만 다음 코드를 실행하면 변수가 빈 페이지에 표시됩니다.스타일 지정 javascript document.write
좌표가 같은 페이지의지도 위에 표시되게하려면 어떻게해야합니까?
<!DOCTYPE HTML>
<html>
<head>
<title>Geolocation With a Map</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script type="text/javascript">
function TestGeo()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(TestMap, error, {maximumAge: 3000000, timeout: 1000000, enableHighAccuracy: true});
}
else
{
alert("Sorry, but it looks like your browser does not support geolocation.");
}
}
//Create a new map variable
var map;
function TestMap(position)
{
// Define the coordinates as a Google Maps LatLng Object
var coords = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
// Prepare the map options
var mapOptions =
{
zoom: 10,
center: coords,
mapTypeControl: false,
navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// Create the map, and place it in the map_canvas div
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
// Place the initial marker
var marker = new google.maps.Marker({
position: coords,
map: map,
title: "Your current location!"
});
}
function error() {
alert("Cannot locate user");
}
</script>
</head>
<body onload="TestGeo();">
<header>
<nav>
<ul>
<li><button onclick="location.href='takePicture.html'"><img src="/img/pic_icon.png" alt="Take Picture" /><br />Take<br />Picture</button>
<button onclick="location.href='gallery.html'"><img src="/img/gallery_icon.png" alt="Gallery" /><br />Show<br />Gallery</button>
<button onclick="location.href='recordsound.html'"><img src="/img/rec_icon.png" alt="Audio Recorder" /><br />Record<br />Sound</button>
<button onclick="location.href='more.html'"><img src="/img/more_icon.png" alt="More Options" /><br />More<br />Options</button>
</li>
</ul>
</nav>
</header>
<section>
<article>
<script>
var lat = position.coords.latitude;
var lon = position.coords.longitude;
document.write('<p>Latitude: ' + lat + '<br>Longitude: ' + lon + '</p>');
</script>
<br />
<div id="map_canvas" style="width: 300px; height: 300px; border-right: 1px solid #666666; border-bottom: 1px solid #666666; border-top: 1px solid #AAAAAA; border-left: 1px solid #AAAAAA;"></div>
</article>
</section>
</body>
</html>
편집
업데이트 코드 :
<section>
<article>
<p>Latitude: <span id="lat"></span><br />Longitude: <span id="lon"></span></p>
<script>
var lat = position.coords.latitude;
var lon = position.coords.longitude;
document.getElementById('lat').innerHTML = lat;
document.getElementById('lon').innerHTML = lon;
</script>
<br />
<div id="map_canvas" style="width: 300px; height: 300px; border-right: 1px solid #666666; border-bottom: 1px solid #666666; border-top: 1px solid #AAAAAA; border-left: 1px solid #AAAAAA;"></div>
</article>
</section>
이 좌표를 출력하지 않는 것 같습니다.
1997 년 이후에 앱을 사용하려면'document.write'를 절대 사용하지 마십시오. – MaxArt
'Document.Write'는 현재 문서를 수정하는 것이 아니라 (또는) 문서를 만드는 것입니다. 새 요소 (또는 html)를 삽입해야합니다. – NickSlash
아, 내가 어디로 잘못 가고 있는지 설명합니다. 나는 JavaScript에 매우 익숙하다. 그러면 내가 원하는 것을 얼마나 정확하게 얻을 수 있을까? – user1081326