vue.js를 기반으로 지도에서 특정 위치 기준 반경 500m 내의 marker 정보를 불러오고 싶어서 원을 그린 뒤 받아오려고 합니다.
그런데 Cannot read property ‘DrawingManager’ of undefined 에러가 발생하네요ㅠ
몇시간동안 붙잡고 있는데 해결법을 도무지 모르겠어서 이렇게 글 남깁니다…
힌트 정도만 주셔도 열심히 해보겠습니다…
<template>
<div id="app">
주소 :
<input v-model="locate" />
<button v-on:click="initMap()">입력</button>
<div id="map" style="width:600px;height:500px;"></div>
</div>
</template>
<script>
export default {
data() {
return {
locate: "",
map: "",
infowindow: "",
marker: "",
markers: [],
manager:"",
};
},
mounted() {
if (window.kakao && window.kakao.maps) {
this.initMap();
} else {
const script = document.createElement("script");
/* global kakao */
script.onload = () => kakao.maps.load(this.initMap);
script.src =
"//dapi.kakao.com/v2/maps/sdk.js?appkey=2c5396e8e6c3024a78d5892b527feb00&libraries=services,clusterer,drawing";
document.head.appendChild(script);
}
},
methods: {
initMap() {
this.infowindow = new kakao.maps.InfoWindow({ zIndex: 1 });
console.log(this.infowindow);
var mapContainer = document.getElementById("map"),
mapOption = {
center: new kakao.maps.LatLng(37.5949801678939, 127.080199673831), //고객이 등록한 정보가 default
level: 3,
};
this.map = new kakao.maps.Map(mapContainer, mapOption),
this.manager = new kakao.maps.drawing.DrawingManager({
map: this.map,
drawingMode: [
kakao.maps.drawing.OverlayType.POLYGON
],
});
var ps = new kakao.maps.services.Places();
ps.keywordSearch(this.locate, this.placesSearchCB);
},
placesSearchCB: function (data, status) {
if (status === kakao.maps.services.Status.OK) {
var bounds = new kakao.maps.LatLngBounds();
for (var i = 0; i < data.length; i++) {
this.displayMarker(data[i]);
bounds.extend(new kakao.maps.LatLng(data[i].y, data[i].x));
}
this.map.setBounds(bounds);
this.getMarker();
}
},
displayMarker: function (place) {
this.markers.push([place.place_name,place.y,place.x])
var window = this.infowindow;
var map = this.map;
this.marker = new kakao.maps.Marker({
map: this.map,
position: new kakao.maps.LatLng(place.y, place.x),
});
window.open(map,this.marker)
kakao.maps.event.addListener(this.marker, "click", function () {
window.setContent(
'<div style="padding:5px;font-size:12px;">' +
place.place_name +
"</div>"
);
window.open(map, this.marker);
});
},
/*아래 함수가 원 범위 설정해서 markers 불러오게 하려고 작성한 함수인데, 아래 함수가 없을때는 검색기능 및 마커들 표시 잘 됐었습니다.*/
getMarker: function () {
var range = null; // 반경 검색을 위해 그린 원 객체 참조
var markersInCircle = []; // 결과를 담을 배열
var manager = this.manager;
manager.addListener('click', function (e) {
console.log("동주1")
if (e.overlayType === kakao.maps.drawing.OverlayType.CIRCLE) {
if (range) {
manager.remove(range); // 기존에 지도위에 그려진 원은 삭제
}
}
});
manager.addListener('drawend', function (e) {
console.log("동주2")
if (e.overlayType != kakao.maps.drawing.OverlayType.CIRCLE) {
var circle = e.target;
var center = circle.getPosition(37.5949801678939, 127.080199673831);
var radius = circle.getRadius(500); // m 단위
var line = new kakao.maps.Polyline(); // for calculating length
this.markers.forEach(function(marker) {
var path = [ marker.getPosition(), center ];
line.setPath(path);
var dist = line.getLength();
if (dist < radius) {
markersInCircle.push(marker);
}
});
range = circle;
console.log("동주2")
}
});
}
}
}
</script>
<style>
#map {
width: 1000px;
height: 1000px;
}
</style>