umi/react中使用百度地图API

原创已于 2023-11-28 10:47:53 修改 · 1.3k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#前端

于 2023-11-27 20:40:15 首次发布

本文详细介绍了如何在umi框架和react应用中集成百度地图API，包括注册账号、创建应用、配置AK密钥、引入API和实现地图功能的步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

umi中使用百度地图API

首先第一步/按照步骤来

打开网址：百度地图开放平台 | 百度地图API SDK | 地图开发

第二步 /按照步骤来

如果没有帐号需要注册（按照步骤注册）/（有账号的可忽略）

点击控制台，进入应用管理，点击我的应用，进入创建应用

按照步骤一步步来

选择应用类型：浏览器端

第三步/按照步骤来

来到我的应用配置过的直接复制AK码，没有的话点击创建应用，根据自己需要申请就行

第四步/ 按照步骤来

在config文件中或者是.umirc.ts中配置引入AK密钥

import { defineConfig } from 'umi';

export default defineConfig({
  headScripts: [
     //密钥要写自己的，就是刚刚复制的那个AK码
    'https://api.map.baidu.com/api?v=1.0&type=webgl&ak=你的ak密钥',
  ]
});

第五步 / 按照步骤来

在src/pages文件下创建一个文件夹，例如Map/index.jsx放入以下代码

import React from 'react'
import { useEffect } from 'react'

export default function Map() {

  useEffect(()=>{
    const BMapGL = window.BMapGL
    // console.log(BMapGL);
    // 创建地图实例
    var map = new BMapGL.Map("container");
    // 初始化地图，设置中心点坐标和地图级别
    map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 11);
    // 添加控件和标注
    map.addControl(new BMapGL.NavigationControl());
    var marker = new BMapGL.Marker(new BMapGL.Point(116.404, 39.915));
    map.addOverlay(marker);
    
    // 添加城市列表控件
    var cityCtrl = new BMapGL.CityListControl();  
    map.addControl(cityCtrl);

    // 添加比例尺控件
    var scaleCtrl = new BMapGL.ScaleControl();  
    map.addControl(scaleCtrl);

    // 添加缩放控件
    var zoomCtrl = new BMapGL.ZoomControl();  
    map.addControl(zoomCtrl);
  },[])

  return (
    <div>
        //地图大小根据自己需要设置即可
      <div id="container" style={{height: "50vh"}}></div>
    </div>
  )
}

效果演示：

umi地图效果

react中使用百度地图API

第一步 / 按照步骤来

第二步 / 按照步骤来

第三步 / 按照步骤来

以上步骤相同（重复就不写了）

第四步 / 按照步骤来

在react文件中，在找到public/index.html中加入一行代码

//ak后面是你的Ak码，官网复制过来，以防出错
<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=你的AK码"></script>

第五步 / 按照步骤来

在src/App.js文件中引入，或者是自己在src下创建一个文件，例如Map/index.js

import React, { useEffect } from 'react'

export default function App() {
  useEffect(()=>{
    // 引入全局对象
    const BMapGL = window.BMapGL;
    // 创建地图实例 
    var map = new BMapGL.Map("container");     
    // 创建点坐标      
    var point = new BMapGL.Point(116.404, 39.915);  
    // 初始化地图，设置中心点坐标和地图级别
    map.centerAndZoom(point, 15);    
    //开启鼠标滚轮缩放             
    map.enableScrollWheelZoom(true);     

    // 添加比例尺控件
    var scaleCtrl = new BMapGL.ScaleControl();  
    map.addControl(scaleCtrl);
    // 添加缩放控件
    var zoomCtrl = new BMapGL.ZoomControl(); 
    map.addControl(zoomCtrl);
    // 添加城市列表控件
    var cityCtrl = new BMapGL.CityListControl();  
    map.addControl(cityCtrl);
  },[])
  return (
    <div>
      <div id="container" style={{height:'100vh'}}></div>
    </div>
  )
}

效果演示：

react地图效果