: '没有找到该城市', icon: 'none' }); } } } }); // 将uniapp实例挂载到页面 app.$mount(); ``` ## **结语** 希望这篇文章能帮助你实现uniapp城市列表选择、获取经纬度和搜索功能。如果你有任何问题，欢迎随时留言。 一文读懂uniapp实现城市列表选择，获取经纬度和搜索功能

在 Uniapp 中实现城市列表选择、获取经纬度和搜索功能

城市列表选择

在 Uniapp 中实现城市列表选择功能十分便捷。首先，你需要准备一个包含城市名称、代码和经纬度的城市列表。你可以从网上下载或自己创建。接下来，在 Uniapp 项目中创建一个页面，并在其中添加一个城市选择器。Uniapp 提供了 picker 组件，可以轻松实现城市选择功能。当用户选择一个城市时，你就能获取该城市的经纬度信息。

获取经纬度

要获取用户的当前位置，可以使用 Uniapp 提供的 wx.getLocation API。此 API 可以获取用户的经度和纬度等位置信息。你可以将获取到的经纬度存储在本地存储中，或将其发送到服务器。

搜索功能

Uniapp 提供了 search 组件，可以轻松实现文本搜索功能。在搜索组件中输入城市名称并点击搜索按钮，组件会自动搜索城市列表中的城市，并显示搜索结果。

完整代码示例

// 城市列表数据
const cityList = [
  {
    name: '北京',
    code: '110000',
    longitude: 116.405285,
    latitude: 39.904989,
  },
  // ... 其他城市数据
];

// Uniapp 实例
const app = new Vue({
  data() {
    return {
      city: '', // 当前选中的城市
      longitude: '', // 经度
      latitude: '', // 纬度
    };
  },
  methods: {
    // 城市选择器改变事件
    onCityChange(value) {
      this.city = value;
      const cityInfo = cityList.find(city => city.code === value);
      this.longitude = cityInfo.longitude;
      this.latitude = cityInfo.latitude;
    },

    // 获取当前位置
    getLocation() {
      wx.getLocation({
        type: 'gcj02',
        success: (res) => {
          this.longitude = res.longitude;
          this.latitude = res.latitude;
        },
        fail: (err) => {
          console.log(err);
        },
      });
    },

    // 搜索城市
    onSearch(value) {
      const cityInfo = cityList.find(city => city.name === value);
      if (cityInfo) {
        this.city = cityInfo.code;
        this.longitude = cityInfo.longitude;
        this.latitude = cityInfo.latitude;
      } else {
        wx.showToast({
          title: '没有找到该城市',
          icon: 'none',
        });
      }
    },
  },
});

// 挂载 Uniapp 实例到页面
app.$mount();

结语

本文详细介绍了如何在 Uniapp 中实现城市列表选择、获取经纬度和搜索功能。希望这篇文章能对你有所帮助。如果你有任何疑问，欢迎随时留言。

常见问题解答

1. 如何将城市列表数据添加到 Uniapp 项目中？
   • 你可以将城市列表数据存储在一个 JSON 文件中，然后在 Uniapp 项目中引入该文件。
2. 如何自定义城市选择器的外观？
   • 你可以使用 picker 组件的样式属性来自定义城市选择器的外观。
3. 获取的经纬度数据不准确怎么办？
   • 请确保你的设备启用了 GPS 或网络定位功能。
4. 搜索功能找不到我输入的城市怎么办？
   • 请确保你的城市列表数据中包含了你输入的城市。
5. 如何将获取到的经纬度数据发送到服务器？
   • 你可以使用 Uniapp 的网络请求 API 将经纬度数据发送到服务器。