Question

非常感谢您 thinhvo0108 ，了解如何使用 google-map-react 。他的回答可以在这里找到。

＆＃xA;＆＃xA;

然而，虽然这确实解决了我的问题，但我原来的问题仍然存在。想象一下，没有创建反应组件消除了使用＆lt; script＆gt; 的麻烦，我将如何使用脚本实现Google Maps，如下面的问题所示。换句话说，如何使用React（ES6 / ES7）

＆＃xA;＆＃xA; ＆lt; script＆gt; 的形式实现纯javascript脚本>我正在努力在我的网络应用程序中添加Google地图。我发现了这个伟大的发电机这里，它给了我这段代码：

＆＃ xA;＆＃xA;

 ＆lt;！DOCTYPE html＆gt;＆＃xA;＆lt; html＆gt;＆＃xA;＆lt; head＆gt;＆＃xA; ＆lt; meta charset =“UTF-8”＆gt;＆＃xA; ＆lt; title＆gt; Google Maps＆lt; / title＆gt;＆＃xA;＆lt; / head＆gt;＆＃xA;＆lt; body＆gt;＆＃xA; ＆lt; div id =“map_canvas”style =“width：500px; height：300px;”＆gt;＆lt; / div＆gt;＆＃xA;＆＃xA; ＆lt; script src =“https://maps.google.com/maps/api/js”＆gt;＆lt; / script＆gt;＆＃xA; ＆LT;脚本＆GT;＆＃XA; window.onload = function（）{＆＃xA;初始化（）;＆＃XA; };＆＃XA;＆＃XA; function initialize（）{＆＃xA; var myLatlng = new google.maps.LatLng（50.3419169876,5.60793614352）;＆＃xA;＆＃xA; var myOptions = {＆＃xA; zoom：16，＆＃xA; center：myLatlng，＆＃xA; mapTypeId：google.maps.MapTypeId.ROADMAP＆＃xA; };＆＃XA;＆＃XA; var map = new google.maps.Map（document.getElementById（“map_canvas”），myOptions）;＆＃xA;＆＃xA; var infowindow = new google.maps.InfoWindow（{＆＃xA; content：“Someplace”＆＃xA;}）;＆＃xA;＆＃xA; var marker = new google.maps.Marker（{＆＃xA; position：myLatlng，＆＃xA; map：map，＆＃xA; title：“Someplace”＆＃xA;}）;＆＃xA;＆＃xA ; google.maps.event.addListener（marker，'click'，function（）{＆＃xA; infowindow.open（map，marker）;＆＃xA;}）;＆＃xA; }＆＃XA; ＆lt; / script＆gt;＆＃xA;＆lt; / body＆gt;＆＃xA;＆lt; / html＆gt;＆＃xA;

＆＃xA;＆＃xA;

所以我拿了脚本并将其粘贴到我的index.html文件中。 Google地图实例应该放在联系页面上。显然当我重新加载页面/ contact时，我会快速加载地图。但是，由于窗口超出了反应范围，每当我使用导航栏导航时，它都不起作用。

＆＃xA;＆＃xA;

我有这个仅包含div的GoogleMaps.js组件id map_canvas：

＆＃xA;＆＃xA;

  import来自'react'的反应＆＃xA;＆＃xA; const GoogleMapsInstance =（）=＆gt; （＆＃xA;＆lt; div id =“map_canvas”style = {{width：'100％'，height：'400px'，overflow：'hidden'}} /＆gt;＆＃xA;）＆＃xA; export默认GoogleMapsInstance＆＃xA;

＆＃xA;＆＃xA;

我想知道如何在这个组件中获取脚本，所以我可以调用componentDidMount函数上的脚本或类似的东西。

＆＃xA;＆＃xA;

我也对任何其他类型的解决方案开放，它让我快速加载（无iframe）谷歌地图：）

＆＃xA;＆＃ xA;

感谢您的帮助！

＆＃xA;

Answer 1

这种方式并不复杂，根据您的喜好，我昨天刚发布并且有效！

Implementing google maps with react

如果您想将此地图元素添加到您的组件中，反之亦然，请告诉我们！

以下版本（根据您的需要）：

您可以按照本指南使地图显示在您的联系页面上：

首先，安装必要的库：

npm install --save google-map-react
npm install --save prop-types

然后，您可以复制以下内容：

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;

随意编辑LatLng值，和/或＆＃34; MY SHOP＆＃34;文本，我相信您也可以使用一些自定义PNG图像而不是text-element来显示代表您商店的首选地图引脚

Answer 2

在Google上进行简单搜索;）

尝试：https://github.com/tomchentw/react-google-maps

演示：https://tomchentw.github.io/react-google-maps/

如何在React中加入<script>来添加Google Maps实例

2 个答案: