更新记录

1.0.0（2025-08-21） 下载此版本

城市选择插件，城市数据在city.ts中，可以自行更新，选择城市后给父组件返回选中城市数据。支持城市搜索，坐着工作中使用，不满足需求自行调整。

平台兼容性

uni-app(4.73)

目录

放入components 目录中即可，页面中直接使用不需要单独引入

使用实例

<m-city-selector @selectCity="selectCity" 
    :hotCities="hotCities" @openMap="openMap"
             :locationCity="locationCity" @locateCity="locateCity" :address="address"
        >

        </m-city-selector>

参数说明：

hotCities  热门城市
cityData 城市数据
locationCity 定位城市
address 详细地址

事件说明
openMap 打开地图选点
selectCity  城市选择后的事件
locateCity 当前定位

示例

<template>
    <view>
        <m-city-selector @selectCity="selectCity" 
    :hotCities="hotCities" @openMap="openMap"
             :locationCity="locationCity" @locateCity="locateCity" :address="address"
        >

        </m-city-selector>
    </view>
</template>

<script setup lang="ts">
import mCitySelector from '@/components/m-city-selector/m-city-selector.vue'
import { ref } from 'vue'
import {commonApi} from "@/api/common/index"
import { onLoad } from '@dcloudio/uni-app'
import { useLocation } from '@/stores/location'
// 热门城市
const hotCities=ref<any>([{"city": "北京", "lat": 39.9042, "lng": 116.4074},
{"city": "成都", "lat": 30.5728, "lng": 104.0668},
 {"city": "上海", "lat": 31.2304, "lng": 121.4737}
])

// 当前城市
const locationCity=ref<any>({})

const location1=useLocation()
// 详细地址
const address=ref<any>("")
// 重新选择地址
const openMap=(e:{longitude:number,latitude:number})=>{
    let location = e.longitude + ',' + e.latitude;
        commonApi().getLocation({
          location: location
        }).then(res=>{
            let ctyedata=Array.isArray(res.data.regeocode.addressComponent.city)?res.data.regeocode.addressComponent.province:res.data.regeocode.addressComponent.city
         location1.setAddress({
           city: ctyedata,
           province: res.data.regeocode.addressComponent.province,
           district: res.data.regeocode.addressComponent.district,
           detail: res.data.regeocode.formatted_address
         })
         location1.setLocation(e.latitude + ',' +e.longitude )
  address.value=res.data.regeocode.formatted_address
         locationCity.value=ctyedata
         uni.navigateBack()
        })
}
// 选择城市
const selectCity=(e:any)=>{

let location = e.lng + ',' + e.lat;
        commonApi().getLocation({
          location: location
        }).then(res=>{
            let ctyedata=Array.isArray(res.data.regeocode.addressComponent.city)?res.data.regeocode.addressComponent.province:res.data.regeocode.addressComponent.city
         location1.setAddress({
           city: ctyedata,
           province: res.data.regeocode.addressComponent.province,
           district: res.data.regeocode.addressComponent.district,
           detail: res.data.regeocode.formatted_address
         })
location1.setLocation(e.lat + ',' +e.lng )
  address.value=res.data.regeocode.formatted_address
         locationCity.value=ctyedata
         uni.navigateBack()
        })
}
// 定位城市
const locateCity=async ()=>{
// #ifdef MP-WEIXIN
  uni.getLocation({
 type: 'wgs84',
    success: function (res) {

        let location = res.longitude + ',' + res.latitude;
        commonApi().getLocation({
          location: location
        }).then(res=>{
             location1.setLocation(res.latitude + ',' +res.longitude )
         location1.setAddress({
           city: res.data.regeocode.addressComponent.city,
           province: res.data.regeocode.addressComponent.province,
           district: res.data.regeocode.addressComponent.district,
           detail: res.data.regeocode.formatted_address
         })
          address.value=res.data.regeocode.formatted_address
        })
    },
    fail: function (res) {

    }
  })
// #endif
}
// 获取城市数据
const getCityData=async ()=>{ 

}
onLoad(
    ()=>{
    getCityData()
    console.log(location1.address.city,"哈哈---")
    if(!location1.address.city){
locateCity()
    }else{
        locationCity.value=location1.address.city
         address.value=`${location1.address.detail}`
    }

}
)

</script>

<style lang="scss">

</style>