Antd Design pro使用百度地图，亲测可用

---

前言

最近分配的任务中，要用到百度地图，自己正好在用Antd Design Pro V5。就分享一波将百度地图导入pro项目中的方法，总共有两种方法。申请百度账号和ak之类的就不写了，网上教程也比较多。

1. 使用BMap调用JavaScript API

首先在document.ejs的head中，全局引用百度地图API文件

<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=您的密钥"></script>
<script>
    window.BMap = BMap
</script>

但是仅添加以上两项，在我们调用window.BMap的时候，会提示在window中找不到'BMap'属性

此时我们只要找到项目中的typing.d.ts声明文件，就在src目录下

在window的拓展接口中添加属性BMap

此时在调用var BMap = window.BMap；就不会提示找不到属性了。

//实例Demo
class map extends React.Component {

  componentDidMount() {
    const lng = 116.404; //设置经纬度
    const lat = 39.915;
    var BMap = window.BMap
    var map = new BMap.Map("container");
    var point = new BMap.Point(lng, lat);
    map.centerAndZoom(point, 18); 				// 初始化地图
    map.addControl(new BMap.MapTypeControl()); 	// 添加地图类型控件
    map.enableScrollWheelZoom(true); 			// 开启鼠标滚轮缩放
  }
  render() {
    return (
    <PageContainer>
      <div id="container" style={{	//创建地图容器元素
        width: '100vw',
        height: '100vh',
        margin: "-24px"
      }} />
    </PageContainer>);
  }
}

export default map;

效果图如下：

---

2. 安装react-bmap组件

首先npm安装react-bmap

npm install react-bmap --save

在package.json中查看，组件包已经成功安装

在立即进行调用的时候，会提示找不到模块

这时候我们还需要去typing.d.ts中进行模块声明

这时候就可以正常使用了。

import React from 'react'
import {Map, Marker, NavigationControl, InfoWindow} from 'react-bmap'
export default (): React.ReactNode => {
  const lng = 116.404; //设置经纬度
  const lat = 39.915;
  return (
    <PageContainer>
      <div>
          <Map center={{ lng, lat }} zoom="18" ScrollWheelZoom="true">
            <Marker position={{ lng, lat }} />
            <NavigationControl />
            <InfoWindow position={{ lng, lat }} text="你好" title="再见" />
          </Map>
      </div>
    </PageContainer >
  )
}

效果图：

---

3. 总结

以上就是我目前在项目中引入百度地图所遇到的问题以及解决方法，希望各位大佬批评指正。