react 谷歌地图_谷歌地图与React

react 谷歌地图

情况(The Situation)

Your working on a React-based application and you want to implement Google Maps to display the location of your business or provide directions to a user. At this point, you head over to the Google Maps JavaScript API documentation and are quickly overwhelmed by the plethora of information available. Surely platforms as popular as React and Google Maps have ready-made node packages available to ease the learning curve required to implement a map.

您正在使用基于React的应用程序，并且您希望实现Google Maps以显示您的业务位置或向用户提供指导。 此时，您可以阅读Google Maps JavaScript API文档，并Swift为大量可用信息所淹没。 当然，像React和Google Maps这样流行的平台都提供了现成的节点包，可简化实现地图所需的学习过程。

A quick Google search reveals several options that all seem to be very similar as seen in Figure 1. Now you are faced with another question, which one of these meets your needs? Well the answer to that question really depends on your needs but in most cases I would recommend skipping the node packages and using the vanilla Google Maps JavaScript API.

Google的快速搜索显示了几个选项，它们看起来都非常相似，如图1所示。现在您面临另一个问题，其中哪个满足您的需求？ 这个问题的答案确实取决于您的需求，但是在大多数情况下，我建议跳过节点包并使用原始的Google Maps JavaScript API 。

Figure 1: Various Available React/Google Map API NPM

图1：各种可用的React / Google Map API NPM

节点包比较 (Node Package Comparison)

A quick comparison of the available node packages shown in Figure 1 is displayed in Figure 2 below. Note that this is not a deep dive into each feature available, just a surface level inspection. From figure 2 it is seen that although “react-google-maps” is the most feature rich but it has been several years since it has been updated. The other packages are not as feature rich but do support displaying a map and placing some markers which is often all you need. It can also be seen that the weekly downloads for all these packages is relatively low in comparison to the popularity of Google Maps. Finally, it is also worth noting that although all node packages have documentation but the quality of the documentation is varying and can be a bit confusing in my experience.

下面的图2显示了图1所示的可用节点包的快速比较。 请注意，这并不是对每个可用功能的深入研究，而只是表面水平检查。 从图2中可以看出，尽管“ react-google-maps”功能最丰富，但自更新以来已经有好几年了。 其他软件包功能并不丰富，但确实支持显示地图并放置一些您通常所需的标记。 还可以看出，与Google Maps的普及相比，所有这些软件包的每周下载量都相对较低。 最后，还值得注意的是，尽管所有节点程序包都具有文档，但是文档的质量各不相同，并且在我的经验中可能会有些混乱。

Figure 2: High Level Node Package Comparison (As of 2020/08/18)

图2：高级节点程序包比较(截至2020/08/18)

So these packages support basic map functions but what if you want to draw custom poly-lines, pull elevation data, customize the map interface and appearance? The chances are the node packages will not handle this functionality that is built into the Google Maps JavaScript API.

因此，这些软件包支持基本的地图功能，但是如果要绘制自定义折线，提取高程数据，自定义地图界面和外观怎么办？ 节点包可能无法处理Google Maps JavaScript API内置的此功能。

结论 (Conclusion)

In my experience, it is easier, faster, and more feature rich to use the vanilla Google Maps JavaScript API. The learning curve is not nearly as steep as it may seem and the documentation is very thorough. The documentation also includes several examples to cover common use cases. Using the API from Google ensures you have the latest map data and version and saves you time from learning 3rd party package that may not be maintained.

以我的经验，使用原始的Google Maps JavaScript API更容易，更快，功能更丰富。 学习曲线并不像看起来那样陡峭，文档非常详尽。 该文档还包括一些示例，以涵盖常见的用例。 使用Google提供的API可确保您拥有最新的地图数据和版本，并节省了您学习可能无法维护的第三方包装的时间。

The one thing the Google documentation doesn't cover is adding your API key the React way. Figure 3 shows and example of adding the the required Google Maps script with your API key on component load. Note that in this example the API key is stored as a React environment variable REACT_APP_GOOGLE_MAP_API.

Google文档没有介绍的一件事就是以React方式添加API密钥。 图3显示了在组件加载时使用API​​密钥添加所需的Google Maps脚本的示例。 请注意，在此示例中，API密钥存储为React环境变量REACT_APP_GOOGLE_MAP_API 。

useEffect(() => {
  if (!document.getElementById("googleMapScript")) {
    const googleMapScript = document.createElement('script')
    googleMapScript.id = "googleMapScript"
    googleMapScript.src = `https://maps.googleapis.com/maps/api/js?key=${process.env.REACT_APP_GOOGLE_MAP_API}&libraries=places`      
    window.document.body.appendChild(googleMapScript)
  }
},[])Figure 3: React Way to add Google Maps API Script on Component Load

翻译自: https://medium.com/swlh/google-maps-with-react-9d1480844a21

react 谷歌地图