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

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

效果图：

在地图中心

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

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

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

<map id="map" longitude="{{longitude}}" latitude="{{latitude}}" bindregionchange="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.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
			})
		}
	})
},

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

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

<view class="map">
  <map id="map" longitude="{{longitude}}" latitude="{{latitude}}" bindregionchange="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,
            })
        }
    })
},

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

扫描二维码关注公众号，回复： 6156136 查看本文章

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

猜你喜欢