/global kakao/
import React, { Component } from ‘react’;
import ‘./App.css’;
import jQuery from “jquery”;
import $ from ‘jquery’;
class App extends Component {
componentDidMount() {
const script = document.createElement('script');
script.async = true;
script.src = "https://dapi.kakao.com/v2/maps/sdk.js?appkey=dfa2af9ba8522d9bcb5aeef8e92ddb93&libraries=services,clusterer,drawing&autoload=false";
document.head.appendChild(script);
script.onload = () => {
kakao.maps.load(() => {
const el = document.getElementById('map');
const map = new kakao.maps.Map(el, {
center: new kakao.maps.Coords(523951.25, 1085073.75)
});
var clusterer = new kakao.maps.MarkerClusterer({
map: map,
averageCenter: true,
minLevel: 10
});
var data = {
"positions": [
{
"lat": 37.27943075229118,
"lng": 127.01763998406159
},
{
"lat": 37.55915668706214,
"lng": 126.92536526611102
},
{
"lat": 35.13854258261161,
"lng": 129.1014781294671
…
var markers = data.positions.map(function(i, position) {
return new kakao.maps.Marker({
position : new kakao.maps.LatLng(position.lat, position.lng)
});
});
clusterer.addMarkers(markers);
clusterer.setMap(map);
});
리액트로 카카오 api를 사용하려고 하는데 지도랑 마커 표시는 잘 뜨는데 클러스터화 된 마커가 표시가 안되네요 ㅠㅠ
src로 분명 cluster 라이브러리를 추가한것 같은데… 콘솔을 봐도 오류가 안뜨고 클러스터 마커표시만 안뜨니까 뭐가 잘못된 건지 모르겠네요… setMap 메소드를 안해서 그런가 했는데 해봐도 안되고…
A cookie associated with a cross-site resource at http://kakao.com/ was set without the SameSite attribute. A future release of Microsoft Edge will only deliver cookies with cross-site requests if they are set with SameSite=None and Secure. You can review cookies in developer tools under Application>Storage>Cookies and see more details at https://www.chromestatus.com/feature/5088147346030592 and https://www.chromestatus.com/feature/5633521622188032.
에러는 아니고 그냥 주의사항으로 위 문구과 뜨던데 혹시 이것과 관련있을까요??