React中调用百度地图

来源：互联网发布：虚拟固话软件编辑：程序博客网时间：2024/06/15 09:54

之前做一个地图项目的时候，用到了百度地图API，用的是J2EE的架构，没有任何问题，后来开始前后端分离，前端用React重写的时候，问题出现了……

大家都知道，React是封装组件，然后最后在一个root结点上渲染出来，而百度地图的API是怎么调用的呢……

我们来看看百度地图开发者中心给出的DEMO

关于怎么在项目中调用百度地图，可以看看我以前写的博文:GIS学习之百度地图的简单调用

进入百度地图API JS,我们随便看一个示例DEMO

<!DOCTYPE html><html><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />    <style type="text/css">    body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}    </style>    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>    <title>地图展示</title></head><body>    <div id="allmap"></div></body></html><script type="text/javascript">    // 百度地图API功能    var map = new BMap.Map("allmap");    // 创建Map实例    map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);  // 初始化地图,设置中心点坐标和地图级别    map.addControl(new BMap.MapTypeControl());   //添加地图类型控件    map.setCurrentCity("北京");          // 设置地图显示的城市 此项是必须设置的    map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放</script>

可以看到，JS调用百度地图API的流程有3步：

在html中加载API Script文件
放置一个有唯一ID的div结点
再编写script文件，在div结点上用Bmap对象生成一个可编程的地图对象

所以，我就很正常的按照流程，在React中调用它

首先，我用create-react-app 快速创建了一个应用，然后修改app.js

app.js

import React, { Component } from 'react';import './App.css';class App extends Component {    componentDidMount() {        let map = new Bmap.map('allmap');    }  render() {      map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);  // 初始化地图,设置中心点坐标和地图级别      map.addControl(new BMap.MapTypeControl());   //添加地图类型控件      map.setCurrentCity("北京");          // 设置地图显示的城市 此项是必须设置的      map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放    return (      <div id='allmap'>      </div>    );  }}export default App;

代码的意思很简单，在渲染之前先加载map对象，然后渲染出地图结点

再修改index.html

<!doctype html><html lang="en">  <head>    <meta charset="utf-8">    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">    <meta name="theme-color" content="#000000">    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=vs7UCU7d6hCllvY1VfB8etudn5uk8ep9"></script>    <title>React App</title>  </head>  <body>    <noscript>      You need to enable JavaScript to run this app.    </noscript>    <div id="root"></div>  </body></html>

再修改app.css

#allmap{  width: 100px;  height:100px;}

看上去没什么问题了，我们来运行一下试试

果然事情没有这么简单，报错提示’Bmap’这个对象没有定义，也就是直接在html中引用外部API script是没有用的，不过想想也是，React应用采用模块化开发，每一个js文件都是一个单独的模块，以以前的思维去开发不出现问题才怪了…

这个时候我想到了webpack，毕竟万能打包器…

creat-react-app脚手架创建的应用自带webpack，不过在根目录下是找不到它的配置文件的

以此找到目录，插入externals字段，引入Bmap，以便我们在js中引用

然后运行试试看

但是……还是报错了……

这次没辙了，上百度上搜索了一下

然后，发现了这篇文章当react框架遇上百度地图

仔细一看，wok……除了window那个我没想到外，解决思路和我一毛一样，但是他成功了，我还是没有捣鼓出来……

遂又想到百度地图API开发者中心，想想万一那里有解决办法呢，毕竟React这么火，我相信用它来做封装地图的一定不是少数

没想到，还真找到完美解决办法了……

然后就发现，现在百度地图API官方已经推出了web组件的封装，直接导入调用就是了……
github地址：点击这里

好的吧……现在就很easy了……

重新开始，删掉在webpack.config里面增加的字段

先安装封装好的百度地图组件库：npm install --save react-bmap

修改app.js

import React, { Component } from 'react';import './App.css';import {Map, Marker, NavigationControl, InfoWindow} from 'react-bmap';class App extends Component {  render() {    return (        <Map center={{lng: 116.402544, lat: 39.928216}} zoom="12">            <Marker position={{lng: 116.402544, lat: 39.928216}} />            <NavigationControl />            <InfoWindow position={{lng: 116.402544, lat: 39.928216}} text="内容" title="标题"/>        </Map>    );  }}export default App;

然后npm run start

然后……然后……就解决了

这里是百度地图API官方提供的组件说明：点击这里

阅读全文

0 0