微信小程序之地图组件

前言：官方提供好了 map组件直接使用即可，具体配置可以参考demo

1、配置权限

"permission": {
  "scope.userLocation": {
    "desc": "请求获取地理信息"
  }
}

 2、使用map

wx.getLocation()  可以获取当前位置，需要在小程序中申请，也可以使用demo中的方式获取(如下api获取上下文对象，再进行对应功能的获取)

wx.createMapContext

功能描述

 

//js文件
Page({
    data:{
        latitude: 23.099994,
        longitude: 113.324520,
        markers: [{
            id: 1,
            latitude: 23.099994,
            longitude: 113.324520,
            name: 'T.I.T 创意园'
        }],
        covers: [{
            latitude: 23.099994,
            longitude: 113.344520,
            iconPath: '/image/location.png'
        }, {
            latitude: 23.099994,
            longitude: 113.304520,
            iconPath: '/image/location.png'
        }]
    },
    onLoad(option) {

    },
    onShow() {
        this.getCurrentPosition()
    },
    handlePosition(e){
        let longitude = e.detail.longitude
        let latitude = e.detail.latitude
    },
    getCurrentPosition(){
       
        wx.getLocation().then(res => {
            console.log(res);
            this.setData({
                longitude: res.longitude,
                latitude: res.latitude,
                markers: [{
                    id: 0,
                    height: 50,
                    width: 40,
                    longitude: res.longitude,
                    latitude: res.latitude
                }]
            })
        });
        wx.onLocationChange(it=>{
            console.log(it,'--监听位置--')
        })
    },
    //查看视频
    lookVideo(){
        wx.redirectTo({
            url:'../video/index'
        })
    }
})