微信小程序开发：腾讯地图集成详细步骤

最新推荐文章于 2026-03-28 04:43:44 发布

原创最新推荐文章于 2026-03-28 04:43:44 发布 · 1w 阅读

标签

#微信小程序 #小程序 #微信

收录于

微信小程序开发专栏收录该内容

34 篇文章 ¥129.90 ¥299.90

订阅专栏

本文详述了微信小程序中集成腾讯地图的步骤，包括map组件的实现和调用，涉及homeMap.js、homeMap.json、homeMap.wxml、homeMap.wxss以及home.js、home.json、home.wxml等文件的配置，旨在帮助开发者理解并简化地图功能的集成过程。

前言

在腾讯生态开发过程中，包括在微信小程序开发的时候，避免不了使用腾讯送的腾讯大礼包，从微信支付到腾讯地图，一条龙的腾讯大礼包，不得不说鹅厂的实力是无可比拟的。但是话又说回来了，鹅厂的官方 API 真是不敢恭维，尤其是微信小程序的开发文档，如果不熟悉的话，真的是大坑不断，连环坑不断，无力吐槽。本篇博文来说说微信小程序开发的时候集成实现腾讯地图的功能，虽然微信官方 API 介绍了集成步骤，但是还是会给小白带来云里雾里的感觉，接下来就详细来说说具体的集成步骤，分享出来，若有不妥之处请指正。

具体实现

其实微信小程序还可以集成百度地图的，只是这里不再介绍其他家的地图集成到微信小程序的步骤。本案例直接把小程序的地图部分进行了封装，用组件的形式调用，方便使用，便于理解。还是直接上代码比较好，具体操作如下所示：

一、map 组件的实现

1、homeMap.js 文件

const app = getApp()Component({
  
    properties: {
  
      position: {
  
        type: Array,      value: [],    },    markers: {
  
        type: Array,      value: [],