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' 起支持将地图中心移动到指定位置。
<view class="container">
<map id="maps" show-location="true"></map>
<view id="location" bindtap="locationAc"></view>
</view>
这是写好的 wxml 、 js 、wxss
wxml:
js:
wxss:
那么最简单的小程序腾讯地图就完成了哦~
