如何整合< script>在React中添加Google Maps实例 [英] How to incorporate <script> in React to add Google Maps instance
问题描述
与 thinhvo0108 相比，您非常了解如何使用 google-map-react 。他的答案可以在这里找到。
然而，尽管这确实解决了我的问题，但我的原始问题依然存在。想象一下，没有创建反应组件可以消除使用< script> 的麻烦，那么我将如何使用下面问题中所示的脚本实现Google地图。换句话说，如何使用React（ES6 / ES7）以< script> 的形式实现纯JavaScript脚本
我正在努力在我的web应用程序中添加Google地图。我在这里找到了这个伟大的发电机，它给了我这个代码：
<！DOCTYPE html>
< html>
< head>
< meta charset =UTF-8>
< title> Google地图< / title>
< / head>
< body>
< div id =map_canvasstyle =width：500px; height：300px;>< / div>
< script src =https://maps.google.com/maps/api/js>< / script>
< script>
window.onload = function（）{
initialize（）;
};
函数initialize（）{
var myLatlng = new google.maps.LatLng（50.3419169876，5.60793614352）;
var myOptions = {
zoom：16，
center：myLatlng，
mapTypeId：google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map（document.getElementById（map_canvas），myOptions）;
var infowindow = new google.maps.InfoWindow（{
content：Someplace
}）;
var marker = new google.maps.Marker（{
position：myLatlng，
map：map，
title：Someplace
}） ;
google.maps.event.addListener（marker，'click'，function（）{
infowindow.open（map，marker）;
}）;
}
< / script>
< / body>
< / html>
因此，我将这些脚本粘贴到我的index.html文件中。 Google地图实例应该放置在联系人页面上。很显然，当我重新加载/联系页面时，我很快加载了地图。但是，由于window不在反应范围之内，所以无论何时只使用导航栏进行导航，它都不起作用。
我有这个仅包含div的GoogleMaps.js组件id map_canvas：
import从'react'反应
const GoogleMapsInstance =（）=> （
< div id =map_canvasstyle = {{width：'100％'，height：'400px'，overflow：'hidden'}} />
）
export默认GoogleMapsInstance
我想知道如何在这个组件中获取脚本，所以我可以调用脚本on componentDidMount函数或类似的东西。
我也开放给任何其他类型的解决方案，让我快速加载（无iframe）谷歌地图：）
感谢您的帮助！
这种方式并不复杂，对于您首选项，我只是昨天发布，它的工作原理！
如果您想将此地图元素添加到您的组件中，反之亦然，请告诉我！
以下编辑版本（根据您的需求）：
您可以按照本指南使地图显示在您的联系页面上：
首先，安装必要的库：
npm install --save google-map-react
npm install --save prop-types
然后，您可以复制下面的所有内容：
import React，{Component } from'react';
从'google-map-react'导入GoogleMapReact;
const AnyReactComponent =（{text}）=> < DIV> {文本}< / DIV取代;
class MyClass扩展组件{
构造函数（道具）{
super（道具）;
$ render（）{
return（
< GoogleMapReact
defaultCenter = {this.props.center}
defaultZoom = {this.props.zoom}
style = {{width：'500px'，height：'300px'}}
>
< AnyReactComponent
lat = {50.3419169876}
lng = {5.60793614352}
text = {'MY SHOP'}
/>
< / GoogleMapReact>
）;
}
}
MyClass.defaultProps = {
center：{lat：50.34，lng：5.61}，
zoom：16
};
导出默认MyClass;
随时编辑LatLng值和/或MY SHOP文本，我相信您可以还可以使用一些自定义的PNG图片而不是文本元素来显示您喜欢的代表您的店铺的地图钉。
Than you very much to thinhvo0108 for showing how this can be implemented using google-map-react. His answer can be found here.
However although this does solve my problem, my original question remains. Imagine there was no react component created that takes away the hassle of using <script>, how would I then implement Google Maps using the scripts as shown in the question below. In other words, how can one implement pure javascript scripts in the form <script> using React (ES6/ES7)
I am working on adding a Google maps in my web application. I found this great generator here and it gave me this code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Google Maps</title>
</head>
<body>
<div id="map_canvas" style="width:500px;height:300px;"></div>
<script src="https://maps.google.com/maps/api/js"></script>
<script>
window.onload = function() {
initialize();
};
function initialize() {
var myLatlng = new google.maps.LatLng(50.3419169876, 5.60793614352);
var myOptions = {
zoom: 16,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var infowindow = new google.maps.InfoWindow({
content: "Someplace"
});
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: "Someplace"
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
}
</script>
</body>
</html>
So I take the scripts and paste them in my index.html file. The Google maps instance is supposed to be placed on the contact page. Obviously when I reload the page on /contact, I get the map loaded quickly. However since window is outside the scope in react, whenever I just navigate using my navbar, it does not work.
I have this GoogleMaps.js component which only contains the div of id map_canvas:
import React from 'react'
const GoogleMapsInstance = () => (
<div id="map_canvas" style={{ width: '100%', height: '400px', overflow: 'hidden' }} />
)
export default GoogleMapsInstance
I was wondering how I could get the scripts inside this component, so I could call the scripts on componentDidMount function or something like that.
I am also open to any other type of solution that gets me a fast loading (no iframe) google maps :)
Thanks for your help!
This way is not complicated, for your preference, I just posted yesterday and it works!
Implementing google maps with react
If you want to add this map element onto your component or vice versa, please let me know!
EDITED VERSION BELOW (BASED ON YOUR NEED):
You can just follow this guide to make the map appear on your contact page:
First, install necessary libraries:
npm install --save google-map-react
npm install --save prop-types
Then, you may copy the whole thing below:
import React, { Component } from 'react';
import GoogleMapReact from 'google-map-react';
const AnyReactComponent = ({ text }) => <div>{text}</div>;
class MyClass extends Component {
constructor(props){
super(props);
}
render() {
return (
<GoogleMapReact
defaultCenter={this.props.center}
defaultZoom={this.props.zoom}
style={{width: '500px', height: '300px'}}
>
<AnyReactComponent
lat={50.3419169876}
lng={5.60793614352}
text={'MY SHOP'}
/>
</GoogleMapReact>
);
}
}
MyClass.defaultProps = {
center: {lat: 50.34, lng: 5.61},
zoom: 16
};
export default MyClass;
Feel free to edit the LatLng value, and/or "MY SHOP" text, I believe you can also use some custom PNG image instead of text-element to show your preferred map-pin representing your shop
这篇关于如何整合< script>在React中添加Google Maps实例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
