0

ユーザーが緯度と経度を確認できるようにページを作成しました。ユーザーが物理的にクリックして現在地を確認できるように、Google マップを埋め込みました。これは私のコンピュータ サイエンス クラスのプロジェクトなので、物理的にコードを書いてもらいたくありません。これを解決する方法についての提案が欲しいだけです。これが私が今持っているものです。

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