当前位置： 首页 > news >正文

Umi使用百度地图服务

news 2026/4/5 15:14:32

需求描述

需要在前端页面中使用地图定位功能，所以在前端umi项目中使用百度地图服务，由于umi项目默认没有入口的html文件，所以无法通过常规的在head中加入外链js的方式使用

百度ak

zyqeLCzvQPCCNImRu9yRGOqWlEUicxxG

react使用百度api

在这里插入图片描述

链接: 百度地图api链接

解法方法

看清楚有两种方法

第一种方式 ：用umi-plugin 插件的方式把链接加到页面上

在这里插入图片描述

在src/page下 ，新建文件 plugins/customPlugin.js

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

在这里插入图片描述

在umirc.ts中导入本地新建的插件文件customPlugin.js

/**
* umirc.ts，umi项目默认配置文件
*/
import { defineConfig } from 'umi';export default defineConfig({nodeModulesTransform: {...},dva: {},routes: [...],fastRefresh: {},plugins: ['./src/plugins/customPlugin.js'] //添加一个plugins插件
});

新建一个jsx文件将你需要的代码填写到里面

注意!!!

使用npm方式安装react组件库，然后通过es模块加载

npm install react-bmapgl --save

因为本人使用的是tsx 所以会有下划线报错

在这里插入图片描述

import { Map } from 'react-bmapgl'function Example() {return (<Mapstyle={{ height: 450 }}center={new BMapGL.Point(116.404449, 39.914889)}zoom={12}heading={0}tilt={40}onClick={(e:any) => console.log(e)}enableScrollWheelZoom/>)
}export default Example

第一种使用方法 效果图

在这里插入图片描述

第二种方式 ：手动添加document.ejs文件

在src/page下，新建document.ejs文件

<!Doctype html>
<html>
<head><meta charset="utf-8" /><meta name="apple-mobile-web-app-capable" content="yes"/><meta name="apple-mobile-web-app-status-bar-style" content="black"/><meta name="format-detection" content="telephone=no"/><meta name="format-detection" content="email=no"/><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" /><title> </title><script src="//api.map.baidu.com/api?v=3.0&ak=你的百度地图AK码"></script>
</head>
<body>
<div id="root"></div>
</body>
</html>

前端代码

import React, { useEffect } from 'react';
import { Modal } from 'antd';/*** 新建考勤地点模态框* */
export default function XjkqddModal(props) {const { modalVisible, setModalVisible } = props;     // 模态框状态useEffect(() => {renderMap();}, []);const renderMap = () => {var map = new BMap.Map("container", {coordsType: 5});var point = new BMap.Point(116.404, 39.915);  // 创建点坐标map.centerAndZoom(point, 15);                 // 初始化地图，设置中心点坐标和地图级别};return (<Modaltitle="考勤地点"visible={modalVisible}onOk={() => setModalVisible(false)}okText='确定'onCancel={() => setModalVisible(false)}cancelText='取消'width={1000}forceRender><div id='container' style={{ width: 300, height: 300 }} /></Modal>)
}

报错在这里插入图片描述

注意点

Antd 4.x的modal在import进页面时，是仅仅挂载，没有渲染其中的DOM结构，所以取不到map实例挂载的 DIV，modal的API中有个forceRender的属性，加上后modal挂载的同时会把DOM渲染出来
初始化地图实例要在render后执行，不然会取不到DIV容器
地图容器DIV一定要指定宽高，地图并不会撑开DIV，而是把你设置宽高的DIV撑满

相关文章：

Umi使用百度地图服务

需求描述 需要在前端页面中使用地图定位功能&#xff0c;所以在前端umi项目中使用百度地图服务&#xff0c;由于umi项目默认没有入口的html文件&#xff0c;所以无法通过常规的在head中加入外链js的方式使用 百度ak zyqeLCzvQPCCNImRu9yRGOqWlEUicxxGreact使用百度api 链接:…...

编程日记 2023/5/16 12:26:28

js中getBoundingClientRect()方法

getBoundingClientRect()返回值是一个 DOMRect 对象&#xff0c;是包含整个元素的最小矩形&#xff08;包括 padding 和 border-width&#xff09;。该对象使用 left、top、right、bottom、x、y、width 和 height 这几个以像素为单位的只读属性描述整个矩形的位置和大小。除了 …...

编程日记 2023/5/16 12:26:26

Unity记录2.2-动作-动画、相机、Debug与总结

文章首发及后续更新&#xff1a;https://mwhls.top/4453.html&#xff0c;无图/无目录/格式错误/更多相关请至首发页查看。 新的更新内容请到mwhls.top查看。 欢迎提出任何疑问及批评&#xff0c;非常感谢&#xff01; 汇总&#xff1a;Unity 记录 摘要&#xff1a;重写了动画触…...

编程日记 2023/5/16 12:26:24

分享十个前端Web3D可视化框架附地址

Three.js&#xff1a;Three.js是一个流行的3D库&#xff0c;提供了大量的3D功能&#xff0c;包括基本几何形状、材质、灯光、动画、特效等。它是一个功能强大、易于使用的框架&#xff0c;广泛用于Web3D可视化应用程序的开发。Three.js&#xff1a;https://threejs.org/Babylon…...

编程日记 2023/5/16 8:16:04

基于WSL2和Clion搭建Win下C开发环境

系列文章目录 一、基于WSL2和Clion搭建Win下C开发环境 二、make、makeFile、CMake、CMakeLists的使用 三、全面、详细、通俗易懂的C语言语法和标准库 文章目录系列文章目录前言WSL2安装WSL常用命令VSCode连接WSLroot密码以systemd启动配置sshClion结语前言 Win下C语言开发环境…...

编程日记 2023/5/16 12:26:21

考研第一天，汤家凤基础班，连续与极限复习笔记

函数连续极限性质保号性证明极值点&#xff1a;夹逼准则二项式展开根号下&#xff0c;大于一&#xff0c;小于一的讨论直接放缩求和分子分母齐次&#xff0c;且分母大一次&#xff0c;用积分单调有界存在极限几个重要的切线放缩证明有界&#xff0c;然后放缩求单调证明有界&…...

编程日记 2023/5/16 12:26:18

聊一聊代码重构——关于变量的代码实践

提炼变量 其目标是将一个复杂表达式或语句分解成更小的部分&#xff0c;并将其存储在变量中。提高代码可读性和复用性 复杂的表达式 有些时候为了方便我们会把业务处理的逻辑写在一起&#xff0c;如果参与处理的内容较多时我们就会创造出一个非常长且难以理解的表达式。当其他…...

编程日记 2023/5/16 12:26:16

Spring之基于注解方式实例化BeanDefinition（1）

最近开始读Spring源码&#xff0c;读着读着发现里面还是有很多很好玩的东西在里面的&#xff0c;里面涉及到了大量的设计模式以及各种PostProcessor注入的过程&#xff0c;很好玩&#xff0c;也很复杂&#xff0c;本文就是记录一下我学习过程中的主干流程。 在开始我们源码解读…...

编程日记 2023/5/16 12:26:14

【STM32】入门（十四）：FreeRTOS-任务

1、简述 FreeRTOS应用程序由一组独立的任务构成。 在任何时间点&#xff0c;应用程序中只能执行一个任务&#xff0c;FreeRTOS调度器负责决定所要执行的任务。 每个任务在自己的上下文中执行&#xff0c;不依赖于系统内的其他任务或 FreeRTOS的调度器本身。 FreeRTOS调度器负责…...

编程日记 2023/5/16 12:26:12

apscheduler 的基本介绍和使用

APScheduler有四大组件&#xff1a; 1、触发器 triggers &#xff1a; 触发器包含调度逻辑。每个作业都有自己的触发器&#xff0c;用于确定下一个任务何时运行。除了初始配置之外&#xff0c;触发器是完全无状态的。 有三种内建的trigger: &#xff08;1&#xff09;date: 特定…...

编程日记 2023/5/16 12:26:09

Oracle中merge Into的用法

Oracle中merge Into的用法 使用场景 在操作数据库时&#xff0c;数据存在的情况下&#xff0c;进行update操作&#xff1b;不存在的情况下&#xff0c;进行insert操作&#xff1b;在Oracle数据库中&#xff0c;能够使用merge into来实现。 基本语法 merge into table_name …...

编程日记 2023/5/16 12:26:06

JDK19下载、安装与测试的完整图文教程

一、下载JDK 1、官网获取&#xff1a;https://www.oracle.com/ 1.1 点击“Products”&#xff1b; 1.2 选择“Java”&#xff1b; 1.3 选择“Download Java”&#xff1b; 1.4 选择“Java downloads”&#xff0c;这里以最新版&#xff08;JDK19&#xff09;为例&#xff…...

编程日记 2023/5/16 12:26:02

Vector - CAPL - 获取相对时间函数

在自动化开发中&#xff0c;无论是CAN通信测试&#xff0c;还是网络管理测试&#xff0c;亦或是休眠唤醒等等存在时间相关的&#xff0c;都可能会使用相关的时间函数&#xff1b;今天主要介绍的就是获取当前时间&#xff0c;我们知道vector工具的最大优势就是稳定和精确度高&am…...

编程日记 2023/5/16 12:26:00

C++编程语言STL之unordered_map介绍

本文主要介绍 C 编程语言的 STL&#xff08;Standard Template Library&#xff09; 中 unordered_map 的相关知识&#xff0c;同时通过示例代码介绍 unordered_map 的常见用法。1 概述C标准库提供了四个无序关联容器&#xff08;unordered associated container&#xff09;&a…...

编程日记 2023/5/16 12:25:57

【独家】华为OD机试 - 最快检测效率-核酸（C 语言解题）

最近更新的博客 华为od 2023 | 什么是华为od，od 薪资待遇，od机试题清单华为OD机试真题大全，用 Python 解华为机试题 | 机试宝典【华为OD机试】全流程解析+经验分享,题型分享,防作弊指南）华为od机试，独家整理 已参加机试人员的实战技巧文章目录 最近更新的博客使用说明本期…...

编程日记 2023/5/16 12:25:54

【Redis应用】基于Redis实现共享session登录(一)

&#x1f697;Redis应用学习第一站~ &#x1f6a9;本文已收录至专栏&#xff1a;数据库学习之旅 &#x1f44d;希望您能有所收获 &#x1f449;相关推荐&#xff1a;使用短信服务发送手机验证码进行安全校验 一.引入 ​ 在开发项目过程中&#xff0c;我们常常能碰到需要登录注…...

编程日记 2023/5/16 12:25:51

Android framework系列2 - Init进程

1、源码 入口&#xff1a;system/core/init/main.cpp2 流程图 https://note.youdao.com/s/EtnCswft 3、代码详解 主入口共三步&#xff0c;如流程图所示&#xff0c;我们主要看下最后一步 入口在init.cpp下&#xff0c;这个阶段主要来解析init.rc并执行此文件下的命令 看到…...

编程日记 2023/5/16 12:25:48

2023年“网络安全”赛项江苏省淮安市选拔赛 任务书

任务书 一、竞赛时间 共计3小时。 二、竞赛阶段 竞赛阶段 任务阶段 竞赛任务 竞赛时间 分值 第一阶段单兵模式系统渗透测试 任务一 服务器内部信息获取 任务二 网站渗透测试 任务三 Linux系统渗透提权 任务四 Web渗透测试 第二阶段分组对抗 备战阶段 攻防对抗准备工作 系统加…...

编程日记 2023/5/16 12:25:45

2023年Wireshark数据包分析——wireshark0051.pcap

Wireshark数据包分析 任务环境说明： 服务器场景：FTPServer220223服务器场景操作系统：未知（关闭连接）FTP用户名：wireshark0051密码：wireshark0051从靶机服务器的FTP上下载wireshark0051.pcap数据包文件，找出黑客获取到的可成功登录目标服务器FTP的账号密码，并将黑客获…...

编程日记 2023/5/16 12:25:42

SpringMVC的自定义配置和自动化配置

SpringBoot的自动配置MVC处理加载逻辑基于Spring Boot的MVC自动化配置由WebMvcAutoConfiguration类完成&#xff0c;部分关键源码&#xff1a;AutoConfiguration(after { DispatcherServletAutoConfiguration.class, TaskExecutionAutoConfiguration.class,ValidationAutoConf…...

编程日记 2023/5/16 12:25:39

新手入门指南：在快马平台用AI生成你的第一个龙虾部署实践项目

今天想和大家分享一个特别适合新手的实践项目——用Docker部署一个简单的Python Flask应用。这个项目是我在InsCode(快马)平台上完成的&#xff0c;整个过程对初学者非常友好&#xff0c;连我这种刚接触容器化的小白都能轻松上手。 为什么选择FlaskDocker组合 Flask是Python最轻…...

编程新知 2026/4/5 12:42:51

4步出图革命：Qwen-Rapid-AIO如何用极简工作流重塑AI图像编辑效率

4步出图革命&#xff1a;Qwen-Rapid-AIO如何用极简工作流重塑AI图像编辑效率 【免费下载链接】Qwen-Image-Edit-Rapid-AIO 项目地址: https://ai.gitcode.com/hf_mirrors/Phr00t/Qwen-Image-Edit-Rapid-AIO 在AI图像编辑领域&#xff0c;传统工作流程的复杂性一直是技术…...

编程新知 2026/4/5 11:52:08

3步解决Windows苹果设备连接难题：给非技术用户的驱动安装指南

3步解决Windows苹果设备连接难题&#xff1a;给非技术用户的驱动安装指南 【免费下载链接】Apple-Mobile-Drivers-Installer Powershell script to easily install Apple USB and Mobile Device Ethernet (USB Tethering) drivers on Windows! 项目地址: https://gitcode.com…...

编程新知 2026/4/5 11:48:07

图像处理避坑指南：Pillow的ImageOps.expand()参数详解与典型应用场景

图像处理避坑指南&#xff1a;Pillow的ImageOps.expand()参数详解与典型应用场景 在数字图像处理领域&#xff0c;边界填充是最基础却最容易出错的环节之一。许多开发者在使用Pillow库时&#xff0c;往往对ImageOps.expand()函数掉以轻心&#xff0c;直到项目上线才发现图像边缘…...

编程新知 2026/4/5 11:29:51

墨语灵犀33语种翻译准确率实测：专业领域术语覆盖能力报告

墨语灵犀33语种翻译准确率实测&#xff1a;专业领域术语覆盖能力报告 1. 引言&#xff1a;当古典美学遇见现代翻译技术 在全球化交流日益频繁的今天&#xff0c;语言翻译工具已经成为我们工作学习中不可或缺的助手。然而&#xff0c;大多数翻译工具都停留在功能实用层面&…...

编程新知 2026/4/5 11:03:27

激光线扫三维重建完整方案与Matlab代码实现

现整理了一套完整的&#xff0c;平移线扫重建 matlab代码和方案&#xff0c;包含相机标定、光平面标定与方案、移动装置标定与方案、激光线条中心线自适应提取、畸变矫正、三维重建、点云滤波等部分&#xff0c;代码按模块编写&#xff0c;注释完整&#xff0c;附带一份完整苹果…...

编程新知 2026/4/5 11:01:27

新手福音：用快马生成的带详解代码学习排列组合公式编程实现

今天想和大家分享一个特别适合编程新手的小项目——用Python实现排列组合公式的计算。作为一个刚入门编程的菜鸟&#xff0c;我发现数学公式的代码实现常常让人头疼&#xff0c;尤其是排列组合这种需要理解阶乘和公式推导的内容。不过最近在InsCode(快马)平台上尝试了一下&…...

编程新知 2026/4/5 10:37:21

如何在Windows系统上高效运行Android应用：告别模拟器的5个实用技巧

如何在Windows系统上高效运行Android应用&#xff1a;告别模拟器的5个实用技巧 【免费下载链接】APK-Installer An Android Application Installer for Windows 项目地址: https://gitcode.com/GitHub_Trending/ap/APK-Installer 在数字化工作与娱乐日益融合的今天&…...

编程新知 2026/4/5 10:33:20

3步突破开发工具限制：开源项目实现IDE持续使用指南

3步突破开发工具限制&#xff1a;开源项目实现IDE持续使用指南 【免费下载链接】ide-eval-resetter 项目地址: https://gitcode.com/gh_mirrors/id/ide-eval-resetter 定位开发痛点&#xff1a;IDE试用限制的实际影响 作为一名全栈开发者&#xff0c;我曾在一个紧急项…...

编程新知 2026/4/5 10:25:18

Visual C++运行库修复工具：彻底解决DLL依赖故障的全方位方案

Visual C运行库修复工具&#xff1a;彻底解决DLL依赖故障的全方位方案 【免费下载链接】vcredist AIO Repack for latest Microsoft Visual C Redistributable Runtimes 项目地址: https://gitcode.com/gh_mirrors/vc/vcredist 当启动专业设计软件时弹出"无法定位程…...

编程新知 2026/4/5 10:21:17