如何删除谷歌地图上的旧标记

时间:2017-12-03 11:06:35

标签: javascript jquery google-maps

如何删除旧标记并仅在Google地图上保留最新标记。

我只需要一个标记没有数组。 这是代码。



<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="map" style="width: 100%; height: 400px;"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAA3ATL-GNAlXBPYYBMjdjoNWKUWnJ9i-c"></script>
<script>

           var map;
       function initialize() {
       var haightAshbury = new google.maps.LatLng(52.62440324134009, 4.88054275512695);
        var mapOptions = {
                zoom: 8,
                center: haightAshbury,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
       map = new google.maps.Map(document.getElementById('map'),
                    mapOptions);

      google.maps.event.addListener(map, 'click', function(event) {
                addMarker(event.latLng);
            });
        }

        // Add a marker to the map and push to the array.
        function addMarker(location) {
            var marker = new google.maps.Marker({
                position: location,
                map: map
            });
            var lat = marker.getPosition().lat();
            var lng = marker.getPosition().lng();
            jQuery("#lat").val(lat);
            jQuery("#lng").val(lng);
            
            
    
        }
       google.maps.event.addDomListener(window, 'load', initialize);
    
</script>
<div id="panel">
    <input type="hidden" value="" name="lat" id="lat">
    <br/>
    <input type="hidden" value="" name="lng" id="lng">
&#13;
&#13;
&#13;

3 个答案:

答案 0 :(得分:1)

如果我理解你的话,如果点击它就可以制作出现在地图上的点击制作者,如果你点击其他地方就改变位置:

  var clickmarker = new google.maps.Marker({
     draggable: false
 });

  google.maps.event.addListener(map, 'click', function(event) {

    clickmarker.setPosition(event.latLng);
    clickmarker.setMap(map);
    clickmarker.setAnimation(google.maps.Animation.DROP);
    var lat = clickmarker.getPosition().lat();
    var lng = clickmarker.getPosition().lng();
    jQuery("#lat").val(lat);
    jQuery("#lng").val(lng)


});

所以你的代码是:

<script>

           var map;
       function initialize() {
       var haightAshbury = new google.maps.LatLng(52.62440324134009, 4.88054275512695);
        var mapOptions = {
                zoom: 8,
                center: haightAshbury,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
       map = new google.maps.Map(document.getElementById('map'),
                    mapOptions);


var clickmarker = new google.maps.Marker({
         draggable: false
     });

      google.maps.event.addListener(map, 'click', function(event) {

        clickmarker.setPosition(event.latLng);
        clickmarker.setMap(map);
        clickmarker.setAnimation(google.maps.Animation.DROP);
        var lat = clickmarker.getPosition().lat();
        var lng = clickmarker.getPosition().lng();
        jQuery("#lat").val(lat);
        jQuery("#lng").val(lng)


    });

    }


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

</script>

答案 1 :(得分:0)

您只需更改现有标记的坐标

即可
var marker;

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

答案 2 :(得分:0)

这里是文档:https://developers.google.com/maps/documentation/javascript/examples/marker-remove

似乎你只需要在添加新标记之前删除所有标记,并且你很好。