React - 引入百度地图 React-umi

创建账号

手机、QQ、微信都可 lbsyun.baidu.com/

创建密钥

lbsyun.baidu.com/apiconsole/… 用户名称随意
类型是浏览器
ip * 即可

本人用的是react-uim

 首先先建一个  bmpgl.js 文件

 我用的是  bmpgl.ts  道理一样

bmpgl.js和index.ts最好同级

bmpgl.js 代码

   export function BMPGL(ak) {
      return new Promise(function (resolve, reject) {
        window.init = function () {
          // eslint-disable-next-line
          resolve(BMapGL)
        }
        const script = document.createElement('script')
        script.type = 'text/javascript'
        script.src = `http://api.map.baidu.com/api?v=1.0&type=webgl&ak=${ak}&callback=init`
        script.onerror = reject
        document.head.appendChild(script)
      })
     }

ak 为你获取的百度地图的密钥

然后建一个文件 index.html

我的是 index.ts

index.ts 代码 函数组件

    import React, { useEffect, useState } from 'react'  //引入react
    import "./index.less"  //引入样式
    import { history } from "umi"
    import { Icon, Grid } from 'antd-mobile';  //引入的Icon 图标  可以不写
    import { BMPGL } from '@/pages/Home/page/Hospital/bmpgl.ts'
    function Hospital() {
    const style = {
        width: "100%",
        height: "100%"
    }
    useEffect(() => {
        BMPGL('自己从百度获取的密钥').then((BMap) => {
            var map = new BMap.Map("container");          // 创建地图实例 
            var point = new BMap.Point(116.404, 39.915);  // 创建初始坐标 
            map.centerAndZoom(point, 11);     
            map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
            map.setHeading(64.5);   //设置地图旋转角度
            map.setTilt(73);       //设置地图的倾斜角度
            // 禁止地图旋转和倾斜可以通过配置项进行设置
            //var map = new BMap.Map("*", {  //暂定 
            //    enableRotate: false,
            //    enableTilt: false
            //});
        })
    }, [])
    return (
        <div className="Hospital">
            {/* 可以不写header头部 */}
            <header>   
                <Icon onClick={() => { history.push("/home") }} type="left" size="lg" color="#6cce74" />
                <span>地图搜索</span>
                <i></i>
            </header>
            <main className="Map">
                <div id="container" style={style}></div>
            </main>
        </div>
    )
}
export default Hospital