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

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

二、开发前准备

（一）申请地图 API 密钥

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

（二）搭建 UniApp 开发环境

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

三、集成高德地图 API

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

在 HBuilderX 的插件市场中搜索 “uni - amap” 插件，安装到项目中。该插件为 UniApp 与高德地图的集成提供了便捷的接口封装。

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

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

import amap from '@/uni_modules/uni - amap/js_sdk/index.js';

（三）初始化地图

在页面的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文件中，通过

（二）初始化腾讯地图

在页面的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文件的

一、引言

二、开发前准备

（一）申请地图 API 密钥

（二）搭建 UniApp 开发环境

三、集成高德地图 API

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

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

（三）初始化地图

（四）添加地图覆盖物

四、集成腾讯地图 API

（一）引入腾讯地图 JavaScript SDK

（二）初始化腾讯地图

（三）添加地图交互功能

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

（一）页面布局

（二）测试与调试

六、注意事项

（一）API 密钥安全

（二）地图性能优化

（三）兼容性处理

七、总结

评论记录：