我有一个疑问,我正在使用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>
)
}
}
地图正在显示在屏幕上,但我需要放置标记!
问题是,我不知道如何将Fusion Tables层设置为使用标记,以显示例如Google的红点!
只使用脚本文件+在index.html <div id="map"><div>
中的id,它是有效的,但我需要将它放在特定的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层!)在我的代码中
如果有人能帮忙,我将不胜感激!附言:我是React JS的新手!
https://stackoverflow.com/questions/47580617
复制相似问题