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

2 に答える 2

0

1) ジオロケーションから「位置」を保存します 2) ユーザーがクリックしたとき: map.setCenter(new google.maps.LatLng(position.coords.latitude, position.coords.longitude))``

これを実装する方法の詳細が必要な場合はお知らせください。

于 2013-04-27T17:08:28.287 に答える