/* global kakao*/
import React, { Component } from ‘react’;
class EmrSearch extends Component{
componentDidMount(){
console.log("componentDidMount");
let mapContainer = document.getElementById('map');
let mapOption = {
center: new kakao.maps.LatLng(37.5677463677699,126.9153946742084), //지도의 중심좌표
level: 3
};
let map = new kakao.maps.Map(mapContainer, mapOption); // 지도 생성 및 객체 리턴
if (navigator.geolocation){
navigator.geolocation.getCurrentPosition(function(position){
let lat = position.coords.latitude,
lon = position.coords.longitude;
let locPosition = new kakao.maps.LatLng(lat, lon),
message = '<div style="padding:5px;">여기에 계신가요?!</div>';
// 마커와 인퍼윈도우를 표시합닌다.
displayMarker(locPosition, message);
});
} else{
let locPosition = new kakao.maps.LatLng(37.5677463677699,126.9153946742084),
message = 'geolocation을 사용할 수 없어요..'
displayMarker(locPosition,message);
}
// 지도에 마커와 인포윈도우를 표시하는 함수입니다.
function displayMarker(locPosition, message) {
// 마커를 생성합니다.
let marker = new kakao.maps.Marker({
map: map,
position: locPosition
});
let iwContent = message,
iwRemoveable = true;
var infowindow = new kakao.maps.infoWindow({
content: iwContent,
removable: iwRemoveable
});
infowindow.open(map,marker);
map.setCenter(locPosition);
}
}
render(){
return(
<div id="map" className="Map" style={{ width : '100%', height:'550px'}}></div>
);
}
}
export default EmrSearch;
에러 :
TypeError: kakao.maps.infoWindow is not a constructor
displayMarker
/src/pages/EmrSearch.js:46
43 | let iwContent = message,
44 | iwRemoveable = true;
45 |
46 | var infowindow = new kakao.maps.infoWindow({
| ^ 47 | content: iwContent,
48 | removable: iwRemoveable
49 | });
View compiled
(anonymous function)
C:/Users/Administrator/medical_helper/src/pages/EmrSearch.js:25
22 | message = ‘여기에 계신가요?!’;
23 |
24 | // 마커와 인퍼윈도우를 표시합닌다.
25 | displayMarker(locPosition, message);
| ^ 26 | });
27 | } else{
28 | let locPosition = new kakao.maps.LatLng(37.5677463677699,126.9153946742084),
View compiled
이유가 뭐일까요…