微信小程序实现腾讯地图

1、// map.js

Page({

  data: {

    latitude: 0, // 初始纬度值

    longitude: 0, // 初始经度值

    markers: []

  },

  onReady: function (e) {

    this.getLocation(); // 主动获取用户地理位置信息

  },

  getLocation: function () {

    wx.getLocation({

      type: 'gcj02',

      success: (res) => {

        this.setData({

          latitude: res.latitude,

          longitude: res.longitude,

          markers: [{

            id: 0,

            latitude: res.latitude,

            longitude: res.longitude,

            title: '当前位置'

          }]

        });

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

        this.mapCtx.moveToLocation(); // 移动地图到当前位置

      },

      fail: (error) => {

        console.log('获取地理位置失败', error);

      }

    });

  },

  navigateTo: function () {

    wx.openLocation({

      latitude: this.data.latitude,

      longitude: this.data.longitude,

      name: '当前位置',

      scale: 18

    });

  }

});

2、<!-- map.wxml -->

<view>

  <map id="MyMap" style="width: 100%; height: 300px;"></map>

  <button bindtap="navigateTo" type="primary">导航到目的地</button>

</view>

3、/* pages/map/map.wxss */

.page{

    height: 100%;

}