微信小程序开发:腾讯地图集成步骤(旧题新说)

三掌柜 2021/2/5 5:10:51

在腾讯生态开发过程中,包括在微信小程序开发的时候,避免不了使用腾讯送的腾讯大礼包,从微信支付到腾讯地图,一条龙的腾讯大礼包,不得不说鹅厂的实力是无可比拟的。但是话又说回来了,鹅厂的官方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>`

 
具体实现的效果图如下所示:
image
以上就是本章全部内容,欢迎关注三掌柜的微信公众号“程序猿by三掌柜”,三掌柜的新浪微博“三掌柜666”,欢迎关注!

随时随地学软件编程-关注百度小程序和微信小程序
关于找一找教程网

本站文章仅代表作者观点,不代表本站立场,所有文章非营利性免费分享。
本站提供了软件编程、网站开发技术、服务器运维、人工智能等等IT技术文章,希望广大程序员努力学习,让我们用科技改变世界。
[微信小程序开发:腾讯地图集成步骤(旧题新说)]http://www.zyiz.net/tech/detail-151693.html

上一篇:搭建hexo个人博客爬坑之一

下一篇:小程序搜索功能,云开发搜索,小程序云开发模糊搜索,同时搜索多个字段

赞(0)
关注微信小程序
程序员编程王-随时随地学编程

扫描二维码或查找【程序员编程王】

可以随时随地学编程啦!

技术文章导航 更多>
扫一扫关注最新编程教程