在react和umi项目中引入百度地图

 一、在react项目中引入百度地图

1.在百度地图开放平台申请密钥

百度地图开放平台 | 百度地图API SDK | 地图开发百度地图API是一套为开发者提供的基于百度地图的应用程序接口，包括JavaScript、iOS、Andriod、静态地图、Web服务等多种版本，提供基本地图、位置搜索、周边搜索、公交驾车导航、定位服务、地理编码及逆地理编码等丰富功能。LBS·云是百度地图针对LBS开发者全新推出的平台级服务。通过地图API，一方面解决移动开发者服务器端日益增长的海量位置数据的存储维护压力，另一方面彻底解决所有LBS开发者基于位置数据的高并发检索瓶颈。https://lbsyun.baidu.com/2.找到开发文档中的react开发：

React-BMapGL文档 (baidu.com)https://lbsyun.baidu.com/solutions/reactBmapDoc3.引入脚本，在项目下的index.html中加载百度地图的JavaScript api的代码，密钥需要在百度地图开放平台官网（控制台-应用管理-创建应用）进行申请：

脚本如下：

<script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=自己申请的密钥"></script>

然后使用npm或者yarn安装react组件库：

npm install react-bmapgl --save

yarn add react-bmapgl --save

4.在react中引入地图：

import React from 'react'

import { Map, Marker, NavigationControl, InfoWindow,ZoomControl } from 'react-bmapgl';
export default function Dom() {
  return (
    <div>
      <Map center={{ lng: 116.402544, lat: 39.928216 }} zoom="11">
        <Marker position={{ lng: 116.402544, lat: 39.928216 }} />
        <NavigationControl />
        <ZoomControl />
        <InfoWindow position={{ lng: 116.402544, lat: 39.928216 }} text="北京市" title="地标" />
      </Map>

    </div>
  )
}

5.运行项目：

二、在umi中引入百度地图

1.首先安装组件库

npm install react-bmapgl --save
或
yarn add react-bmapgl --save

2.在src目录下的pages中新建文件夹plugin，在plugin文件夹中新建plugin.js文件，代码如下：

export default (api, opts) => {
    // 在HTML尾部添加脚本 
    api.addHTMLScripts(() => {
      return [
        {
          // 百度地图
          type:"text/javascript",
          src:"http://api.map.baidu.com/api?type=webgl&v=1.0&ak=自己申请的密钥"
        }
      ]
    })
  }

3.在umirc.ts中导入新建的文件plugin.js:

/*
umirc.ts是umi项目中的默认配置文件
*/

import { defineConfig } from 'umi';
export default defineConfig({
  nodeModulesTransform: {
    type: 'none',
  },
  routes:[...],
  fastRefresh: {},
  plugins:['./src/pages/plugin/plugin.js']
});

4.在文件中引入地图：

import React from 'react'
export default function index() {
  return (
    <div>
      <Map style={{ height: 1200 }}
        center={new BMapGL.Point(116.404449, 39.914889)}
        zoom={12}
        heading={0}
        tilt={40}
        onClick={(e) => console.log(e)}
        enableScrollWheelZoom
        mapStyleV2={{ styleId: '自己发布的地图样式ID' }}
      />
    </div>
  )
}

5.npm start运行项目：

需要注意的是，如果node版本过高就需要对版本进行一个处理：

项目的运行会遇到node版本太高的问题
GitBash中:
export NODE_OPTIONS=--openssl-legacy-provider
CMD中:
set NODE_OPTIONS=--openssl-legacy-provider
PowerShell中:
Senv:NODE_OPTIONS ="--openssl-egacy-provider"