2017-02-07 14 views
0

enter image description here郵便番号のドロップダウンリストがあり、選択した郵便番号をリーフレットの地図に表示したいとします。そのために、私は緯度を長くするためにGeoコーディングを行った。今私はドロップダウンリストから別の郵便番号を選択すると、前のマーカーが自動的に削除する必要があります。私に提案してください。新しいマーカーを追加したときに前のマーカーを自動的に削除する方法は?

$.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);                             
       });                        
      } 
     }); 
    }); 
+0

これはangularjsようには見えません。 '$ .ajax'はjQueryです。 – Claies

答えて

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);                             
      });                        
     } 
    }); 
}); 
+0

このコードを試しましたが、エラーが発生しています。 "TypeError:未定義のプロパティ '_leaflet_id'を読み取ることができません。私に提案してください –

+0

私は未定義を処理する上記のコードを更新しました。今すぐチェックできますか? –

+0

まだ、このコードでコードを更新すると、以前のマーカーが取得されています。 –

関連する問題