uniapp使用百度地图配置了key,但是显示Map key not configured
搞了我两天的一个问题。
hbuilderx版本:4.36
问题介绍:
我的项目是公司的项目,需要在H5端使用百度地图,使用vue-cli创建的uniapp,就是uni代码在src里的目录结构。就是使用这种方式才会遇到这个问题。
问题原因:
cli创建的项目编译时不是使用hbuilderx编译,而是使用自己的node_modules内的uni依赖包编译(如果你直接在hbuilderx新建项目你会发现没有node_modules,因为用的是hbuilderx的环境编译),所以导致版本跟不上。map组件找不到manifest.json配置的百度地图key。其他的key可以。
这里有个坑。腾讯地图的mapkey名不同版本名字不一样,最新版本是tencent,老的是qqmap。当我用hbuilderx配置勾选腾讯地图后在manifest.json内看到的key名是tencent,但我的项目是cli创建的老版本编译,只能识别qqmap,所以也会导致:Map key not configured csdn。
解决办法:
在public文件夹下的index.html加入
<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&&type=webgl&ak=你的key"></script>
然后在页面使用
<template><view class="car-position-map"><div id='baiduMapContainer' class="map"></div></view>
</template>// js
var map = new BMapGL.Map("baiduMapContainer"); // 创建地图实例
var point = new BMapGL.Point(this.longitude, this.latitude); // 创建点坐标
map.centerAndZoom(point, 16); // 初始化地图,设置中心点坐标和地图级别
var marker = new BMapGL.Marker(point);
map.addOverlay(marker);
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
最方便的还是使用Uniapp内置的map组件,不过我试了下,在我的项目弄不了,应该是编译版本不支持,又不好改。
如果不是cli项目,可以配置百度地图key.需要在manifest.json源码自己添加,hbuilderx 定位和地图可视化配置不能勾百度地图,以后可能会更新。
"h5" : {"sdkConfigs" : {"maps" : {"bmap" : {// 百度地图秘钥(HBuilderX 3.99+)http://lbsyun.baidu.com/apiconsole/key#/home"key" : ""}}}}
运行效果

自己写的一个模仿uniapp内置map的组件
<template><!-- 模拟uniapp map组件 --><div id='baiduMapContainer' class="map"></div>
</template><script>export default {name: 'baiduMap',props: {id: {type: String,default: ''},latitude: {type: [String, Number],default: 39.92},longitude: {type: [String, Number],default: 116.46},scale: {type: [String, Number],default: 16},markers: {type: Array,default () {return []}},covers: {type: Array,default () {return []}},// includePoints: {// type: Array,// default () {// return []// }// },polyline: {type: Array,default () {return []}},circles: {type: Array,default () {return []}},controls: {type: Array,default () {return []}},showLocation: {type: [Boolean, String],default: false},libraries: {type: Array,default () {return []}},polygons: {type: Array,default: () => []}},data() {return {circle: null, // 圆实例// mapScale: 16,map: null,markerHandleObj: [], // 根据传入的markers id存入操作对象和信息,便于操作点标签tempIcon: "https://img0.baidu.com/it/u=1848373536,836779508&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1734109200&t=f268c95df20d59d0cf92c89e1a29dfce",};},watch: {markers: {deep: true,async handler(val) {if (val && val.length) {console.log("更新地图点标记:", this.markers)this.markers.forEach((markerItem, index) => {this.addMarker(markerItem)})}},},circles: {deep: true,immediate: true,async handler(val) {if (val && val.length !== 0) {console.log("更新圆:", this.circles)if (!this.map) setTimeout(() => {this.circles.forEach((item, index) => {this.addCircle({longitude: this.longitude,latitude: this.latitude,option: item})})}, 50)else {this.circles.forEach((item, index) => {this.addCircle({longitude: this.longitude,latitude: this.latitude,option: item})})}}},}},mounted() {this.initMap();},methods: {// 添加单个标记addMarker(markerItem) {let handleObj = null;handleObj = this.markerHandleObj.find(item => {return item.markerInfo.id === markerItem.id})if (!handleObj) {this.markerHandleObj.push({markerInfo: null,marker: null})handleObj = this.markerHandleObj[this.markerHandleObj.length - 1]}if (handleObj) {// 信息没变则不更新标记if (JSON.stringify(markerItem) !== handleObj.markerInfo) {handleObj.markerInfo = JSON.parse(JSON.stringify(markerItem));var point = new BMapGL.Point(markerItem.longitude, markerItem.latitude); // 创建点坐标// 初始化标记实例if (!handleObj.marker) {// console.log('添加点标记')// 创建点标记图标var markerIcon = new BMapGL.Icon(markerItem.iconPath, new BMapGL.Size(markerItem.width,markerItem.height));// var markerIcon = new BMapGL.Icon('/static/images/img_map_carLabel@3x.png', new BMapGL.Size(markerItem.width, markerItem.height));// var markerIcon = new BMapGL.Icon(this.tempIcon, new BMapGL.Size(markerItem.width, markerItem.height));let marker = null;if (markerItem.customCallout && markerItem.address) {// 创建标签marker = new BMapGL.Label(`<img src='${markerItem.iconPath}' style='vertical-align:middle; width: 16px; height: 16px;'/> ` +markerItem.address, {point,// offset:{}});// 设置label的样式marker.setStyle(markerItem.styles);marker.id = markerItem.id// 为label添加点击事件监听器marker.addEventListener("click", (e) => {this.$emit('callouttap', e)// 在这里执行你所需的操作});} else {marker = new BMapGL.Marker(point, {icon: markerIcon});}handleObj.marker = marker;handleObj.markerInfo = markerItemthis.map.addOverlay(handleObj.marker);} else {// 更新点标记的坐标handleObj.marker.setPosition(point);}// 更新车的旋转角度if (markerItem.rotate) {handleObj.marker.setRotation(markerItem.rotate);}}}},// 添加一组标记addMarkers(info) {info.markers.forEach(item => {this.addMarker(item)})// console.log('addMarkers', info)},initMap() {var map = new BMapGL.Map("baiduMapContainer"); // 创建地图实例var point = new BMapGL.Point(this.longitude, this.latitude); // 创建点坐标map.centerAndZoom(point, this.scale); // 初始化地图,设置中心点坐标和地图级别map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放map.addEventListener('click', (e) => {// console.log('click:', e)this.$emit('onMapClick', e, map)});this.map = map;console.log('初始化地图')},// 画圆async addCircle(info) {if (info) {// 删除旧的实例,暂时只支持画一个圆if (this.map.getOverlays().length > 0) {this.map.removeOverlay(this.circle); // 先移除旧的圆形}var point = new BMapGL.Point(info.longitude, info.latitude); // 创建点坐标this.circle = new BMapGL.Circle(point, info.option.radius, info.option);// this.circle.setCenter(new LatLng(39.916935, 116.372119));this.map?.addOverlay(this.circle);}},moveToLocation(location) {var point = new BMapGL.Point(location.longitude, location.latitude);//切换地图位置this.map.centerAndZoom(point, this.scale);if (location.success) location.success()},//info => {points: markers,padding: [60, 60, 60, 60],}// 将试图拉伸到显示一组点includePoints(info) {if (info.points.length > 1) {const points = []info.points.forEach(item => {points.push(new BMapGL.Point(item.longitude, item.latitude))})// 根据点坐标数组计算视图范围var viewport = this.map.getViewport(points);// 调整地图的中心点和缩放级别this.map.centerAndZoom(viewport.center, viewport.zoom);}}}}
</script><style>
</style>相关文章:
uniapp使用百度地图配置了key,但是显示Map key not configured
搞了我两天的一个问题。 hbuilderx版本:4.36 问题介绍: 我的项目是公司的项目,需要在H5端使用百度地图,使用vue-cli创建的uniapp,就是uni代码在src里的目录结构。就是使用这种方式才会遇到这个问题。 问题原因…...
Leetcode42-环形链表
题目 给定一个链表的头节点 head ,返回链表开始入环的第一个节点。 如果链表无环,则返回 null。 如果链表中有某个节点,可以通过连续跟踪 next 指针再次到达,则链表中存在环。 为了表示给定链表中的环,评测系统内部使…...
C语言进阶(2) ---- 指针的进阶
前言:指针的主题,我们在初阶的《指针》章节已经接触过了,我们知道了指针的概念: 1.指针就是个变量,用来存放地址,地址唯一标识一块内存空间。 2.指针的大小是固定的4/8个字节(32位平台/64位平台)。 3.指针是…...
使用Python筛选图片
需求:图片识别,一堆人脸照片中,其中有不是人脸的,把模糊的,侧脸的,重复的去掉 使用说明: 安装好所需要的包: 第一步:输入图片路径 第二步:创建图片输出路径…...
GESP CCF python五级编程等级考试认证真题 2024年12月
1 单选题(每题 2 分,共 30 分) 第 1 题 下面的程序中,x,y都是正整数,完成的算法是( ) def chenadai(x, y): while y: x, y y, x % y return x A. 最小公倍数 …...
URL的概念与格式
URL概念及组成 1、URL简介2、URL组成 1、URL简介 URL(Uniform Resource Locator)即统一资源定位符,是一种用于标识和定位互联网上资源的字符序列 URL主要用于在Web中标识和定位Web页面、图像、文件、服务和其他各种类型的资源 URL提供了一种…...
【Elasticsearch】高亮搜索:从原理到Web呈现
🧑 博主简介:CSDN博客专家,历代文学网(PC端可以访问:https://literature.sinhy.com/#/?__c1000,移动端可微信小程序搜索“历代文学”)总架构师,15年工作经验,精通Java编…...
samout llm解码 幻觉更低更稳定
这段代码定义了一个简单的对话生成系统,包括模型加载、词汇表加载、以及基于给定提示生成文本的功能。下面是对代码的解析: load_model_and_voc(device"cpu"): 该函数用于加载预训练的模型和词汇表(vocabulary)。它首先…...
单片机:实现多任务处理(附带源码)
单片机实现多任务处理 多任务处理是现代操作系统的重要特性,通常通过多线程、多进程的方式来并行执行多个任务。在嵌入式系统中,由于资源有限,通常通过时间片轮转或中断机制来模拟多任务处理。本项目将展示如何在8051单片机上实现简单的多任…...
负载均衡oj项目:介绍
目录 项目介绍 项目演示 项目介绍 负载均衡oj是一个基于bs模式的项目。 用户使用浏览器向oj模块提交代码,oj模块会在所有在线的后端主机中选择一个负载情况最低的主机,将用户的代码提交给该主机,该主机进行编译运行,将结果返回…...
剑指Offer 03比特位计数
只是记录 题目链接 题目链接 自己想出来的 第一种解法 思路简述 遍历[0,n]之间的数字,对于每一个数字按照二进制的方式展开,判断最低位置是否为1,若为1则1,反之不加,直到该数字等于0就停止。 public static int[] …...
多音轨视频使用FFmpeg删除不要音轨方法
近期给孩子找宫崎骏动画,但是有很多是多音轨视频但是默认的都是日语,电视上看没办法所以只能下载后删除音轨文件只保留中文。 方法分两步,先安装FFmpeg在转文件即可。 第一步FFmpeg安装 FFmpeg是一个开源项目,包含了处理视频的…...
elasticsearch 使用enrich processor填充数据
文章目录 使用 POST 请求手动插入用户数据1. 创建 Enrich Policy步骤 1.1: 创建 Enrich Policy步骤 1.2: 执行 Enrich Policy 2. 创建 Ingest Pipeline步骤 2.1: 创建 Ingest Pipeline步骤 2.2: 配置 Enrich Processor 参数 3. 使用 Ingest Pipeline步骤 3.1: 使用 Pipeline 进…...
VMProtect:软件保护与安全的全面解决方案
在当今数字化时代,软件的安全性和保密性愈发重要。VMProtect 作为一款备受瞩目的软件保护工具,因其强大的功能和广泛的应用而成为开发者保护软件的首选方案。 VMProtect 是一款新一代的软件保护实用程序,支持多个编译器平台,包括…...
Web 毕设篇-适合小白、初级入门练手的 Spring Boot Web 毕业设计项目:教室信息管理系统(前后端源码 + 数据库 sql 脚本)
🔥博客主页: 【小扳_-CSDN博客】 ❤感谢大家点赞👍收藏⭐评论✍ 1.0 项目介绍 开发工具:IDEA、VScode 服务器:Tomcat, JDK 17 项目构建:maven 数据库:mysql 8.0 系统用户前台和管理…...
第十二篇:linux下socket本地套接字通讯
使用套接字除了可以实现网络间不同主机间的通信外,还可以实现同一主机的不同进程间的通信,且建立的通信是双向的通信。socket进程通信与网络通信使用的是统一套接口,只是地址结构与某些参数不同。 用途 进程间通信:本地套…...
Spring Boot 2.1.7 数据源自动加载过程详解
在 Spring Boot 中,数据源的自动配置是框架中一个关键功能,本文将以 Spring Boot 2.1.7 版本为例,详细讲解在单数据源情况下数据源是如何自动加载的。我们通过源码分析,追踪整个加载流程。 1. 自动配置类的发现 Spring Boot 使用…...
【Vue.js 3.0】provide 、inject 函数详解
在 Vue 3 中,provide 和 inject 是用于跨组件层次结构进行依赖注入的一对 API。这些 API 主要用于祖先组件和后代组件之间的数据传递,尤其是当这些组件之间没有直接的父子关系时。 1. 示例 1.1 provide provide 函数用于在祖先组件中定义一个值&#…...
JVM(Java虚拟机)的虚拟机栈
JVM(Java虚拟机)的虚拟机栈是Java程序运行时的重要组件,以下是对其的详细解析: 一、概念与功能 概念:虚拟机栈也称为Java栈,是JVM为每个线程分配的一个私有的内存区域。每个线程在创建时都会创建一个虚拟…...
Elasticsearch02-安装7.x
零、文章目录 Elasticsearch02-安装7.x 1、Windows安装Elasticsearch (1)JDK安装 Elasticsearch是基于java开发的,所以需要安装JDK。我们安装的Elasticsearch版本是7.15,对应JDK至少1.8版本以上。也可以不安装jdk,…...
IDEA运行Tomcat出现乱码问题解决汇总
最近正值期末周,有很多同学在写期末Java web作业时,运行tomcat出现乱码问题,经过多次解决与研究,我做了如下整理: 原因: IDEA本身编码与tomcat的编码与Windows编码不同导致,Windows 系统控制台…...
地震勘探——干扰波识别、井中地震时距曲线特点
目录 干扰波识别反射波地震勘探的干扰波 井中地震时距曲线特点 干扰波识别 有效波:可以用来解决所提出的地质任务的波;干扰波:所有妨碍辨认、追踪有效波的其他波。 地震勘探中,有效波和干扰波是相对的。例如,在反射波…...
屋顶变身“发电站” ,中天合创屋面分布式光伏发电项目顺利并网!
5月28日,中天合创屋面分布式光伏发电项目顺利并网发电,该项目位于内蒙古自治区鄂尔多斯市乌审旗,项目利用中天合创聚乙烯、聚丙烯仓库屋面作为场地建设光伏电站,总装机容量为9.96MWp。 项目投运后,每年可节约标煤3670…...
DIY|Mac 搭建 ESP-IDF 开发环境及编译小智 AI
前一阵子在百度 AI 开发者大会上,看到基于小智 AI DIY 玩具的演示,感觉有点意思,想着自己也来试试。 如果只是想烧录现成的固件,乐鑫官方除了提供了 Windows 版本的 Flash 下载工具 之外,还提供了基于网页版的 ESP LA…...
2025盘古石杯决赛【手机取证】
前言 第三届盘古石杯国际电子数据取证大赛决赛 最后一题没有解出来,实在找不到,希望有大佬教一下我。 还有就会议时间,我感觉不是图片时间,因为在电脑看到是其他时间用老会议系统开的会。 手机取证 1、分析鸿蒙手机检材&#x…...
CRMEB 框架中 PHP 上传扩展开发:涵盖本地上传及阿里云 OSS、腾讯云 COS、七牛云
目前已有本地上传、阿里云OSS上传、腾讯云COS上传、七牛云上传扩展 扩展入口文件 文件目录 crmeb\services\upload\Upload.php namespace crmeb\services\upload;use crmeb\basic\BaseManager; use think\facade\Config;/*** Class Upload* package crmeb\services\upload* …...
Spring AI与Spring Modulith核心技术解析
Spring AI核心架构解析 Spring AI(https://spring.io/projects/spring-ai)作为Spring生态中的AI集成框架,其核心设计理念是通过模块化架构降低AI应用的开发复杂度。与Python生态中的LangChain/LlamaIndex等工具类似,但特别为多语…...
分布式增量爬虫实现方案
之前我们在讨论的是分布式爬虫如何实现增量爬取。增量爬虫的目标是只爬取新产生或发生变化的页面,避免重复抓取,以节省资源和时间。 在分布式环境下,增量爬虫的实现需要考虑多个爬虫节点之间的协调和去重。 另一种思路:将增量判…...
力扣-35.搜索插入位置
题目描述 给定一个排序数组和一个目标值,在数组中找到目标值,并返回其索引。如果目标值不存在于数组中,返回它将会被按顺序插入的位置。 请必须使用时间复杂度为 O(log n) 的算法。 class Solution {public int searchInsert(int[] nums, …...
Netty从入门到进阶(二)
二、Netty入门 1. 概述 1.1 Netty是什么 Netty is an asynchronous event-driven network application framework for rapid development of maintainable high performance protocol servers & clients. Netty是一个异步的、基于事件驱动的网络应用框架,用于…...
