地理位置:仅移动谷歌地图标记而不重新加载地图-前端问题

Geolocation: moving only google maps marker without reload the map(地理位置:仅移动谷歌地图标记而不重新加载地图)

本文介绍了地理位置:仅移动谷歌地图标记而不重新加载地图的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我只需要在设备移动或设备变得更准确时更新标记.当位置变化时也重新加载地图，我只需要移动制造商.我有以下代码:

I need to update only the marker when the device is moving or when the device is getting more accuracy. When the position change also reload the map and I need to move only the maker. I have the following code:

if (navigator.geolocation) {
    navigator.geolocation.watchPosition(

    function(position){
    var latitude = position.coords.latitude;
    var longitude = position.coords.longitude;
    var accuracy = position.coords.accuracy;
    var coords = new google.maps.LatLng(latitude, longitude);
    var mapOptions = {
        zoom: 20,
        center: coords,
        streetViewControl: false,
        mapTypeControl: false,
        navigationControlOptions: {
            style: google.maps.NavigationControlStyle.SMALL
        },
        mapTypeId: google.maps.MapTypeId.ROADMAP
        };

     var capa = document.getElementById("capa");
     capa.innerHTML = "latitud: " + latitude + " longitud: " + "   aquesta es la precisio en metres  :  " + accuracy;  

        map = new google.maps.Map(
            document.getElementById("mapContainer"), mapOptions
            );
        var marker = new google.maps.Marker({
                position: coords,
                map: map,
                title: "ok"
        });


    },function error(msg){alert('Please enable your GPS position future.');  

  }, {maximumAge:0, timeout:5000, enableHighAccuracy: false});

}else {
    alert("Geolocation API is not supported in your browser.");
}

谢谢！

推荐答案

我认为问题在于你在 watchPosition 函数中创建了一个新地图.您只需要创建一个标记，然后在 watchPosition 函数中更新其位置.

I believe that the problem is that you create a new map inside the watchPosition function. You only need to create one marker and then update its position inside the watchPosition function.

navigator.geolocation.watchPosition(
    function (position) {
        setMarkerPosition(
            currentPositionMarker,
            position
        );
    });

function setMarkerPosition(marker, position) {
    marker.setPosition(
        new google.maps.LatLng(
            position.coords.latitude,
            position.coords.longitude)
    );
}

也许这个例子会对你有所帮助:

Maybe this example will help you:

<!doctype html>
<html lang="en">

    <head>
        <title>Google maps</title>
        <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false&language=en"></script>
        <script type="text/javascript">

            var map,
                currentPositionMarker,
                mapCenter = new google.maps.LatLng(40.700683, -73.925972),
                map;

            function initializeMap()
            {
                map = new google.maps.Map(document.getElementById('map_canvas'), {
                   zoom: 13,
                   center: mapCenter,
                   mapTypeId: google.maps.MapTypeId.ROADMAP
                 });
            }

            function locError(error) {
                // the current position could not be located
                alert("The current position could not be found!");
            }

            function setCurrentPosition(pos) {
                currentPositionMarker = new google.maps.Marker({
                    map: map,
                    position: new google.maps.LatLng(
                        pos.coords.latitude,
                        pos.coords.longitude
                    ),
                    title: "Current Position"
                });
                map.panTo(new google.maps.LatLng(
                        pos.coords.latitude,
                        pos.coords.longitude
                    ));
            }

            function displayAndWatch(position) {
                // set current position
                setCurrentPosition(position);
                // watch position
                watchCurrentPosition();
            }

            function watchCurrentPosition() {
                var positionTimer = navigator.geolocation.watchPosition(
                    function (position) {
                        setMarkerPosition(
                            currentPositionMarker,
                            position
                        );
                    });
            }

            function setMarkerPosition(marker, position) {
                marker.setPosition(
                    new google.maps.LatLng(
                        position.coords.latitude,
                        position.coords.longitude)
                );
            }

            function initLocationProcedure() {
                initializeMap();
                if (navigator.geolocation) {
                    navigator.geolocation.getCurrentPosition(displayAndWatch, locError);
                } else {
                    alert("Your browser does not support the Geolocation API");
                }
            }

            $(document).ready(function() {
                initLocationProcedure();
            });

        </script>
    </head>

    <body>
        <div id="map_canvas" style="height:600px;"></div>
    </body>

</html>

这篇关于地理位置:仅移动谷歌地图标记而不重新加载地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！