将 javascript 地图代码转换为 React

Question

我是 React JS 的新手。我有以下代码使用 JAvascript.

生成地图

<title>Untitled Document</title>
</head>

<body>
<div id="map" style="height:800px;"></div>
<script>
      function initMap() {
        var myLatLng = {lat: 33.847862, lng: -84.363433};

        var locations = [
          //list of locations
        ];
        var infowindow = new google.maps.InfoWindow();
        var marker, i;

        // Create a map object and specify the DOM element for display.
        var map = new google.maps.Map(document.getElementById('map'), {
          center: myLatLng,
          scrollwheel: true,
          zoom: 10
        });

        var icon = "img/store_marker.png"

        for (i = 0; i < locations.length; i++) {  
          marker = new google.maps.Marker({
            position: new google.maps.LatLng(locations[i][1], locations[i][2]),
            map: map,
            icon: icon
          });

          google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
              infowindow.setContent("<h3>"+locations[i][0]+ "</h3><br/>"+locations[i][4]+", <br/>"+locations[i][5]+", <br/>"+locations[i][6]);
              infowindow.open(map, marker);
            }
          })(marker, i));
        }
      }

    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBZqPocCNt5mdLvKi5fm72jq6e9on_IoaM&callback=initMap" async defer></script>
</body>
</html>

我需要使用此代码使用 React JS 生成地图。我写了下面的代码，但我没有看到屏幕上呈现任何内容。下面是我的 App.jsx.

import React from 'react';

import GoogleMap from 'google-map-react';
import MyGreatPlace from './my_great_place.jsx';

class App extends React.Component {

    constructor(props) {
        super(props);
    }

     initMap() {
        var myLatLng = {lat: 33.847862, lng: -84.363433};

        var locations = [
          //list of locations
        ];
        var infowindow = new google.maps.InfoWindow();
        var marker, i;

        // Create a map object and specify the DOM element for display.
        var map = new google.maps.Map(document.getElementById('map'), {
          center: myLatLng,
          scrollwheel: true,
          zoom: 10
        });

        var icon = "img/store_marker.png"

        for (i = 0; i < locations.length; i++) {  
          marker = new google.maps.Marker({
            position: new google.maps.LatLng(locations[i][1], locations[i][2]),
            map: map,
            icon: icon
          });

          google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
              infowindow.setContent("<h3>"+locations[i][0]+ "</h3><br/>"+locations[i][4]+", <br/>"+locations[i][5]+", <br/>"+locations[i][6]);
              infowindow.open(map, marker);
            }
          })(marker, i));
        }
      }

    render() {

        initMap();

        return (
            <div id="map" style="height:800px;"></div>
        );
    }
}

App.propTypes = {
}

App.defaultProps = {
    center: [33.847862, -84.363433],
    zoom: 10,
    scrollwheel: true
}


export default App;

下面是我的index.html.

<!DOCTYPE html>
<html lang = "en">

   <head>
      <meta charset = "UTF-8">
      <title>React App</title>
   </head>

   <body>
      <div id = "app"></div>
      <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBZqPocCNt5mdLvKi5fm72jq6e9on_IoaM" async defer></script>
   </body>

</html>

我删除了 JS html url 中的“&callback=initMap”，因为 React JS 中没有这样的回调。有人可以帮忙吗？

Answer 1

在您使用 babel 等编译您的代码之前，浏览器不会知道如何解释您的代码。

Answer 2

没看到调用React渲染组件的地方，应该有：

ReactDOM.render(
<Foo/>,
document.getElementById('bar')
);

在代码的某处，如果你想让 React 渲染到屏幕上。

看看https://facebook.github.io/react/blog/2015/10/01/react-render-and-top-level-api.html

和：https://facebook.github.io/react/docs/displaying-data.html

Answer 3

您应该解决代码中的以下问题：

正如 Petter 所说，您应该使用 ReactDOM.render 来渲染您的组件。
您的组件正在返回一个 div，它实际上是空的。如果您希望将 initMap 包含在 div 中，那么您应该像这样包含它：

<div id="map"> {this.initMap()} </div>

您还应该将样式方面的语法更改为如下所示（如果您坚持使用 instyle）：

<div id="map" style={{height:'800px'}}> {this.initMap() </div>

希望对您有所帮助:-)

将 javascript 地图代码转换为 React

Converting a javascript map code to React

javascript

google-maps

jsx

google-maps-api-3

reactjs