React实战-如何在ReactJs中调用Google、Baidu地图

喜欢ヅ旅行 2022-07-16 03:43 403阅读 0赞

React实战\-如何在ReactJs中调用Google、Baidu地图

在这个互联网时代，对地图的运用已经成为Web、移动各类应用的必选项。国内外各大地图应用提供商均有开放的Api供大家使用，当然更具使用的功能会提供付费版和免费版，如果仅仅只是小的应用或者练手，完全可以调用其免费版。调用的方式也很简单，跟你调用其他的第三方库类似。但是由于ReactJs的实现方式存在一些特殊性，其调用Google地图（百度类似）也有细微差异（weixin: react-javascript）。

1.传统网页调用Google地图方式

传统网页调用Google地图的方式主要分以下基本：

a.注册Google接口调用的key

由于调用Google接口需要输入Key，Key是Google赋予你的访问权限，各类型的Key不一样，如果你采用ReactJS，你还是申请支持浏览器调用的Key。

b.引入Google的js库

同所有的js库一样，需要引入Google的Js库，不同的是路径要加入key的值。

<script type="text/javascript"      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA\_qPoEzvCB8SYeHzpeI">

c.配置地图参数，创建地图

function initmap() \{

var mapOptions = \{

center: \{ lat: 42.872, lng: 3.644\},

zoom: 3

\};

var map = new google.maps.Map(document.getElementById('example'),

mapOptions);

\}

google.maps.event.addDomListener(window, 'load', initmap);

2.ReactJs中如何调用Google的API

在ReactJs中调用Google步骤相同，不同的是在最终的调用时存在差异，你依然需要做以下三步：

a.注册Google接口调用的key

b.引入Google的js库

c.在ReactJs组件中调用

在ReactJs中你可以将地图配置信息以任何你认为合适的方式传人googlemap的构造函数，不同的是:

l 我们不需要google.maps.event.addDomListener(window, 'load', initmap);

在ReactJs组件中，一般页面原始初始化放在componentDidMount()函数中，暂且把初始化数据getInitialState中。如：

getInitialState()\{

return \{

mapconfig:\{

center: \{ lat: 42.872, lng: 3.644\},

zoom: 3

\}

\}

\},

componentDidMount()\{

new window.google.maps.Map(

this.refs.map,

this.state.mapconfig);

\},

l 我们也不采用document.getElementById('example')

上面的代码中你可以看到我们不要getElementById,而是采用refs。相应的页面元素也应定义ref.

<div ref="map" style=\{ \{width: 400, height:400, \}\} />

3.特别注意的地方

从实现代码可以看出，我们并没有发明创造，只是将原有实现方式变的符合React的实现机制。但是尤其要注意的是。我们在页面引入js库，在组件中调用时应采用window.google.maps,如果你少了window，则编译无法通过，找不到google对象了，切记！

4.相关代码

源码位置：git@github.com:chenhuitian/react.git（googlemap-react）

发表评论取消回复

表情：

评论列表（有 0 条评论，403人围观）

还没有评论，来说两句吧...

相关阅读

相关在 JavaScript 和 React 中使用地图简化代码

在 JavaScript 中，开发人员经常会遇到需要根据各种条件返回不同结果的情况。一种这样的情况是，当他们想要基于某些可以切换的状态变量在组件内呈现不同的 JSX 时。但是，

逃离我推掉我的手/ 2023年09月26日 23:59/ 0 赞/ 92 阅读

相关 React实战-对比ReactJs与ReactNative中的Flex用法

React实战\-对比ReactJs与ReactNative中的Flex用法无论是Web还是移动端，让人花费大量精力和时间的是页面布局，在新Css3中提供了flex为我们解

青旅半醒/ 2022年09月26日 03:57/ 0 赞/ 184 阅读

相关 ReactJs实战感悟

写这篇博文之前，不免先自我介绍一下，作为一个在编码一线搬砖多年，涉猎过C、C++、Java、C\、Javascript等多种语言，从前台到后台，从工程到理论，从Coder到Ma

系统管理员/ 2022年09月21日 13:26/ 0 赞/ 149 阅读

相关 React实战-ReactJS+Redux的思考

React实战\-ReactJS+Redux的思考 ReactJs的官方架构是：ReactJs+Flux。然而作为Flux的升级版，ReactJs+Redux越来越流行，已经

妖狐艹你老母/ 2022年07月18日 05:27/ 0 赞/ 138 阅读

相关 React实战－Reactjs中的如何通过不可变数据对象提高页面性能

React实战－Reactjs中的如何通过不可变数据对象提高页面性能在使用ReactJs之后，我们知道Reactjs的UI更新方式，由于props或者state的数据变化都

我不是女神ヾ/ 2022年07月16日 06:14/ 0 赞/ 131 阅读

相关 React实战-如何在ReactJs中调用Google、Baidu地图

React实战\-如何在ReactJs中调用Google、Baidu地图在这个互联网时代，对地图的运用已经成为Web、移动各类应用的必选项。国内外各大地图应用提供商均有开放

喜欢ヅ旅行/ 2022年07月16日 03:43/ 0 赞/ 404 阅读

相关 React实战-ReactJs与传统Web页面中Css的使用差异

React实战\-ReactJs与传统Web页面中Css的使用差异网页的布局、颜色、形状等UI展示方式主要是由Css进行设置，在ReactJs中也是一样。ReactJs中的

迷南。/ 2022年07月16日 02:21/ 0 赞/ 129 阅读

相关 React 项目记录（四）——在 React 中使用地图

Step 1：申请APK 首先，要到百度地图APK官网 [http://lbsyun.baidu.com/][http_lbsyun.baidu.com] 申请 APK。

电玩女神/ 2022年03月25日 12:06/ 0 赞/ 471 阅读

相关 Vue --》如何在vue中调用百度地图

1.项目根目录下下载百度地图插件　　npm install vue-baidu-map –save 2.在首页index.html中引入百度地图: 　　<scri

我不是女神ヾ/ 2021年12月10日 04:37/ 0 赞/ 321 阅读

相关在react中使用echarts制作地图

1.下载echarts npm install echarts 2.app.js代码如下 import React, { Component } fro

喜欢ヅ旅行/ 2021年07月25日 11:34/ 0 赞/ 669 阅读