微信小程序地图组件开发：UniApp 集成高德 / 腾讯地图 API 详解

码上前端

已于 2025-04-29 08:38:28 修改

阅读量2.3k

点赞数 28

分类专栏： uniapp 文章标签： vue.js 前端框架 node.js javascript 微信小程序 uni-app 小程序

于 2025-04-17 08:34:53 首次发布

本文链接：https://blog.csdn.net/qq_65243376/article/details/147292076

版权

uniapp 专栏收录该内容

21 篇文章

订阅专栏

前言：家人们，大家好！今天分享一篇文章给大家！要是文章对你有帮助，激发了你的灵感，

求个收藏 + 关注啦～后续还有超多惊喜，别错过！

（一）引入腾讯地图 JavaScript SDK

一、引言

在移动应用开发中，地图功能的应用越来越广泛，从出行导航到位置定位，从商家查找服务到生活周边探索，地图为用户提供了便捷直观的位置信息展示与交互体验。UniApp 作为一款强大的跨平台开发框架，支持在微信小程序等多平台上开发应用。本文将详细阐述如何在 UniApp 中集成高德地图和腾讯地图 API，实现微信小程序中的地图组件开发，帮助开发者为应用增添丰富的地图功能。

二、开发前准备

（一）申请地图 API 密钥

高德地图：
- 前往高德开放平台（高德开放平台 | 高德地图API）注册账号并登录。
- 在控制台中创建新应用，选择应用类型为 “微信小程序”。
- 为该应用申请 “Web 服务 API” 类型的密钥，此密钥将用于在 UniApp 项目中调用高德地图的各类接口。
腾讯地图：
- 进入腾讯位置服务平台（腾讯位置服务 - 立足生态，连接未来），完成账号注册与登录。
- 在控制台创建新的微信小程序应用，并获取对应的密钥。该密钥同样是后续集成腾讯地图功能的关键凭证。

（二）搭建 UniApp 开发环境

确保已安装最新版本的 HBuilderX 开发工具，这是进行 UniApp 开发的基础环境。创建一个新的 UniApp 项目，选择微信小程序作为目标平台。

三、集成高德地图 API

（一）安装高德地图 UniApp 插件

在 HBuilderX 的插件市场中搜索地图插件，安装到项目中。写一个原生插件封装谷歌原生地图，具体参考uni-app插件市场的原生插件开发教程。插件市场已有三方写好的地图插件

（二）配置插件与引入密钥

在项目的manifest.json文件中，找到 “App 原生插件配置” 选项，展开 “uni - amap” 插件配置项，将申请到的高德地图 API 密钥填入对应的 “key” 字段。
在需要使用地图功能的页面或组件中，引入高德地图插件：我这里随便找了个

（三）初始化地图

在页面的onLoad生命周期函数中初始化高德地图：

export default {
    data() {
        return {
            map: null
        };
    },
    onLoad() {
        this.initMap();
    },
    methods: {
        async initMap() {
            const that = this;
            const location = await amap.getLocation({
                type: 'wgs84'
            });
            const map = new amap.Map('map', {
                center: [location.longitude, location.latitude],
                zoom: 15
            });
            that.map = map;
        }
    }
};

在上述代码中，通过amap.getLocation获取用户当前位置，并以此为中心初始化地图，设置初始缩放级别为 15。

（四）添加地图覆盖物

以添加一个标记点为例，在初始化地图后添加如下代码：

methods: {
    async initMap() {
        const that = this;
        const location = await amap.getLocation({
            type: 'wgs84'
        });
        const map = new amap.Map('map', {
            center: [location.longitude, location.latitude],
            zoom: 15
        });
        that.map = map;
        const marker = new amap.Marker({
            position: [location.longitude, location.latitude],
            title: '当前位置'
        });
        map.add(marker);
    }
}

这段代码在用户当前位置添加了一个标记点，并设置了标记点的标题。

四、集成腾讯地图 API

（一）引入腾讯地图 JavaScript SDK

在项目的index.html文件中，通过<script>标签引入腾讯地图的 JavaScript SDK：

<script src="https://map.qq.com/api/js?v=2.exp&key=你的腾讯地图API密钥"></script>

（二）初始化腾讯地图

在页面的onLoad生命周期函数中编写如下代码初始化腾讯地图：

export default {
    data() {
        return {
            qqMap: null
        };
    },
    onLoad() {
        this.initQQMap();
    },
    methods: {
        initQQMap() {
            const that = this;
            const qqMap = new window.TMap.Map('qq - map', {
                center: new window.TMap.LatLng(30.67, 104.06),
                zoom: 15
            });
            that.qqMap = qqMap;
        }
    }
};

这里以成都的经纬度为例设置地图的中心位置，开发者可根据实际需求替换。

（三）添加地图交互功能

以添加地图点击事件为例，在初始化地图后添加以下代码：

methods: {
    initQQMap() {
        const that = this;
        const qqMap = new window.TMap.Map('qq - map', {
            center: new window.TMap.LatLng(30.67, 104.06),
            zoom: 15
        });
        that.qqMap = qqMap;
        qqMap.on('click', function (e) {
            console.log('点击位置：', e.lnglat);
        });
    }
}

这段代码为腾讯地图添加了点击事件，当用户点击地图时，会在控制台输出点击位置的经纬度。

五、在微信小程序中使用集成后的地图

（一）页面布局

在.vue文件的<template>部分添加地图容器：

<template>
    <view>
        <view id="map" style="width: 100vw; height: 500px;"></view>
        <view id="qq - map" style="width: 100vw; height: 500px;"></view>
    </view>
</template>

这里分别为高德地图和腾讯地图创建了两个地图容器，可根据实际需求调整容器的样式和大小。

（二）测试与调试

在 HBuilderX 中，使用微信开发者工具进行预览和调试。确保地图功能在微信小程序环境中正常运行，检查地图的加载速度、定位准确性、覆盖物显示以及交互功能是否符合预期。

六、注意事项

（一）API 密钥安全

无论是高德地图还是腾讯地图的 API 密钥，都应妥善保管，避免泄露。在生产环境中，不应将密钥直接暴露在客户端代码中，可通过服务器端进行密钥管理和转发请求，以增强安全性。

（二）地图性能优化

随着地图上覆盖物和交互功能的增加，可能会影响地图的性能。合理控制地图数据的加载量，避免一次性加载过多的地图要素，对于大量的标记点等覆盖物，可采用聚类等技术进行优化，以提升地图的流畅度和响应速度。

（三）兼容性处理

不同手机设备和微信版本对地图组件的支持可能存在差异。在开发过程中，要进行充分的兼容性测试，确保地图功能在各种常见设备和微信版本上都能正常使用，对可能出现的兼容性问题进行针对性的处理和优化。

七、总结

通过本文介绍的方法，开发者可以在 UniApp 项目中成功集成高德地图和腾讯地图 API，为微信小程序开发出功能丰富的地图组件。在实际应用中，根据项目需求选择合适的地图服务，并不断优化地图功能，将为用户带来更优质的位置服务体验。希望本文能为广大 UniApp 开发者在地图功能开发方面提供有益的参考和帮助。