[英]Using Google Map API inside a React component
I am struggling over the way to use Google Map API inside a React component. 我正在努力在React组件中使用Google Map API的方式。 I did not want to use popular
react-google-maps
nor google-map-react
packages, but rather create my own. 我不想使用流行的
react-google-maps
或google-map-react
包,而是创建自己的包。
I managed to load the script tag with the Google Map API from the React component. 我设法通过React组件使用Google Map API加载了脚本标签。 However, how do I manipulate the Google API from here?
但是,如何从此处操作Google API? For example, initializing the map with even basic configuration like below?
例如,使用以下基本配置初始化地图?
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
Here is my component. 这是我的组件。 Any advice is appreciated!
任何建议表示赞赏! thanks!
谢谢!
import React, { Component } from 'react'; // Load Google API in script tag and append function loadScript(src) { return new Promise((resolve, reject) => { let script = document.createElement('script'); script.src = src; script.addEventListener('load', function() { resolve(); }); script.addEventListener('error', function(e) { reject(e); }); document.body.appendChild(script); }); } const script = 'https://maps.googleapis.com/maps/api/js?key=MY_API_KEY'; class MyGoogleMap extends Component { constructor(props) { super(props); this.state = {}; } componentDidMount() { // first load the script into html loadScript(script).then(function() { console.log('SUCCESS'); // Where do I go from here? }); } render() { return <div />; } } export default MyGoogleMap;
Create GoogleMap component with ref, to display google map inside that div. 使用ref创建GoogleMap组件,以在该div中显示google map。
import React, { Component } from 'react';
class GoogleMap extends Component {
componentDidMount() {
new google.maps.Map(this.refs.map, {
zoom: 12,
center: {
lat: this.props.lat,
lng: this.props.lon
}
});
}
render() {
return <div className="google-map" ref="map" />
}
}
export default GoogleMap;
Use it in Component you like like this: 在喜欢的组件中使用它:
<GoogleMap lat={lat} lon={lon}/>
by passing latitude and longitude of a city. 通过城市的纬度和经度。 To be able to see it you need to set width and height of css class
google-map
(or whatever you name it). 为了能够看到它,您需要设置CSS类
google-map
宽度和高度(或任何您命名的名称)。 for example: 例如:
div.google-map {
height: 150px;
width: 250px;
}
EDIT 编辑
inside head load script: 内部头部加载脚本:
<script src="https://maps.googleapis.com/maps/api/js"></script>
I tought you have done that, because in your code you also use new google.maps...
. 我相信您已经做到了,因为在您的代码中您还使用了
new google.maps...
If you cant call it like just google, try new window.google.maps...
如果您不能像Google那样调用它,请尝试
new window.google.maps...
I actually found my own solution, so I am sharing for anyone who would meet the same problem. 我实际上找到了自己的解决方案,所以我将与遇到相同问题的任何人共享。
The basic logic is to use window
object to access google
. 基本逻辑是使用
window
对象访问google
。 So, after I load the script as I did from the question, I initialize my map as: 因此,按照问题的要求加载脚本后,我将地图初始化为:
initMap = () => { // 'google' could be accessed from 'window' object const map = new window.google.maps.Map( document.getElementById('googleMap'), { zoom: 14, center: { lat: LATITUDE, lng: LONGTITUDE } } ); // putting a marker on it const marker = new window.google.maps.Marker({ position: { lat: LATITUDE, lng: LONGTITUDE }, map: map }); }; render() { return ( <div id="googleMap" style={width: WIDTH, height: HEIGHT}/> ); }
Any comment is welcomed :) 欢迎任何评论:)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.