Я добавил скрипт API карты в индекс. js возврат класса:
<script>
var mapContainer = document.getElementById('map'),
mapOption = {
center: new kakao.maps.LatLng(37.56591, 126.97894),
level: 4,
mapTypeId : kakao.maps.MapTypeId.ROADMAP
};
var map = new kakao.maps.Map(mapContainer, mapOption);
</script>
Он дает две ошибки:
'}' ожидается. (Строка 4 ": ") Неожиданный маркер. Вы имели в виду {'}'} или }? (строка 7 "}")
Предполагается работать в html. Разве реакция не должна возвращать атрибуты html? Однажды я подумал, что, может быть, он не принимает скрипт, но в следующем коде нет синтаксической ошибки:
<script src="https://dapi.kakao.com/v2/maps/sdk.js?appkey=3199e8f198aff9d5aff73000faae6608"></script>
* Использование атрибута dangerousSetInner HTML в React тоже не сработало. Он исправляет синтаксическую ошибку, но не показывает мою карту:
https://www.gatsbyjs.org/docs/custom-html/
* не исправляет синтаксическую ошибку
Вот полный код index.js:
import React from "react"
export default class Home extends React.Component {
render() {
return (
<div style={{ color: `purple` }}>
<p>Welcome to donghwankim.com!</p>
<p>Powered by Gatsby</p>
<div id="map" style={{width:'500px', height:'400px'}}></div>
<script src="https://dapi.kakao.com/v2/maps/sdk.js?appkey=3199e8f198aff9d5aff73000faae6608"></script>
<script>
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new kakao.maps.LatLng(37.56591, 126.97894), // 지도의 중심좌표
level: 4, // 지도의 확대 레벨
mapTypeId : kakao.maps.MapTypeId.ROADMAP // 지도종류
};
// 지도를 생성한다
var map = new kakao.maps.Map(mapContainer, mapOption);
</script>
</div>
)}
}
исходный html файл Я попробовал и подтвердил, что работает: (забыл добавить https: и спрятал ключ. Очень жаль.)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>다음 지도 API</title>
</head>
<body>
<div id="map" style="width:1000px;height:500px;"></div>
<script src="https://dapi.kakao.com/v2/maps/sdk.js?appkey=3199e8f198aff9d5aff73000faae6608"></script>
<script>
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new kakao.maps.LatLng(37.56591, 126.97894), // 지도의 중심좌표
level: 4, // 지도의 확대 레벨
mapTypeId : kakao.maps.MapTypeId.ROADMAP // 지도종류
};
// 지도를 생성한다
var map = new kakao.maps.Map(mapContainer, mapOption);
</script>
</body>
</html>