여분필드값으로 카카오 지도 보이려면
본문
글쓰기에서 지도검색 후 선택 방식 말고
여분필드 가령 w_9 값 입력만으로
글보기에서 카카오 지도 보여줄 수 있을까요?
view 페이지 코드 부탁드립니다.
답변 2
wr_9 를 어떻게 넣으면 될까요?
------------------------------------
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
level: 3 // 지도의 확대 레벨
};
// 지도를 생성합니다
var map = new kakao.maps.Map(mapContainer, mapOption);
// 주소-좌표 변환 객체를 생성합니다
var geocoder = new kakao.maps.services.Geocoder();
// 주소로 좌표를 검색합니다
geocoder.addressSearch('제주특별자치도 제주시 첨단로 242', function(result, status) {
// 정상적으로 검색이 완료됐으면
if (status === kakao.maps.services.Status.OK) {
var coords = new kakao.maps.LatLng(result[0].y, result[0].x);
// 결과값으로 받은 위치를 마커로 표시합니다
var marker = new kakao.maps.Marker({
map: map,
position: coords
});
// 인포윈도우로 장소에 대한 설명을 표시합니다
var infowindow = new kakao.maps.InfoWindow({
content: '<div style="width:150px;text-align:center;padding:6px 0;">우리회사</div>'
});
infowindow.open(map, marker);
// 지도의 중심을 결과값으로 받은 위치로 이동시킵니다
map.setCenter(coords);
}
});
제주특별자치도 제주시 첨단로 242
이 부분을 아래 소스로 변경
<?php echo $view['wr_9'] ?>
즉,
geocoder.addressSearch('<?php echo $view['wr_9'] ?>', function(result, status) {
주소 값으로 지도보이기 도움주셔서 고맙습니다~
지도 밑에 로드뷰도 보이게 하려는데
https://apis.map.kakao.com/web/sample/
둘러보아도 잘 모르겠네요 ㅜㅜ
여분필드 wr_9 값으로 보이는 지도 밑으로
로드뷰를 보이고 싶은데
코드를 어떤 것을 넣으면 될까요?
기존 소스에 아래 부분만 추가해주면 되는 겁니다.
// 지도에 로드뷰 정보가 있는 도로를 표시하도록 지도타입을 추가합니다
map.addOverlayMapTypeId(kakao.maps.MapTypeId.ROADVIEW);
기존 지도가 로드뷰 정보가 있는 지도로 바뀌는 것 말고,
기존 지도가 위에 보이고
밑으로 별도 로드뷰(실사진) 지도가 추가로 보이게 하고 싶어서요.
그럼 지도를 2개 표시하면 될것 같네요..
변수나 id 가 겹치는 부분은 변경을 해줘야 합니다.
아 말씀처럼 지도 스크립트를 두개 넣으면 되겠군요.
그런데 카카오 지도 예제 페이지에서
일반 지도는 주소(여분필드)로 장소표시하기 스크립트가 있는데
로드뷰는 주로(여분필드)만으로 보이도록하는 스크립트 예제가 없네요.
카카오맵은 기능을 중복해서 넣을 수 있습니다.
주소로 표시하고 추가로 로드뷰하고.. 2가지 같이 사용 가능.
<script>
function initMap() {
var mapContainer = document.getElementById('map');
var mapOptions = {
center: new kakao.maps.LatLng(37.5665, 126.9780),
level: 8
};
var map = new kakao.maps.Map(mapContainer, mapOptions);
var w_9 = 123.456; // 여기에 w_9 값을 받아온 값으로 할당
// w_9 값을 이용하여 적절한 좌표로 설정
var markerPosition = new kakao.maps.LatLng(w_9, /*다른좌표*/); // w_9 값을 사용하여 좌표 생성
// 마커 생성
var marker = new kakao.maps.Marker({
position: markerPosition
});
// 마커를 지도에 표시
marker.setMap(map);
}
window.onload = function () {
initMap();
};
</script>
<script>
var coordinates = w_9.split('.'); // `.`로 구분된 좌표 값을 배열로 분리
var latitude = parseFloat(coordinates[0]); // 위도
var longitude = parseFloat(coordinates[1]); // 경도
var markerPosition = new kakao.maps.LatLng(latitude, longitude); // 좌표 생성
</script>
