안녕하세요 고수분님들 하다하다 도움을 요청드립니다…
현재 사용 data는 다음과 같습니다…
mounted() {
if (window.kakao && window.kakao.maps) {
this.initMap()
} else {
const script = document.createElement('script');
script.onload = () => kakao.maps.load(this.initMap);
script.src = '//dapi.kakao.com/v2/maps/sdk.jsautoload=false&appkey={카카오key}&libraries=services';
document.head.appendChild(script)
}
methods: {
...mapActions(houseStore, ["getStarbucks"]),
initMap () {
var mapContainer = document.getElementById('map')
var mapOption = {
center: new kakao.maps.LatLng(33.450701, 126.570667),
level: 3
};
this.map = new kakao.maps.Map(mapContainer, mapOption);
this.next = this.house;
},
를 사용하여 처음 mount될 때 지도를 초기화하고 있습니다.
그 후
리스트를 클릭 시 해당 아파트 매물과 주변 상권 정보를 제공하는 사이트를 만들고 있는데,
위처럼 리스트 클릭 시, 맵이 전부 날아가고 주변 상권만 깨진 맵 위에 표시되는 문제가 있습니다.
아래는 나머지 코드입니다…
updateMap() {
var geocoder = new kakao.maps.services.Geocoder();
geocoder.addressSearch(`${this.house.법정동}+" "+${this.house.지번}`, (result, status) => {
if (status === kakao.maps.services.Status.OK) {
var coords = new kakao.maps.LatLng(result[0].y, result[0].x);
if(this.marker != null) this.marker.setMap(null);
this.marker = new kakao.maps.Marker({
map: this.map,
position: coords,
});
// 스타벅스 매장 가져오기
this.getStarbucks(this.house.도로명시군구코드);
console.log(this.starbuckses);
this.starbuckses.forEach(store => {
this.starbucks.push(new kakao.maps.LatLng(store.lat, store.lng));
});
// console.log(this.starbucks);
this.createCoffeeMarkers(); // 커피숍 마커를 생성하고 커피숍 마커 배열에 추가합니다
this.changeMarker('coffee');
var bounds = new kakao.maps.LatLngBounds();
for(var i =0; i<this.starbucks.length; i++){
bounds.extend(this.starbucks[i]);
}
this.map.setBounds(bounds);
this.marker.setMap(this.map);
// 지도의 중심을 결과값으로 받은 위치로 이동시킵니다
}
});
},
createMarkerImage(src, size, options) {
var markerImage = new kakao.maps.MarkerImage(src, size, options);
return markerImage;
},
createMarker(position, image) {
// console.log(position);
var marker = new kakao.maps.Marker({
map : this.map,
position: position,
image: image
});
return marker;
},
createCoffeeMarkers() {
for (var i = 0; i < this.starbucks.length; i++) {
var imageSize = new kakao.maps.Size(22, 26),
imageOptions = {
spriteOrigin: new kakao.maps.Point(10, 0),
spriteSize: new kakao.maps.Size(36, 98)
};
// 마커이미지와 마커를 생성합니다
var markerImage = this.createMarkerImage(this.markerImageSrc, imageSize, imageOptions),
s_marker = this.createMarker(this.starbucks[i], markerImage);
// 생성된 마커를 커피숍 마커 배열에 추가합니다
this.coffeeMarkers.push(s_marker);
}
},
setCoffeeMarkers() {
for (var i = 0; i < this.coffeeMarkers.length; i++) {
this.coffeeMarkers[i].setMap(this.map);
}
},
changeMarker(type){
console.log('changeMarker!');
var coffeeMenu = document.getElementById('coffeeMenu');
// 커피숍 카테고리가 클릭됐을 때
if (type === 'coffee') {
// 커피숍 카테고리를 선택된 스타일로 변경하고
coffeeMenu.className = 'menu_selected';
// 커피숍 마커들만 지도에 표시하도록 설정합니다
this.setCoffeeMarkers();
}
},
},
updated() {
this.$nextTick(function() {
if (this.next != this.house) {
this.updateMap(this.house);
this.next = this.house;
}
});
},
computed: {
…mapState(houseStore, [“house”,“starbuckses”]),
},
콘솔창과, 스웨거, 개발자도구를 활용해보았을 때,
db에서 정상적으로 데이터가 넘어오는거 봐서는 이 문서에서의 잘못으로 생각됩니다,
잘부탁드립니다