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

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

article 2024/12/22 14:34:45

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

http://www.kler.cn/a/444077.html

相关文章：

  • Spring Boot 2.1.7 数据源自动加载过程详解
  • 如何测量分辨率
  • SQL 插入数据详解
  • libmodbus安装使用
  • 猫咪睡眠：萌态背后的奥秘与启示
  • 数智化转型是什么？
  • Unity 根据文本宽度自动移动图像位置
  • thinkphp5命令行，addOption和addArgument有什么区别
  • 51c自动驾驶~合集41
  • 受限前缀注意机制的事件关系识别
  • Spark-Streaming性能调优
  • el-date-picker筛选时间日期选择范围
  • 解决安装Weditor提示GBK编码格式问题
  • pytest入门十：配置文件
  • 网络地址转换(NAT)和端口映射
  • 算法12、基础二分查找的运用（旋转数组专题）
  • 【bWAPP】XSS跨站脚本攻击实战
  • Springboot导出Excel方法（若依实例）
  • HTML5技术深度解析与实战应用
  • 网络安全（3）_安全套接字层SSL
  • 1 数据库（中）：DDL（数据库设计）、DML（增删改表中数据）、DQL（查询表中数据）单表基本语法
  • Vue前端开发-axios默认配置和响应结构
  • Python机器学习笔记（七、深度学习-神经网络）
  • Cocos Creator 试玩广告开发
  • Vue 2 中 v-html 指令的使用详解
  • 面试小札：Java后端闪电五连鞭_9