自定义腾讯地图组件

可使用第三方插件和自定义组件修改定位地址

1.data

data: {

    includePoints:[],

　//默认定位地址

    location:{

      longitude:'113.324520',

      latitude:'23.099994',

    },

  },

 

2.生命周期函数--监听页面初次渲染完成

 onReady: function (e) {

    this.mapCtx = wx.createMapContext('myMap')

  },

 

3.js

fullScreen(){

    // 使用 地图上下文包含点

    this.mapCtx.includePoints({

       points:this.data.includePoints,

       padding:[40,40,40,40]

    })

  },

  getLocation() {

    // 获取定位

    wx.getLocation({

      type: 'gcj02',

      altitude: true, //高精度定位

      success:res=> {

        this.setData({

          location:{

            longitude: res.longitude,

            latitude: res.latitude

          },

        })

        // 使用地图上下文，将地图视野中心移到定位点

        var locations=this.data.location

        this.mapCtx.moveToLocation({

          longitude:locations.longitude,

          latitude:locations.latitude

        })

      },

      fail: function() {

        

      },

    })

  },

  //切换地图显示类型

  layers() {

    this.setData({

      showSatellite: !this.data.showSatellite

    })

 },

 

4.wxml

<map id="showMap" longitude="{{location.longitude}}" latitude="{{location.latitude}}" show-location="true" enable-satellite="{{showSatellite}}" style="width:100%;height:65rpx">

  <!--图层切换-->

  <cover-view class='layers controll' bindtap='layers'>

    <cover-image src='../image/刷新.png' class='ten_l'></cover-image>

  </cover-view>

  <!--定位功能-->

  <cover-view class='position controll' bindtap='getLocation'>

    <cover-image src='../image/定位.png' class='ten_l'></cover-image>

  </cover-view>

</map>

 

5.wxss

//图标样式

.ten_l{

  width:50rpx;

  padding:20rpx;

  height:50rpx;

}