美文网首页
微信小程序开发:腾讯地图集成步骤

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

作者: 三掌柜666 | 来源:发表于2021-01-14 09:47 被阅读0次

在腾讯生态开发过程中,包括在微信小程序开发的时候,避免不了使用腾讯送的腾讯大礼包,从微信支付到腾讯地图,一条龙的腾讯大礼包,不得不说鹅厂的实力是无可比拟的。

但是话又说回来了,鹅厂的官方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>

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

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

相关文章

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

    在腾讯生态开发过程中,包括在微信小程序开发的时候,避免不了使用腾讯送的腾讯大礼包,从微信支付到腾讯地图,一条龙的腾...

  • 微信小程序从零开始开发步骤阅读链接

    阅读链接: 微信小程序从零开始开发步骤(一)搭建开发环境 微信小程序从零开始开发步骤(二)创建小程序页面 微信小程...

  • uniapp h5 使用腾讯地图

    1.在腾讯地图开发平台上申请了一个key,然后下载了一个微信小程序使用的微信小程序JavaScriptSDK v1...

  • mpvue接入腾讯地图

    进入腾讯地图服务官网:腾讯位置服务 点击接入指引完成接入步骤 第四步骤选择微信小程序点击查看详情 完成相关配置 第...

  • 微信小程序开通腾讯地图服务

    在微信小程序中,每个腾讯位置服务应用对应一个微信小程序,所以需要为小程序开通服务,并且获取key值。 开通腾讯地图...

  • 微信小程序知识全景思维导图

    微信小程序思维导图 腾讯云小程序学习地址 小程序开发文档 小程序开发社区

  • 小程序开发工具

    开发工具 微信专为小程序打造开发工具,叫微信开发者工具 小程序的腾讯云 腾讯为开发者提供免费的开发环境和生产环境 ...

  • 小程序采坑之旅

    1. 微信小程序中使用腾讯地图 如果你的地图js插件是放在客户端不是部署在服务器的,比如放在小程序端,请把腾讯地图...

  • 浅谈微信小程序开发价格是多少?

    从微信小程序横空出世开始,便备受关注。只要下载腾讯开放的小程序开发工具,就能自主开发小程序,而关于微信小程序开发价...

  • 微信小程序云开发(一)

    什么是微信云开发 微信云开发是微信团队联合腾讯云推出的专业的小程序开发服务。 开发者可以使用云开发快速开发小程序、...

网友评论

      本文标题:微信小程序开发:腾讯地图集成步骤

      本文链接:https://www.haomeiwen.com/subject/lywmaktx.html