效果图如下:
绿色地标固定在中间,移动地图的时候获取对应信息。
先定义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: 6; 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) } }) } }) } }
好,完成,这样就可以简单的拿取到地图的中间位置信息了。