搞了我两天的一个问题。
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 = markerItem
this.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>