0

我将地图 API 脚本添加到 index.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 行“：”）意外的令牌。你是说{'}'}还是&rbrace;？（第 7 行“}”）

它应该在html中工作。反应不应该返回html属性吗？我曾经以为它可能不接受脚本，但以下代码没有语法错误：

<script src="https://dapi.kakao.com/v2/maps/sdk.js?appkey=3199e8f198aff9d5aff73000faae6608"></script>

*使用 React 的 dangerouslySetInnerHTML 属性也不起作用。它确实修复了语法错误，但没有显示我的地图：

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>
4

1 回答 1

1

您可以使用dangerouslySetInnerHTML.

<script
  dangerouslySetInnerHTML={{
    __html: `
          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); 
        `,
  }}
/>
于 2020-06-19T00:56:15.277 回答