[leaflet] Map 지도 + leaflet // 주소 검색 (8)

1. 주소검색
2. 주소 검색 후 마커 찍기
3. 다른 곳 검색하면 마커 삭제 후 찍기
4. 검색전 삭제 가능

1. 다운로드

다운로드링크
Control.Geocoder.css
Control.Geocoder.js

2. 코드 작성

map.jsp

<script> 
var _geocodeMarker;
var mymap;

function remove() {
	if (_geocodeMarker) {
		mymap.removeLayer(_geocodeMarker);
	}
}

navigator.geolocation.getCurrentPosition(function(pos) { 
  var seachMap = L.Control.geocoder().addTo(mymap);
	seachMap.markGeocode = ( result ) => {
		
		mymap.fitBounds(result.bbox);
		
		if (_geocodeMarker) {
			mymap.removeLayer(_geocodeMarker);
		}
		
		var txt2 = '<div class="img-box"><button type="button" class="remove">'
			txt2 += '<img class="img" src="plugins/draw/sample/images/spritesheet-remove.png" alt="삭제" width="50%;">';
			txt2 += '<img class="img-hover" src="plugins/draw/sample/images/spritesheet-remove2.png" alt="삭제2" width="40%;" style="margin-left: 8px;">';
			txt2 += '</button></div>';
			
		_geocodeMarker = new L.Marker(result.center)
		.bindPopup(result.html + txt2 || result.name + txt2)
		.addTo(mymap)
		.openPopup();
	}
}); 
</script>

나중에 시간이 된다면 추가로 DB저장/삭제도 해봐야겠다
일단은 지도는 여기까지~

참고
https://github.com/perliedman/leaflet-control-geocoder
https://www.unpkg.com/browse/leaflet-control-geocoder@1.3.2/dist/
https://gis.stackexchange.com/questions/325945/search-control-on-leaflet