微信小程序开发:集成腾讯地图的步骤

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

前言

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

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

一、map组件的实现

1、homeMap.js文件

const app = getApp()
Component({
  properties: {
    position: {
      type: Array,
      value: [],
    },
    markers: {
      type: Array,
      value: [],
    },
    markerList: {
      type: Array,
      value: []
    },
    getCurrentElement: {
      type: Function,
      value: function () { }
    }
  },
  data: {
    position: [],
    markerList: {},
    markers: []
  },
  ready: function () {
    const mapContext = wx.createMapContext('map')
    const {
      position,
      markers,
      markerList
    } = this.properties;
    this.setData({
      position,
      markers,
      markerList,
    });
    mapContext.moveToLocation({
      longitude: 114.54286,
      latitude: 22.05956,
      complete(e) {
        console.log('moveToLocation', e)
      }
    })
  },
  methods: {
    markertap({
      markerId
    }) {
      let {
        markerList
      } = this.properties;
      markerList && markerList.map((item, idx) => {
        if (item.id === markerId) {
          item.num = markerList.length;
          this.triggerEvent('onMarker', item) //通过triggerEvent将参数传给父组件
        }
      })
    }
  },
})

2、homeMap.json文件

{
  "component": true
}

3、homeMap.wxml文件

<map id="map"
longitude="{{position[0]}}"
latitude="{{position[1]}}"
scale="14"
controls="{{controls}}"
bindcontroltap="controltap"
markers="{{markers}}"
markerList="{{markerList}}"
enable-zoom="true"
bindmarkertap="markertap"
polyline="{{polyline}}"
scale="11"
style="width: 100%; height: 100%;" >
</map>

4、homeMap.wxss文件

该文件不做操作

二、调用map组件的实现

在需要使用地图的地方,调用map组件,具体操作步骤如下所示:

1、home.js文件

Page({
  data: {
    markerPorts: [], // 定位点
    position: [], // 地图中心点位置
    parkMark: {}
  },
  onReady: function () {
  //网络请求,这里可以忽略
    let url = 'ec/me/pag-space/list'
    const params = {
      pageNum: 1,
    }
    homeParkList(url, params).then(({
      code,
      data,
      msg
    }) => {
      if (code === "200") {
        const {
          records,
          list
        } = data
        this.setData({
          records: records
        })
        const markers = []; // 定位点集合
        const marker = {
          '0': "/images/green_marker.png",
          '1': "/images/red_marker.png",
          '2': "/images/yellow_marker.png",
          'def': "/images/yellow_marker.png"
        }
        // 拼装定位点集合
        list.forEach(res => {
          const {
            id,
            latitude,
            longitude,
            parkingStatus,
          } = res
          markers.push({
            id,
            latitude,
            longitude,
            iconPath: marker[parkingStatus],
            width: 30,
            height: 30
          })
        })
        wx.chooseLocation({
          complete: e => {
            markers.push({
              id: 9999,
              latitude: this.data.position[0],
              longitude: this.data.position[1],
              iconPath: marker['def'],
              width: 30,
              height: 30
            })
            this.setData({
              position: [e.longitude, e.latitude],
              markerPorts: markers,
              markerList: list
            })
          }
        })
      }
    })
  },
  getMarkerInfo(e) {
    if (e.toString() === '[object Object]') {
      this.setData({
        parkInfo: e.detail
      })
    }
  },
})

2、home.json文件

{
  "component": true,
  "usingComponents": {
    "component":"../../components/Map/homeMap"  //引用map组件
  }
}

3、home.wxml文件

<view class="page">
    <view class='content'>
      <component class="map-comp" position="{{position}}" markers="{{markerPorts}}" markerList="{{markerList}}" bind:onMarker="getMarkerInfo" bind:aaa="bb" />
    </view>
</view>

具体实现的效果图如下所示:

1.png

最后

以上就是本章全部内容,欢迎关注三掌柜的微信公众号“程序猿by三掌柜”,三掌柜的新浪微博“三掌柜666”,欢迎关注!

相关文章
|
2月前
|
数据采集 运维 DataWorks
DataWorks 千万级任务调度与全链路集成开发治理赋能智能驾驶技术突破
智能驾驶数据预处理面临数据孤岛、任务爆炸与开发运维一体化三大挑战。DataWorks提供一站式的解决方案,支持千万级任务调度、多源数据集成及全链路数据开发,助力智能驾驶模型数据处理与模型训练高效落地。
|
5月前
|
监控 Java API
1K star!这个开源项目让短信集成简单到离谱,开发效率直接翻倍!
SMS4J 是一款由国内技术团队打造的短信聚合框架,专为解决多短信服务商接入难题而生。它就像短信界的"瑞士军刀",目前已整合21家主流短信服务商,从阿里云、腾讯云到中国移动云MAS,开发者只需通过简单配置即可实现多平台无缝切换。
277 4
|
2月前
|
供应链 小程序 API
微信小程序API集成京东库存,移动端销量暴涨!
在数字化时代,微信小程序与京东库存系统集成成为提升移动端销量的关键策略。本文详解如何通过API实现库存实时同步、优化用户体验,推动销量增长50%以上,并结合实际案例与代码示例,为企业提供可落地的解决方案。
57 0
|
4月前
|
小程序 前端开发 Android开发
小程序微信分享功能如何开发?开放平台已绑定仍不能使用的问题?-优雅草卓伊凡
小程序微信分享功能如何开发?开放平台已绑定仍不能使用的问题?-优雅草卓伊凡
850 29
小程序微信分享功能如何开发?开放平台已绑定仍不能使用的问题?-优雅草卓伊凡
|
5月前
|
监控 前端开发 小程序
陪练,代练,护航,代打小程序源码/前端UNIAPP-VUE2.0开发 后端Thinkphp6管理/具备家政服务的综合型平台
这款APP通过技术创新,将代练、家政、娱乐社交等场景融合,打造“全能型生活服务生态圈”。以代练为切入点,提供模块化代码支持快速搭建平台,结合智能匹配与技能审核机制,拓展家政服务和商业管理功能。技术架构具备高安全性和扩展性,支持多业务复用,如押金冻结、录屏监控等功能跨领域应用。商业模式多元,包括交易抽成、增值服务及广告联名,同时设计跨领域积分体系提升用户粘性,实现生态共生与B端赋能。
369 12
|
5月前
|
小程序 Java 关系型数据库
weixin163基于微信小程序的校园二手交易平台系统设计与开发ssm(文档+源码)_kaic
本文介绍了一款基于微信小程序的校园二手物品交易平台的开发与实现。该平台采用Java语言开发服务端,使用MySQL数据库进行数据存储,前端以微信小程序为载体,支持管理员和学生两种角色操作。管理员可管理用户、商品分类及信息、交易记录等,而学生则能注册登录、发布购买商品、参与交流论坛等。系统设计注重交互性和安全性,通过SSM框架优化开发流程,确保高效稳定运行,满足用户便捷交易的需求,推动校园资源共享与循环利用。
|
5月前
|
人工智能 开发框架 小程序
工会成立100周年纪念,开发职工健身AI运动小程序、APP方案推荐
为庆祝中华全国总工会成立100周年,特推出基于AI技术的智能健身系统,以小程序和APP形式呈现,助力职工健康生活。方案包括:1) 小程序插件,支持多种运动识别,开箱即用;2) APP插件,提供更高精度的运动检测;3) 成熟的「AI乐运动」系统,支持赛事活动管理。这些方案满足不同需求,推动全民健身体验升级,彰显工会对职工健康的关怀。
|
5月前
|
人工智能 程序员 测试技术
通义灵码与魔搭 Notebook 深度集成:在线编码开箱即用,开发效率倍增
通义灵码 2.0 AI 程序员 2025 年 1 月正式上线,目前已经服务百万开发者,成为国内开发者最受欢迎的智能编码助手。
|
5月前
|
小程序 关系型数据库 Java
weixin168“返家乡”高校暑期社会实践微信小程序设计与开发ssm(文档+源码)_kaic
本文探讨高校暑期社会实践微信小程序的开发与应用,旨在通过信息化手段提升活动管理效率。借助微信小程序技术、SSM框架及MySQL数据库,实现信息共享、流程规范和操作便捷。系统涵盖需求分析、可行性研究、设计实现等环节,确保技术可行、操作简便且经济合理。最终,该小程序可优化活动发布、学生信息管理和心得交流等功能,降低管理成本并提高工作效率。
|
11月前
|
Java Maven Docker
gitlab-ci 集成 k3s 部署spring boot 应用
gitlab-ci 集成 k3s 部署spring boot 应用

热门文章

最新文章