[FAQ] 지도/로컬 API 문의 전 꼭 읽어 주세요.
https://devtalk.kakao.com/t/faq-api/125610
kakao.maps.load(() => {
const container = document.getElementById(‘map’);
const options = {
center: new kakao.maps.LatLng(37.5665, 126.9780),
level: 8,
};
const map = new kakao.maps.Map(container, options);
kakao.maps.loadModule('drawing', function() {
const strokeColor = '#39f',
fillColor = '#cce6ff',
fillOpacity = 0.5,
hintStrokeStyle = 'dash';
const options = {
map: map,
drawingMode: [
kakao.maps.drawing.OverlayType.MARKER,
kakao.maps.drawing.OverlayType.ARROW,
kakao.maps.drawing.OverlayType.POLYLINE,
kakao.maps.drawing.OverlayType.RECTANGLE,
kakao.maps.drawing.OverlayType.CIRCLE,
kakao.maps.drawing.OverlayType.ELLIPSE,
kakao.maps.drawing.OverlayType.POLYGON
],
guideTooltip: ['draw', 'drag', 'edit'],
markerOptions: {
draggable: true,
removable: true
},
arrowOptions: {
draggable: true,
removable: true,
strokeColor: strokeColor,
hintStrokeStyle: hintStrokeStyle
},
polylineOptions: {
draggable: true,
removable: true,
strokeColor: strokeColor,
hintStrokeStyle: hintStrokeStyle
},
rectangleOptions: {
draggable: true,
removable: true,
strokeColor: strokeColor,
fillColor: fillColor,
fillOpacity: fillOpacity
},
circleOptions: {
draggable: true,
removable: true,
strokeColor: strokeColor,
fillColor: fillColor,
fillOpacity: fillOpacity
},
ellipseOptions: {
draggable: true,
removable: true,
strokeColor: strokeColor,
fillColor: fillColor,
fillOpacity: fillOpacity
},
polygonOptions: {
draggable: true,
removable: true,
strokeColor: strokeColor,
fillColor: fillColor,
fillOpacity: fillOpacity
}
};
const manager = new kakao.maps.drawing.DrawingManager(options);
const toolbox = new kakao.maps.drawing.Toolbox({drawingManager: manager});
map.addControl(toolbox.getElement(), kakao.maps.ControlPosition.TOP);
});
});
를 입력했을때 ERROR TypeError: kakao.maps.loadModule is not a function
at map.component.ts:101:24
at e (sdk.js?appkey=7f430ff67a1db9679978235176cafa1f:2:99)
at o.load (sdk.js?appkey=7f430ff67a1db9679978235176cafa1f:5:9)
at push…/src/app/main/components/body/map/map.component.ts.MapComponent.ngOnInit (map.component.ts:92:20)
at checkAndUpdateDirectiveInline (core.js:9243:1)
at checkAndUpdateNodeInline (core.js:10507:1)
at checkAndUpdateNode (core.js:10469:1)
at debugCheckAndUpdateNode (core.js:11102:1)
at debugCheckDirectivesFn (core.js:11062:1)
at Object.eval [as updateDirectives] (MapComponent_Host.ngfactory.js? [sm]:1:1)
View_MapComponent_Host_0 @ MapComponent_Host.ngfactory.js? [sm]:1
proxyClass @ compiler.js:10173
push…/node_modules/@angular/core/fesm5/core.js.DebugContext_.logError @ core.js:11306
push…/node_modules/@angular/core/fesm5/core.js.ErrorHandler.handleError @ core.js:1719
(anonymous) @ core.js:4578
./node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:391
./node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:150
push…/node_modules/@angular/core/fesm5/core.js.NgZone.runOutsideAngular @ core.js:3779
push…/node_modules/@angular/core/fesm5/core.js.ApplicationRef.tick @ core.js:4578
(anonymous) @ core.js:4462
./node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:391
onInvoke @ core.js:3820
./node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:390
./node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:150
push…/node_modules/@angular/core/fesm5/core.js.NgZone.run @ core.js:3734
next @ core.js:4462
schedulerFn @ core.js:3551
push…/node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub @ Subscriber.js:196
push…/node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next @ Subscriber.js:134
push…/node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next @ Subscriber.js:77
push…/node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next @ Subscriber.js:54
push…/node_modules/rxjs/_esm5/internal/Subject.js.Subject.next @ Subject.js:47
push…/node_modules/@angular/core/fesm5/core.js.EventEmitter.emit @ core.js:3535
checkStable @ core.js:3789
onHasTask @ core.js:3833
./node_modules/zone.js/dist/zone.js.ZoneDelegate.hasTask @ zone.js:443
./node_modules/zone.js/dist/zone.js.ZoneDelegate._updateTaskCount @ zone.js:463
./node_modules/zone.js/dist/zone.js.Zone._updateTaskCount @ zone.js:291
./node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:212
drainMicroTaskQueue @ zone.js:601
Promise.then (async)
scheduleMicroTask @ zone.js:584
./node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:413
onScheduleTask @ zone.js:301
./node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:404
./node_modules/zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:238
./node_modules/zone.js/dist/zone.js.Zone.scheduleMicroTask @ zone.js:258
scheduleResolveOrReject @ zone.js:879
resolvePromise @ zone.js:825
(anonymous) @ zone.js:741
webpackJsonpCallback @ bootstrap:23
(anonymous) @ main-main-module.js:1
에러가 나옵니다 어떻게 해결할수 있나요?