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

uniapp使用百度地图配置了key,但是显示Map key not configured

news 2024/12/17 20:20:27

搞了我两天的一个问题。
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.mrgr.cn/news/80466.html