taro 小程序自定义地图选点功能-Toy模板网

这篇具有很好参考价值的文章主要介绍了taro 小程序自定义地图选点功能。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

效果：
taro 小程序自定义地图选点功能,taro,taro,小程序,地图选点

1、添加中心点 icon, 保证icon 处于地图中间

taro 小程序自定义地图选点功能,taro,taro,小程序,地图选点

  .map-box {
    width: 100vw;
    height: 36vh;
    position: relative;
    // 中心icon
    .center-icon-box {
      position: absolute;
      top: calc(50% - 30rpx); // 保证icon 处于地图中心点
      left: 50%;
      transform: translate(-50%, -50%);
      .icon {
        width: 72px;
        height: 72px;
      }
    }
  }

效果：
taro 小程序自定义地图选点功能,taro,taro,小程序,地图选点

2、地图移动后，重新获取当前中心点坐标。监听 map `regionChange` 事件

      <map
        id="searchMap"
        style="height: 100%; width: 100%"
        :latitude="state.latitude"
        :longitude="state.longitude"
        :show-location="true"
        @regionChange="regionChange"
      >
        <!-- map 控制器 -->
        <!-- 中心点 -->
        <cover-view class="center-icon-box">
          <cover-image :src="iconPath" class="icon" />
        </cover-view>
      </map>

taro 小程序自定义地图选点功能,taro,taro,小程序,地图选点
监听到地图视野改变后，通过getCenterLocation 方法获取到中心点坐标：
文章来源地址https://www.toymoban.com/news/detail-517241.html

3、通过腾讯地图 jssdk 提供的 `reverseGeocoder` 方法，将坐标转换为地址。设置参数 get_poi = 1, 返回推荐周边地址列表。

export const getAddressByLocation = (location: string) => {
  qqMapSdk.reverseGeocoder({
    location: location || '',
    get_poi: 1, // 返回回周边POI列表
    poi_options: 'address_format=short&radius=3000&policy=2',
    success: (res) => {
      console.log(res.result)
      // const { address = '', formatted_addresses } = res.result
      // const addressText = `${address} ${formatted_addresses.recommend}`
    },
  })
}