中心别针谷歌地图答案

【问题标题】：Center pin google maps中心别针谷歌地图
【发布时间】：2013-04-27 16:54:48
【问题描述】：

我需要创建一个页面，提供用户的纬度和经度，然后允许用户单击一个按钮以允许他们将谷歌地图围绕图钉（显示他们当前的位置）居中。我对如何做到这一点完全感到困惑。我认为这将是一个功能。我已经在我的代码中声明了该函数，但我不确定如何执行它。任何帮助将不胜感激。谢谢！

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

【问题讨论】：

标签： javascript google-maps

【解决方案1】：

1) 从地理位置存储“位置” 2）当用户点击时： map.setCenter(新 google.maps.LatLng(position.coords.latitude, position.coords.longitude))``

如果您想了解有关如何实现此功能的更多详细信息，请告诉我。

【讨论】：

谢谢！我会在几分钟内尝试一下，看看是否有效。谢谢。

【解决方案2】：

map.setCenter(marker.getPosition());

【讨论】：