如何在添加新标记时自动删除上一个标记?

时间:2017-02-07 17:20:44

标签: javascript jquery angularjs ajax leaflet

enter image description here我有邮政编码下拉列表,我想在传单地图上显示选定的邮政编码。为此,我做了Geo编码以获得lat。现在我希望当用户从下拉列表中选择另一个邮政编码时,应自动删除之前的标记。请建议我。

$.ajax({
           url : "http://maps.googleapis.com/maps/api/geocode/json?address=santa+cruz&components=postal_code:"+$scope.code+"&sensor=false",
           method: "POST",
           success:function(data){
               latitude = data.results[0].geometry.location.lat;
               longitude= data.results[0].geometry.location.lng;
               console.log('Your latitude is :'+latitude+' and longitude is '+longitude);
               var latlng = new google.maps.LatLng(latitude, longitude);                    
                leafletData.getMap('lfdt').then(function(map){
                var marker= L.marker([latitude,longitude]).addTo(map);
                var group = new L.featureGroup([marker]);
                console.log("Group",group);
                map.fitBounds(group.getBounds());
                map.setZoom(6);
                var geocoder = geocoder = new google.maps.Geocoder();
                geocoder.geocode({ 'latLng': latlng }, function (results, status) {
                if (status == google.maps.GeocoderStatus.OK)
                {
                    if (results[1]) 
                    {
                    marker.bindPopup(results[1].formatted_address);
                        marker.on('mouseover', function (e) {
                            this.openPopup();
                        });
                        marker.on('mouseout', function (e) {
                            this.closePopup();
                        });
                    }
                    console.log("Location: " , results[1].formatted_address);
                }
                });                 
                console.log("geocode",geocoder);                                                                                                                
                });                                                                                             
            }
        });
    });

1 个答案:

答案 0 :(得分:0)

您可以尝试以下代码

var marker;
$.ajax({
       url : "http://maps.googleapis.com/maps/api/geocode/json?address=santa+cruz&components=postal_code:"+$scope.code+"&sensor=false",
       method: "POST",
       success:function(data){

           latitude = data.results[0].geometry.location.lat;
           longitude= data.results[0].geometry.location.lng;
           console.log('Your latitude is :'+latitude+' and longitude is '+longitude);
           var latlng = new google.maps.LatLng(latitude, longitude);                    
            leafletData.getMap('lfdt').then(function(map){

           if (marker) { // check
            map.removeLayer(marker); // remove
           }

            marker= L.marker([latitude,longitude]).addTo(map);
            var group = new L.featureGroup([marker]);
            console.log("Group",group);
            map.fitBounds(group.getBounds());
            map.setZoom(6);
            var geocoder = geocoder = new google.maps.Geocoder();
            geocoder.geocode({ 'latLng': latlng }, function (results, status) {
            if (status == google.maps.GeocoderStatus.OK)
            {
                if (results[1]) 
                {
                marker.bindPopup(results[1].formatted_address);
                    marker.on('mouseover', function (e) {
                        this.openPopup();
                    });
                    marker.on('mouseout', function (e) {
                        this.closePopup();
                    });
                }
                console.log("Location: " , results[1].formatted_address);
            }
            });                 
            console.log("geocode",geocoder);                                                                                                                
            });                                                                                             
        }
    });
});