效果图如下:

绿色地标固定在中间,移动地图的时候获取对应信息。

先定义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)
            }
          })
        }
      })
    }
  }

好,完成,这样就可以简单的拿取到地图的中间位置信息了。