更新记录

1.0.2（2024-10-18） 下载此版本

增加周边搜索和行政区域搜索配置

1.0.1（2024-10-08） 下载此版本

优化体验

1.0.0（2024-09-11） 下载此版本

leaflet 安卓版

平台兼容性

⛱️ 介绍

choose-location是基于leaflet+高德地图瓦片+天地图逆解析+系统定位开发出来的选择位置，不需要第三方费用，灵活度高可二开，高仿官方的uni.chooseLocation。

功能：

• 用户位置（系统定位）
• 周边搜索
• 行政区域搜索
• 标记点可拖拽，自动更新周边服务
• 天地图逆解析

⚡ 使用说明

获取天地图所需资源

资源地址

• 将libs所有文件复制根目录下
• 将static的图片复制进入

创建selectLocation.vue(pages/index/selectLocation)增加天地图的key

<template>
  <view>
    <choose-location @locationResult="locationResult" :tdKey='tdKey'></choose-location>
  </view>
</template>

<script>
export default {
  data() {
    return {
        tdKey:'你的天地图key',
        ambitusSearch: {
          keyWord: "区",
          level: 18,
          queryRadius: 300,
          queryType: 3,
          start: 0,
          count: 99,
          show: 1,
},
       regionSearch:{
         start: 0,
         count: 99,
         specify: 156110000, //行政区的国标码 需要修改  默认北京
         queryType: 12,
}
    };
  },
  methods: {
    locationResult(e) {
      console.log(e);
      uni.$emit("getPostion", {
        postion: {
          address: e.address,
          lonlat: e.lonlat,
        },
      });
      uni.navigateBack()
    },
  },
};
</script>

<style></style>

行政区的国标码

使用选择位置

<template>
  <view>
    <button @click="chooseLocation">选择位置</button>
    <view> {{ postion.address }}</view>
    <view> {{ postion.lonlat }}</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      postion: {},
    };
  },
  onLoad() {
    let that = this;
    uni.$on("getPostion", function (data) {
      if (data.postion) {
        console.log("index", data.postion);
        that.postion = data.postion;
      }
    });
  },
  methods: {
    // 打开地图选择位置
    chooseLocation() {
      uni.navigateTo({
        url: "/pages/index/selectLocation",
      });
    },
  },
};
</script>