0

我有我的页面，因此它允许用户查看他们的纬度和经度。我嵌入了谷歌地图，以便用户可以点击实际查看他们所在的位置。这是我的计算机科学课的一个项目，所以我不希望你亲自为我编写代码。我只是想要关于如何解决这个问题的建议。这就是我现在所拥有的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />

    <!-- This page will allow the suer to track their location through means of the HTML5 Geolocation feature -->

    <title>Assignment 4:Track My Location</title>
    <meta name="author" content="Alan Sylvestre" />

    <script src="http://maps.google.com/maps/api/js?sensor=false"></script>

    <script>
        function myLocation() {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(locationReveal);
            } else {
                alert("Please use a different browser that supports geolocation.");
            }
        }


        window.onload = myLocation;

        function locationReveal(position) {
            showMap(position.coords);
            var latitude = position.coords.latitude;
            var longitude = position.coords.longitude;
            var div = document.getElementById("location");
            div.innerHTML = "You are at Latitude: " + latitude + ", Longitude: " + longitude;
        }

        var map;
        function showMap(coords) {
            var googleLatAndLong = new google.maps.LatLng(coords.latitude, coords.longitude);
            var mapOptions = {
                zoom : 18,
                center : googleLatAndLong,
                mapTypeId : google.maps.MapTypeId.SATELLITE
            };
            var mapDiv = document.getElementById("map");
            map = new google.maps.Map(mapDiv, mapOptions);
            addMarker(googleLatAndLong);

        }


        google.maps.Map(mapDiv, mapOptions);

        var marker;
        function addMarker(latlong) {
            var markerOptions = {
                position : latlong,
                map : map
            };
            marker = new google.maps.Marker(markerOptions);
        }

        var center;
        function calculateCenter() {
            center = map.getCenter();
        }

    </script>

</head>

<body style="background-color:yellow;" text="blue;">
    <div align="center">
        <h1>Reveal My Location</h1>
        <p>
            You know what's pretty cool? Tracking your location using a simple internet connection. By clicking this button, you're browser will track a global database and reveal your location in terms of latitude and longitude. Enjoy!
        </p>
        <div id="location"></div>
        <br>
        <div id="map" style="width:400px; height:400px;"></div>
        <br>
        <input type="button" id="centerOfMap" value="Center" onclick="calculateCenter()">
        <footer>
            <p>
                &copy; Copyright  by Alan Sylvestre
            </p>
        </footer>
    </div>
</body>

4

1 回答 1

0

First you need to make sure that the DOM is loaded before you run your JavaScript.

That is why 'mapDiv' is 'undefined'.

Either wrap your script in a window.onload anonymous function or push it to just before the closing body tag.

于 2013-04-26T04:51:34.873 回答