效果图如下:
绿色地标固定在中间,移动地图的时候获取对应信息。
先定义map。
<Map className="location" id={location}
latitude={this.state.latitude}
longitude={this.state.longitude}
markers={this.state.markers}
scale='16'
onRegionchange={this.regionchange}
// controls={this.state.controls}
show-location
>
<CoverView className="coverloc"><CoverImage src={locationpng} className="coverlocpng"></CoverImage></CoverView>
</Map>
写对应样式。
.coverloc {
z-index:;
margin:auto;
text-align: center;
position:absolute;
left:50%;
top:50%;
height: 100px;
width: 100px;
.coverlocpng {
height: 100px;
width: 100px;
}
}
写对应的移动地图的函数,需要用到腾讯地图对微信小程序的支持。
regionchange = (e) => {
console.log(e)
let _this = this
let value
if (e.type == 'end') {
this.mapCtx.getCenterLocation({
success: function (res) {
qqmapsdk.reverseGeocoder({
location: {
latitude: res.latitude,
longitude: res.longitude
},
success: function (resc) {
console.log(resc)
value = resc.result.address_component.street_number //address
Taro.setStorageSync('site', value)
console.log('地址是:' + vlaue)
}
})
}
})
}
}
好,完成,这样就可以简单的拿取到地图的中间位置信息了。