写在前：想实现在地图中心点出现一个位置标记，两种方式，一种固定在地图中心点，另个种，地图滑动后，中心点改变。

效果图：

在地图中心

 显示地图：我们使用小程序提供的组件来显示地图（map组件 详情）

<map id="map" longitude="{{longitude}}" latitude="{{latitude}}" bindregiοnchange="mapchangeTap" ></map><!-- longitude 设置的是中心经度  latitude 设置的是中心纬度 bindregionchange 视野发生变化时触发，即拖动，缩放等地图触发 -->

描述：使用cover-view 和 cover-image 实现在地图中间出现一个标记（图片）；（cover-view文本视图）

<map id="map" longitude="{{longitude}}" latitude="{{latitude}}" bindregiοnchange="mapchangeTap" >   <cover-image class="img-map" src="../../../../images/fabulous_icon.png"> </map><!-- 注意：图片需要正确的地址  -->

描述：简单的样式  把图片定位到地图中心

#map {width: 100%;height: 100%;position: relative;}.img-map {width: 54rpx;height: 54rpx;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%); }

描述：获取地图中心点，地址逆解析；（腾讯提供的sdk详情）

• 申请秘钥（非个人）
• 开通webserviceAPI服务（可看详情）
• 下载微信小程序JavaScriptSDK（引入到项目，可查看详情）
• 等......

var QQMapWX = require('../../../../utils/qqmap-wx-jssdk.js');var demo = new QQMapWX({key: 'eee-eee-eee-eeee-eee' //申请的Key});data{    address: '没有定位地址', //逆解析地址},// 视图发生改变，修改中心点mapchangeTap: function() {// 中心点let that = this;this.mapCtx = wx.createMapContext('map');this.mapCtx.getCenterLocation({success(res) {    // console.log(res)const latitude = res.latitudeconst longitude = res.longitudethat.analysisTap(latitude, longitude)}})},// 地址逆解析analysisTap: function(lat, lng) {let that = this;demo.reverseGeocoder({location: {latitude: lat,longitude: lng},success: function(res) {console.log(res)let province = res.result.address_component.provincelet city = res.result.address_component.citylet recommend = res.result.formatted_addresses.recommendlet local = province + city + recommendthat.setData({address: local,city: city})}})},

注：重点是获取地图中心点，解析，图片就是定位到地图中间的，不随着地图移动；

描述：实现地图滑动，中心点移动 （本例中地图并非是充满整个页面）

<view class="map">  <map id="map" longitude="{{longitude}}" latitude="{{latitude}}" bindregiοnchange="bindchangeTap"></map></view>

描述：标记点在地图中心，使用markers （markers 详情）

data: {    latitude: 34.796491,    longitude: 113.665299,    address: '',    markers: [{        iconPath: '/images/location_icon.png',        id: 0,        latitude: 34.796491,        longitude: 113.665299,        width: 33,        height: 33    }]},// 地址逆解析analysisTap: function(lat, lng) {    let that = this;    demo.reverseGeocoder({        location: {            latitude: lat,            longitude: lng        },        success: function(res) {            // console.log(res)            let recommend = res.result.formatted_addresses.recommend            let local = res.result.address            that.setData({            address: recommend,            detail: local            })        }    })},//视图改变bindchangeTap: function() {    let that = this;    let mapCtx = wx.createMapContext('map')    mapCtx.getCenterLocation({        success:function(res) {            let lat = res.latitude            let lng = res.longitude            that.setData({                ["markers[0].latitude"]: lat,  //修改数组对象中的某一项                ["markers[0].longitude"]: lng,            })        }    })},

注：地图滑动或缩放，标记点修改地址，图片移动。