首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >如何使用React JS将FusionTablesLayer放入Google Maps API?

如何使用React JS将FusionTablesLayer放入Google Maps API?
EN

Stack Overflow用户
提问于 2017-12-01 02:48:52
回答 0查看 340关注 0票数 1

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

代码语言:javascript
运行
复制
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>
        )
    }
}

地图正在显示在屏幕上,但我需要放置标记!

问题是,我不知道如何将Fusion Tables层设置为使用标记,以显示例如Google的红点!

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

代码语言:javascript
运行
复制
    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层!)在我的代码中

如果有人能帮忙,我将不胜感激!附言:我是React JS的新手!

EN

回答

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/47580617

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档