hello~ 欢迎各位大佬的观看，如果此教程有什么不足之处还请大家多多提醒。

本次教程使用微信开发者工具直接开发

咱们来做一个简单的腾讯地图

首先，使用微信开发者工具新建一个小程序

打开目录 pages > index > index.wxml

把原来多余的代码去掉，直接一个map标签，等待片刻。

此时地图太小，我们需要修改一下样式，让地图全屏

打开结构一看，所有的样式都是默认的，没有全屏。

所以我们需要先把 包括map 标签的父组件、父组件的父组件等等都改成宽高100% 

首先page宽高100% 这个样式建议去全局样式修改

接下来修改index里面的 container 和 map 

接下来就是要定位自己的位置

先给咱们的map标签加上个id，一会要用。再加上一个按钮，实现点击按钮定位到自己的位置

在data中定义一下MapContext、local 一会儿要用

data: {

    MapContext: {}, // 地图实例

    local: {} //经纬度

  },

接下来初始化地图

wx.createMapContext(string mapId, Object this)

string mapId         是 map 标签的id

Object this         是在自定义组件下，当前组件实例的this，以操作组件内 map 组件

我把它放在了index.js 的 onLoad 里面:

onLoad: function () {

    let _this = this;

    this.MapContext = wx.createMapContext("maps", _this);

},

初始化完成后 我们该定位了

我们先给按钮标签上绑定一个locationAc事件

在index.js中定义locationAc方法    点击按钮的事件

// 点击定位到当前位置

  locationAc: function () {

    let _this_ = this;

    // 获取当前位置

    wx.getLocation({

      success: (res) =>{

          _this_ .local = { longitude :res. longitude , latitude : res. latitude }

      }

    })

    // 根据获得的经纬度，将地图移动到指定位置

     this. MapContext.moveToLocation( _this_.local )

  },

将地图中心移置当前定位点，此时需设置地图组件 show-location 为true。'2.8.0' 起支持将地图中心移动到指定位置。

    show-location="true">

    

这是写好的 wxml 、 js 、wxss

wxml:

js:

wxss:

那么最简单的小程序腾讯地图就完成了哦~