一、index修改页面，让页面能够显示地图和一个添加标记的按钮。
index.wxml
<scroll-view class="scrollarea" scroll-y type="list"><view class="index_container"><map id="map" style="width: 100%; height: 100%;" bindmarkertap="markertap" bindregionchange="regionchange" markers="{{markers}}"><button type="primary" bindtap="addMarker">添加</button></map></view>
</scroll-view>scrollarea和index_container都是容器，为了布局而用的。内容主要有两个元素map和button，
其中我把button放在了map元素里面是为了实现，地图全屏，按钮在地图上的效果。
map元素：
style：设置元素占用空间，是相对于index_container容器的比例，因为index_container包含mapy元素。
bindmarkertap：定义一个回调函数，当点击地图中某个标记点的时候触发该回调函数，可用于处理标记点的信息。
regionchange：定义一个回调函数，当地图手动缩放的时候触发该回调函数，可用于处理地图视野变化的动作。
markers：地图添加标记的数组，下文细说。
button元素：
bindtap：按钮的回调函数。
还有按钮的大小、颜色、透明度等可以修改
还可以写成<button class="format" type="primary" bindtap="addMarker">添加</button>
format中定义按钮的样式，这种方法后面会细说。
二、修改index布局格式
index.wxss
page {height: 100vh;display: flex;flex-direction: column;
}
.scrollarea {flex: 1;overflow-y: hidden;flex-direction: column;align-items: center;justify-content: space-between;
}
.index_container {height: 100%;display: flex;flex-direction: column;align-items: left;margin-left: 0rpx;justify-content: space-between;padding: 0 0;box-sizing: border-box;
}都是一些配置参数，通过名字即可了解意思，看不懂的百度搜索，基本都能搜到。
三、代码逻辑实现
Page({data: { // 页面内全局变量，可通过this.data.markers使用，index.wxml中可通过{{markers}}使用markers: []},// 监听页面初次渲染完成onReady: function (e) {//this.requestLocationPermission()this.mapCtx = wx.createMapContext('map', this) // 创建地图上下文环境变量var that = this;// 获取设备当前中心定位this.mapCtx.getCenterLocation({success: function (res) {that.mapCtx.moveToLocation({ // 将地图中心移动至当前定位longitude: Number(res.longitude),latitude: Number(res.latitude),// longitude: Number(118.796000),// latitude: Number(32.058300),})}})},markertap: function (e) {// 处理点击标记点事件，可以在这里展示照片和文字信息},regionchange: function (e) {// 处理地图视野变化事件},addMarker: function () {// 添加标记点var that = this;this.mapCtx.getCenterLocation({success: function (res) {var markers = that.data.markers;console.log(res, markers);markers.push({iconPath: '/claw.png', // 标记点图片，放在app.js同级目录下id: markers.length,latitude: res.latitude, // 标记点坐标longitude: res.longitude,title: '标记' + markers.length,width: 25, // 标记点图片长、宽height: 25});that.setData({markers: markers});}});},
});四、点击编译查看效果
默认展示如下图所示
点击“添加”按钮会在当前地图中心添加一个标记