小程序 map地图中，在地图中心点固定一个标记，并逆解析标记地址

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

---

效果图：

在地图中心

---

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

---

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

---

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

#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.latitude
			const longitude = res.longitude
			that.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.province
			let city = res.result.address_component.city
			let recommend = res.result.formatted_addresses.recommend
			let local = province + city + recommend
			that.setData({
				address: local,
				city: city
			})
		}
	})
},

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

---

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

---

描述：标记点在地图中心，使用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,
            })
        }
    })
},

---

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