Подтвердить что ты не робот

Google Maps v3 задает единую точку маркера на карте.

Прямо сейчас у меня есть код карты google, который установит один маркер на карте. Я хочу, чтобы этот единственный маркер был перемещен в любые координаты, на которые пользователь нажимает. Я хочу только 1 маркер на карте, поэтому мне нужно, чтобы один маркер был перемещен в любое место. Любая помощь приветствуется. Спасибо!

    var initialLocation;
    var siberia = new google.maps.LatLng(60, 105);
    var newyork = new google.maps.LatLng(40.69847032728747, -73.9514422416687);
    var browserSupportFlag =  new Boolean();



    function initialize() {
        var myOptions = {
            zoom: 6,
            mapTypeId: google.maps.MapTypeId.HYBRID
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

        myListener = google.maps.event.addListener(map, 'click', function(event) {
            placeMarker(event.latLng);
            google.maps.event.removeListener(myListener);
        });
        google.maps.event.addListener(map, 'drag', function(event) {
            placeMarker(event.latLng);
            google.maps.event.removeListener(myListener);
        });

        // Try W3C Geolocation (Preferred)
        if(navigator.geolocation) {
            browserSupportFlag = true;
            navigator.geolocation.getCurrentPosition(function(position) {
                initialLocation = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
                map.setCenter(initialLocation);
            }, function() {
                handleNoGeolocation(browserSupportFlag);
            });
            // Try Google Gears Geolocation
        } else if (google.gears) {
            browserSupportFlag = true;
            var geo = google.gears.factory.create('beta.geolocation');
            geo.getCurrentPosition(function(position) {
                initialLocation = new google.maps.LatLng(position.latitude,position.longitude);
                map.setCenter(initialLocation);
            }, function() {
                handleNoGeoLocation(browserSupportFlag);
            });
            // Browser doesn't support Geolocation
        } else {
            browserSupportFlag = false;
            handleNoGeolocation(browserSupportFlag);
        }

        function handleNoGeolocation(errorFlag) {
            if (errorFlag === true) {
                alert("Geolocation service failed.");
                initialLocation = newyork;
            } else {
                alert("Your browser doesn't support geolocation. We've placed you in Siberia.");
                initialLocation = siberia;
            }
        }

        function placeMarker(location) {
            var marker = new google.maps.Marker({
                position: location,
                map: map,
                draggable: true
            });
            map.setCenter(location);
            var markerPosition = marker.getPosition();
            populateInputs(markerPosition);
            google.maps.event.addListener(marker, "drag", function (mEvent) {
                populateInputs(mEvent.latLng);
            });
        }
        function populateInputs(pos) {
            document.getElementById("t1").value=pos.lat()
            document.getElementById("t2").value=pos.lng();
        }
    }
4b9b3361

ОТВЕТЫ

Ответ 1

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        #map_canvas {height:600px;width:800px}
    </style>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

    <script type="text/javascript">
        var map;
        var markersArray = [];

        function initMap()
        {
            var latlng = new google.maps.LatLng(41, 29);
            var myOptions = {
                zoom: 10,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

            // add a click event handler to the map object
            google.maps.event.addListener(map, "click", function(event)
            {
                // place a marker
                placeMarker(event.latLng);

                // display the lat/lng in your form lat/lng fields
                document.getElementById("latFld").value = event.latLng.lat();
                document.getElementById("lngFld").value = event.latLng.lng();
            });
        }
        function placeMarker(location) {
            // first remove all markers if there are any
            deleteOverlays();

            var marker = new google.maps.Marker({
                position: location, 
                map: map
            });

            // add marker in markers array
            markersArray.push(marker);

            //map.setCenter(location);
        }

        // Deletes all markers in the array by removing references to them
        function deleteOverlays() {
            if (markersArray) {
                for (i in markersArray) {
                    markersArray[i].setMap(null);
                }
            markersArray.length = 0;
            }
        }
    </script>
</head>

<body onload="initMap()">
    <div id="map_canvas"></div>
    <input type="text" id="latFld">
    <input type="text" id="lngFld">
</body>
</html>

Ответ 2

Текущие ответы выполняют гораздо больше работы, чем это необходимо, удаляя и повторно добавляя маркер (ы). Лучший способ сделать это - использовать функцию setPosition(), которую API Google Maps предоставляет для этой цели.

Вот ваш код, измененный для использования setPosition() для перемещения указателя:

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        #map_canvas { height:600px; width:800px }
    </style>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

    <script type="text/javascript">
    var initialLocation;
    var siberia = new google.maps.LatLng(60, 105);
    var newyork = new google.maps.LatLng(40.69847032728747, -73.9514422416687);
    var browserSupportFlag =  new Boolean();

    function initialize() {
        var myOptions = {
            zoom: 6,
            mapTypeId: google.maps.MapTypeId.HYBRID
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

        var marker;

        myListener = google.maps.event.addListener(map, 'click', function(event) {
            placeMarker(event.latLng);
        });
        google.maps.event.addListener(map, 'drag', function(event) {
            placeMarker(event.latLng);
        });

        // Try W3C Geolocation (Preferred)
        if(navigator.geolocation) {
            browserSupportFlag = true;
            navigator.geolocation.getCurrentPosition(function(position) {
                initialLocation = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
                map.setCenter(initialLocation);
            }, function() {
                handleNoGeolocation(browserSupportFlag);
            });
            // Try Google Gears Geolocation
        } else if (google.gears) {
            browserSupportFlag = true;
            var geo = google.gears.factory.create('beta.geolocation');
            geo.getCurrentPosition(function(position) {
                initialLocation = new google.maps.LatLng(position.latitude,position.longitude);
                map.setCenter(initialLocation);
            }, function() {
                handleNoGeoLocation(browserSupportFlag);
            });
            // Browser doesn't support Geolocation
        } else {
            browserSupportFlag = false;
            handleNoGeolocation(browserSupportFlag);
        }

        function handleNoGeolocation(errorFlag) {
            if (errorFlag === true) {
                alert("Geolocation service failed.");
                initialLocation = newyork;
            } else {
                alert("Your browser doesn't support geolocation. We've placed you in Siberia.");
                initialLocation = siberia;
            }
        }

        function placeMarker(location) {
            if (marker) {
                marker.setPosition(location);
            } else {
               marker = new google.maps.Marker({
                    position: location,
                    map: map,
                    draggable: true
                });
                google.maps.event.addListener(marker, "drag", function (mEvent) {
                    populateInputs(mEvent.latLng);
                });
            }
            populateInputs(location);
        }

        function populateInputs(pos) {
            document.getElementById("t1").value=pos.lat()
            document.getElementById("t2").value=pos.lng();
        }
    }

    </script>
</head>

<body onload="initialize()">
    <div id="map_canvas"></div>
    <input type="text" id="t1">
    <input type="text" id="t2">
</body>
</html>

Ответ 3

Сделайте глобальную переменную javascript "marker".

Затем в вашем слушателе добавьте оператор if marker и удалить его, если true

myListener = google.maps.event.addListener(map, 'click', function(event) {
            if(marker){marker.setMap(null)}
            placeMarker(event.latLng);
            google.maps.event.removeListener(myListener);
        });

Ответ 4

Вы можете попробовать:

google.maps.event.addListener(map, 'click', function(event){
        var marker_position = event.latLng;   
marker = new google.maps.Marker({
                map: map,
                draggable: false
            }); 
       marker.setPosition(marker_position);
})

Ответ 5

попробуйте это

if (marker) { marker.setMap(null) }

marker = new google.maps.Marker({ position: event.latLng, map: map });

Ответ 6

Ответ Burak Erdem работает нормально, но на самом деле вам не нужно и массив, чтобы сделать это, достаточно одного var, так как это только один последний маркер, потому что, когда вы устанавливаете новый, вы удаляете его последним последним. Я сделал это с помощью нескольких строк, и он отлично работал:

        var map;
        var lastMarker;
        function initialize() {
            var map_canvas = document.getElementById('map_canvas');
            var map_options = {
                center: new google.maps.LatLng(-25.363882, 131.044922),
                zoom: 8,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            }
            map = new google.maps.Map(map_canvas, map_options)
            google.maps.event.addListener(map, 'click', function(event) {
                placeMarker(event.latLng);
            });
        }

        function placeMarker(location) {
            if (lastMarker != null)
                lastMarker.setMap(null);
            var marker = new google.maps.Marker({
                position: location,
                map: map
            });
            lastMarker = marker;
        }

        google.maps.event.addDomListener(window, 'load', initialize);

Ответ 7

Я сделал это со следующим:

// create a new marker
var marker = new google.maps.Marker({
 });
//add listener to set the marker to the position on the map
google.maps.event.addListener(map, 'click', function(event) {
marker.setPosition(event.latLng);
marker.setMap(map);
marker.setAnimation(google.maps.Animation.DROP);
});

Он создает маркер, а затем перемещает его в каждое местоположение щелчка мыши... Я также добавил анимацию капельницы.

Вместо создания нескольких маркеров это создает один маркер и перемещает его в указанное местоположение.