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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/64441.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

使用cuda12编译时报错block_merge_sort.cuh(169): error: expected a “,“ or “>“

模型的工程化版C程序使用CUDA11.3和11.6编译时没任何错误&#xff0c;为适应高版本的jetpack环境&#xff0c;切换到CUDA12编译时总是报错: /workspace/cuda-12.0/bin/nvcc /workspace/focc/iou3d_nms.cu -c -o ./build/CMakeFiles/bev.dir/src/./bev_generated_iou3d_nms.cu.…

React状态管理常见面试题目(二)

为什么 Redux 能做到局部渲染? Redux能做到局部渲染&#xff0c;主要是因为它采用了单向数据流和状态管理机制。在Redux中&#xff0c;整个应用的状态被存储在一个单一的store中&#xff0c;当状态发生变化时&#xff0c;Redux通过分发action来更新state&#xff0c;并通过re…

【Qt】drawText字体大小问题探究

背景 软件的一个功能是&#xff1a; 打开图片在图片上绘制序号&#xff0c;序号的样式是圆圈内包含数字将带有序号的图片打印出来 实现思路也很简单&#xff0c;在屏幕上显示时重写paintEvent函数&#xff0c;利用QPainter完成图片和序号的绘制。打印时只需要将QPainter对应…

Unity背包道具拖拽(极简版实现)

&#xff08;感觉Csdn代码页面可以再大一点或者加个放大功能 不然得划着看不太舒服&#xff09; 1.关键接口&#xff0c;三个拖拽相关的 2.关键参数&#xff0c;PointerEventData 一直没仔细看过&#xff0c;其实有包含鼠标相关的很多参数&#xff0c;鼠标点击次数&#xff…

Win11安装安卓子系统WSA

文章目录 简介一、启用Hyper-V二、安装WSA三、安装APKAPK商店参考文献 简介 WSA&#xff1a;Windows Subsystem For Android 一、启用Hyper-V 控制面板 → 程序和功能 → 启用或关闭 Windows 功能 → 勾选 Hyper-V 二、安装WSA 进入 Microsoft Store&#xff0c;下拉框改为 …

《红队和蓝队在网络安全中的定义与分工》

网络安全中什么是红队蓝队 在网络安全领域&#xff0c;红队和蓝队是一种对抗性的演练机制&#xff0c;用于测试和提升网络安全防御能力。 红队&#xff08;Red Team&#xff09; 定义与目标 红队是扮演攻击者角色的团队。他们的主要任务是模拟真实的网络攻击&#xff0c;利用各…

Redis 和 Mysql 中的数据一致性问题

Redis 和 MySQL 的数据很难直接实现 强一致性&#xff0c;但可以通过一些策略尽量接近或实现 最终一致性。下面从两者的特性、挑战以及解决方案来分析。 Redis 和 MySQL 的特性 Redis&#xff1a; 是一个基于内存的高性能键值数据库&#xff0c;常用于缓存、分布式锁和消息队…

数据结构 ——二叉树转广义表

数据结构 ——二叉树转广义表 1、树转广义表 如下一棵树&#xff0c;转换为广义表 root(c(a()(b()()))(e(d()())(f()(j(h()())())))) (根&#xff08;左子树&#xff09;&#xff08;右子树&#xff09;) 代码实现 #include<stdio.h> #include<stdlib.h>//保存…

企业车辆管理系统(源码+数据库+报告)

一、项目介绍 352.基于SpringBoot的企业车辆管理系统&#xff0c;系统包含两种角色&#xff1a;管理员、用户,系统分为前台和后台两大模块 二、项目技术 编程语言&#xff1a;Java 数据库&#xff1a;MySQL 项目管理工具&#xff1a;Maven 前端技术&#xff1a;Vue 后端技术&a…

ubuntu20.04复现 Leg-KILO

这里写目录标题 opencv版本问题下载3.2.0源代码进入解压后的目录创建构建目录运行 CMake 配置 配置时指定一个独立的安装目录&#xff0c;例如 /opt/opencv-3.2&#xff1a;出错&#xff1a; 使用多线程编译错误1&#xff1a; stdlib.h: 没有那个文件或目录错误2&#xff1a;er…

如何保证开源AI呼入机器人和AI呼出机器人的数据安全性?

如何保证开源AI呼入机器人和AI呼出机器人的数据安全性&#xff1f; 作者&#xff1a;开源呼叫中心FreeIPCC 确保开源AI呼入机器人和AI呼出机器人的数据安全性是部署这些智能系统时不可或缺的一部分。随着越来越多的企业依赖于自动化客户服务和外呼营销&#xff0c;保护用户隐…

基于SpringBoot+vue的高校学生成绩管理系统

目录 一、绪论1.1 开发背景1.2 系统开发平台1.2.1 Vue简介1.2.2 IDEA简介1.2.3 MySQL简介 1.3 系统开发环境 二、需求分析2.1 系统需求分析2.2 系统数据流图 三、概要设计3.1 业务流程分析 四、详细设计4.1 系统功能结构图4.2 E-R模型4.3 数据库表设计 五、模块实现5.1 管理员主…

微信小程序苹果手机自带的数字键盘老是弹出收起,影响用户体验,100%解决

文章目录 1、index.wxml2、index.js3、index.wxss1、index.wxml <!--index.wxml--> <view class="container"><view class="code-input-container"><view class="code-input-boxes"><!-- <block wx:for="{{…

Docker--Docker Image(镜像)

什么是Docker Image&#xff1f; Docker镜像&#xff08;Docker Image&#xff09;是Docker容器技术的核心组件之一&#xff0c;它包含了运行应用程序所需的所有依赖、库、代码、运行时环境以及配置文件等。 简单来说&#xff0c;Docker镜像是一个轻量级、可执行的软件包&…

RabbitMQ的核心组件有哪些?

大家好&#xff0c;我是锋哥。今天分享关于【RabbitMQ的核心组件有哪些&#xff1f;】面试题。希望对大家有帮助&#xff1b; RabbitMQ的核心组件有哪些&#xff1f; 1000道 互联网大厂Java工程师 精选面试题-Java资源分享网 RabbitMQ是一个开源的消息代理&#xff08;Messag…

[OpenGL] Transform feedback 介绍以及使用示例

一、简介 本文介绍了 OpenGL 中 Transform Feedback 方法的基本概念和代码示例。 二、Transform Feedback 介绍 1. Transform Feedback 简介 根据 OpenGL-wiki&#xff0c;Transform Feedback 是捕获由顶点处理步骤&#xff08;vertex shader 和 geometry shader&#xff0…

【Linux】—简单实现一个shell(myshell)

大家好呀&#xff0c;我是残念&#xff0c;希望在你看完之后&#xff0c;能对你有所帮助&#xff0c;有什么不足请指正&#xff01;共同学习交流哦&#xff01; 本文由&#xff1a;残念ing原创CSDN首发&#xff0c;如需要转载请通知 个人主页&#xff1a;残念ing-CSDN博客&…

什么是Apache日志?为什么Apache日志分析很重要?

Apache是全球最受欢迎的Web服务器软件&#xff0c;支持约30.2%的所有活跃网站。凭借其可靠性、灵活性和强大的功能&#xff0c;Apache数十年来一直是互联网的中坚力量。 一、Apache Web服务器的工作原理 Apache Web服务器的工作原理如下&#xff1a; 接收HTTP请求&#xff1…

如何使用 uni-app 构建直播应用程序?

使用uni-app构建直播应用程序涉及前端和后端的开发&#xff0c;以及音视频处理技术的选择。下面我将概述一个典型的直播应用架构&#xff0c;并详细说明如何在uni-app中实现关键功能。 直播应用架构 前端&#xff08;uni-app&#xff09;&#xff1a;负责用户界面展示、互动逻…

Spring Security 6 系列之一 - 开篇入门

之所以想写这一系列&#xff0c;是因为之前工作过程中使用Spring Security&#xff0c;但当时基于spring-boot 2.3.x&#xff0c;其默认的Spring Security是5.3.x。之后新项目升级到了spring-boot 3.3.0&#xff0c;结果一看Spring Security也升级为6.3.0&#xff0c;关键是其风…