안녕하세요
하나의 화면에 좌측은 MAP창, 우측은 로드뷰 창으로 구현하였습니다.
그런데 Map창에 사용자버튼 ‘기준점’ 체크박스가 있을 경우 마커와 CustomOverlay가 맵에도 보이고, 로드뷰에도 보이게 하며, 만약 체큰박스를 해제하면 맵과 동시에 로드뷰의 마커와 CustomOverlay도 사라지게 하는 기능이 구현가능한가요?
현재는 맵창에만 구현했는데, 맵창의 버튼이 로드뷰창 안의 내용까지 on/off 가 가능한지 문의 드립니다.
샘플로 예시코드를 알려주시면 고맙겠습니다.
로드뷰에 마커와 인포윈도우 올리기 - Kakao 지도 Web API
지도에 올린 마커, 인포인도우와 마찬가지로 로드뷰에 올린 마커와 인포윈도우를 전역으로 관리하고
삭제 시 아래 API를 호출하면 삭제할 수 있습니다.
rMarker.setMap(null); //마커 삭제
rLabel.close(); //인포윈도우 삭제
네. 감사합니다. 알려주신 내용으로 참고하여 수정했습니다.
잘 작동이 되긴 되는 것같은데 로드뷰를 활성화시키면 Map창의 CustomOverlay가 사라지고 마커만 남는 현상이 있습니다.
var positions = [
{content:'<div class="pMain">836</div>', latlng:new kakao.maps.LatLng(36.0030475118601,127.163870318118)},
{content:'<div class="pPoint">3632</div>', latlng:new kakao.maps.LatLng(36.0012424513529,127.163130134477)},
{content:'<div class="pPoint">3630</div>', latlng:new kakao.maps.LatLng(36.0043062216569,127.161776069109)},
{content:'<div class="pPoint">3629</div>', latlng:new kakao.maps.LatLng(36.0051718099366,127.161072852039)},
{content:'<div class="pPoint">3633</div>', latlng:new kakao.maps.LatLng(35.9997981816674,127.163824111943)},
{content:'<div class="pPoint">3628</div>', latlng:new kakao.maps.LatLng(36.0065801547077,127.160878947223)},
{content:'<div class="pRef">220218/분할19/<span class="bold-blue">기준점</span></div>', latlng:new kakao.maps.LatLng(36.0033425105033,127.16424714856)},
{content:'<div class="pRef">220218/분할19/<span class="bold-blue">기준점</span></div>', latlng:new kakao.maps.LatLng(36.0032733748472,127.164321095625)},
{content:'<div class="pRef">220818/분할475/<span class="bold-blue">기준점</span></div>', latlng:new kakao.maps.LatLng(36.0053572860067,127.163469142172)},
{content:'<div class="pRef">220818/분할475/<span class="bold-blue">기준점</span></div>', latlng:new kakao.maps.LatLng(36.0063710141821,127.163055180673)},
{content:'<div class="pRef">221115/분할171/<span class="bold-blue">기준점</span></div>', latlng:new kakao.maps.LatLng(35.9988062955341,127.163287375074)},
{content:'<div class="pRef">221115/분할171/<span class="bold-blue">기준점</span></div>', latlng:new kakao.maps.LatLng(35.998610095567,127.16322231167)}
];
var markers1 =[];
var markers2 =[];
var rmarkers1=[];
var rmarkers2=[];
var minfo1 =[];
var minfo2 =[];
var rinfo1=[];
var rinfo2=[];
var bounds = new kakao.maps.LatLngBounds();
var imageSrc = 'Main.png', // 마커이미지의 주소입니다
imageSize = new kakao.maps.Size(45, 45), // 마커이미지의 크기입니다
imageOption = {offset: new kakao.maps.Point(25, 45)};
var markerMain = new kakao.maps.MarkerImage(imageSrc, imageSize, imageOption);
var imageSrc2 = 'ref.png', // 마커이미지의 주소입니다
imageSize = new kakao.maps.Size(45, 45), // 마커이미지의 크기입니다
imageOption = {offset: new kakao.maps.Point(25, 45)};
var markerRef = new kakao.maps.MarkerImage(imageSrc2, imageSize, imageOption);
var infoshow = true;
for (var i = 0; i < positions.length; i++) {
var marker;
var OverPoint;
var OverPoint1;
var OverPoint2;
if(i===0){
marker = new kakao.maps.Marker({ map: map, position: positions[i].latlng,image:markerMain });
OverPoint = new kakao.maps.CustomOverlay({ map: map, position: marker.getPosition(), content: positions[i].content })
}
else if(positions[i].content.includes('pPoint') ){
marker = new kakao.maps.Marker({ map: map, position: positions[i].latlng, clickable:true });
markers1.push(marker);
OverPoint1 = new kakao.maps.CustomOverlay({ map: map, position: marker.getPosition(), content: positions[i].content });
kakao.maps.event.addListener(marker, 'click', markerClickListener(map, OverPoint1));
minfo1.push(OverPoint1);
rinfo1.push(OverPoint1);
}
else{
marker = new kakao.maps.Marker({ map: map, position: positions[i].latlng, image:markerRef });
markers2.push(marker);
OverPoint2 = new kakao.maps.CustomOverlay({ map: map, position: marker.getPosition(), content: positions[i].content });
kakao.maps.event.addListener(marker, 'click', markerClickListener(map, OverPoint2));
minfo2.push(OverPoint2);
rinfo2.push(OverPoint2);
}
bounds.extend(positions[i].latlng);
}
map.setBounds(bounds);
var clusterer = new kakao.maps.MarkerClusterer({
map: map,
markers: markers1,
averageCenter: true,
minLevel: 2
});
kakao.maps.event.addListener(rv, 'init', function() {
mapWalker.setMap(map);
kakao.maps.event.addListener(rv, 'viewpoint_changed', function(){
var viewpoint = rv.getViewpoint();
mapWalker.setAngle(viewpoint.pan);
});
kakao.maps.event.addListener(rv, 'position_changed', function(){
var position = rv.getPosition();
if(overlayOn) {
mapWalker.setPosition(position);}
map.setCenter(position);});
for (var i = 0; i < positions.length; i++) {
var rmarker;
if(i===0){
rmarker = new kakao.maps.Marker({ map: rv, position: positions[i].latlng, image:markerMain });
}
else if(positions[i].content.includes('pPoint') ){
rmarker = new kakao.maps.Marker({ map: rv, position: positions[i].latlng, clickable:true });
rmarker.setAltitude(-0.8);
rmarker.setRange(300);
rmarkers1.push(rmarker);
}
else
{
rmarker = new kakao.maps.Marker({ map: rv, position: positions[i].latlng, image:markerRef });
rmarker.setAltitude(0);
rmarker.setRange(300);
rmarkers2.push(rmarker);
}
}
for (var i = 0; i < rinfo1.length; i++)
{rinfo1[i].setMap(rv);}
for (var i =0; i < rinfo2.length; i++)
{rinfo2[i].setMap(rv);}
});
function setOverlayMapTypeId(){
var chkUseDistrict = document.getElementById('chkUseDistrict'),
chkPoint = document.getElementById('chkPoint');
chkRef = document.getElementById('chkRef');
for (var type in mapTypes) {map.removeOverlayMapTypeId(mapTypes[type]);}
if(chkUseDistrict.checked){map.addOverlayMapTypeId(mapTypes.useDistrict);}
if(chkPoint.checked){
setMarkers1(map);setrMarkers1(rv);
clusterer.addMarkers(markers1, false);}
else{setMarkers1(null);setrMarkers1(null);
clusterer.clear();}
if(chkRef.checked){
setMarkers2(map);
setrMarkers2(rv);}
else{
setMarkers2(null);
setrMarkers2(null);}
}
function setMarkers1(map) {
for (var i = 0; i < markers1.length; i++) {
markers1[i].setMap(map);
minfo1[i].setMap(map);
}
}
function setMarkers2(map) {
for (var i = 0; i < markers2.length; i++) {
markers2[i].setMap(map);
minfo2[i].setMap(map);
}
}
function setrMarkers1(rv) {
for (var i = 0; i < rmarkers1.length; i++) {
rmarkers1[i].setMap(rv);
rinfo1[i].setMap(rv);}
}
function setrMarkers2(rv) {
for (var i = 0; i < rmarkers2.length; i++) {
rmarkers2[i].setMap(rv);
rinfo2[i].setMap(rv);
}
}
function markerClickListener(map, OverPoint) {
return function () {
if (infoshow == false) {OverPoint.setMap(map);infoshow = true;}
else {OverPoint.setMap(null);infoshow = false;}
}
}
이 코드상에서 어떤문제가 있는지 모르겠는데. 원래 로드뷰와 MAP창의 CustomOverlay는 동시에 연동이 안되는 건가요?
마커는 markers1, 2는 Map창, rmarkers1,2는 로드뷰
커스텀오브레이는 minfo1,minfo2는 맵창, rinfo1, rinfo2는 로드뷰 창 으로 따로 구분하였습니다.
로드뷰와 맵에서 동일한 커스텀 오버레이 1개를 공유해서 사용하고 있습니다.
지도에 올릴 커스텀 오버레이와 로드뷰에 올릴 커스텀 오버레이를 각각 생성해서 사용해 주세요.
//지도에 올릴 커스텀 오버레이
let mapOverlay = new kakao.maps.CustomOverlay({ map: map, position: marker.getPosition(), content: positions[i].content });
//로드뷰에 올릴 커스텀 오버레이
let rvOverlay = new kakao.maps.CustomOverlay({ map: rv, position: marker.getPosition(), content: positions[i].content });
minfo1.push(mapOverlay);
rinfo1.push(rvOverlay);
아… 로드뷰와 맵에 따로 구분해야 하는군요.
감사합니다.
1개의 좋아요