如何移动谷歌地图标记,并获得当前的纬度和经度

时间:2017-05-14 10:12:05

标签: javascript google-maps google-maps-api-3

我想使用谷歌地图来获取用户的当前lat和lon:

    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCfbbmUkl56UuSeZ5nSOwsKTNxplmnheuU&callback=initialize&language=en" async defer></script>

用户应该更改标记,我会得到新的lat和lon。

可以这样做吗?

1 个答案:

答案 0 :(得分:3)

使用HTML地理位置方法自动检测用户位置的代码段。运行此应用程序时,请确保您的浏览器启用了位置,并提供了正确的Google地图API链接,并且最无能为力的是API密钥。这是MDN Using geolocation的链接,您可以在其中找到有关地理位置和浏览器支持信息的详细信息。

<!DOCTYPE html>
<html>

<body>

    <p>Click the button to get your coordinates.</p>

    <button onclick="getLocation()">Click Me to show Your Location.</button>

    <div id="map" style="width:100%;height:500px"></div>

    <script>
        function getLocation() {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(showPosition);
            } else {
                alert("Geolocation is not supported by this browser.");
            }
        }
        function showPosition(position) {
            var lat = position.coords.latitude;
            var lng = position.coords.longitude;
            var myCenter = new google.maps.LatLng(lat, lng);
            var mapCanvas = document.getElementById("map");
            var mapOptions = {
                center: myCenter,
                zoom: 5
            };
            var map = new google.maps.Map(mapCanvas, mapOptions);
            var marker = new google.maps.Marker({
                position: myCenter
            });
            marker.setMap(map);
            // Zoom to 9 when clicking on marker
            google.maps.event.addListener(marker, 'click', function () {
                map.setZoom(9);
                map.setCenter(marker.getPosition());
            });
        }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBu-916DdpKAjTmJNIgngS6HL_kDIKU0aU&callback=myMap"></script>

</body>

</html>

希望这会对您有所帮助