javascript - 如何使用 React JS 将 FusionTablesLayer 放入 Google Maps API 中？

Question

我有一个疑问，我正在使用 ReactJS 来分离模块，并且我有一个名为 InitialMap 的类，我将其导出到 app.js:

import React from 'react';
import loadGoogleMapsAPI from 'load-google-maps-API';

const MAP_STYLES = {
    height: '450px',
    width: '100%'

}

const OPTIONS = {
    center: {
        lat: 41.850033,
        lng: -87.6500523
    },
    zoom: 13,

}

const API_CONFIG = {
    key:'My_Key xxxxxxx',
    language: 'en'
}

export default class InitialMap extends React.Component{
    componentWillUnmount() {

        const allScripts = document.getElementsByTagName( 'script' );

        [].filter.call(
            allScripts,
            ( scpt ) => scpt.src.indexOf( 'My_Key xxxxxxx' ) >= 0
        )[ 0 ].remove();

        window.google = {};


    }

    componentDidMount() {

        loadGoogleMapsAPI( API_CONFIG ).then( googleMaps => {
            new googleMaps.Map( this.refs.map, OPTIONS  );
        }).catch( err => {
            console.warning( 'Something went wrong loading the map', err );
        });

    }

    render() {
        return (
            <div id="page-wrapper">
                <div id= "page-header">
                    <div ref="map" style={MAP_STYLES}>

                    </div>
                </div>
            </div>
        )
    }
}

map 正在屏幕上显示，但我需要放置标记!

问题是我不知道如何让 Fusion Tables 图层使用标记，例如通过 Google 显示红点!

仅使用脚本文件+index.html中的id <div id="map"><div>它正在工作，但我需要将它在特定的 React 模块中使用，并在 app.js 文件中调用它。Google 的文档中有一个例子是这样的:

    function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 41.850033, lng: -87.6500523},
    zoom: 11
  });

  var layer = new google.maps.FusionTablesLayer({
    query: {
      select: '\'Geocodable address\'',
      from: '1mZ53Z70NsChnBMm-qEYmSDOvLXgrreLTkQUvvg'
    }
  });
  layer.setMap(map);
}

(我需要将这个 var 层放入我的代码中!)

如果有人可以帮助我，我将不胜感激!PS:我是 React JS 的新手!

Answer 1

如果您在页面上加载了 API，它的工作方式应该完全相同，只需在创建 map 实例时将其保存在类中，然后您就可以在其他调用中使用它。

    loadGoogleMapsAPI( API_CONFIG ).then( googleMaps => {
        this.map = new googleMaps.Map( this.refs.map, OPTIONS  );

        var layer = new google.maps.FusionTablesLayer({
          query: {
            select: '\'Geocodable address\'',
            from: '1mZ53Z70NsChnBMm-qEYmSDOvLXgrreLTkQUvvg'
          }
        });
        layer.setMap(this.map);
    }).catch( err => {
        console.warning( 'Something went wrong loading the map', err );
    });