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中的“＆amp; callback = initMap”，因为在React JS中没有这样的回调。有人可以帮忙吗？

Answer 1

我看不到你调用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 2

您应该使用代码解决以下问题：

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

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

您还应该将样式更改为类似这样的语法（如果您使用instyle）：

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

希望有所帮助： - ）

Answer 3

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

将javascript地图代码转换为React

3 个答案: