準備工作
所用到的技術
- 騰訊地圖微信小程序SDK
- 高德地圖WebServiceAPI服務
- APP獲取是否授權(quán)插件
- uview框架（不是必須）
接下來帶大家去申請
騰訊地圖微信小程序SDK
微信小程序JavaScript SDK
點擊下載 JavaScriptSDK v1.2
然后去申請騰訊地圖的 key
先創(chuàng)建應用 > 在添加key
在應用列表中就能看到我們申請的 key 了
高德地圖WebServiceAPI服務
高德地圖開放平臺
高德地圖這里只需要去申請一個 WebServiceAPI 服務的key
申請流程和騰訊地圖一樣
先創(chuàng)建應用 > 在添加key
APP獲取是否授權(quán)插件
在 dcloud 插件市場添加 插件鏈接
直接使用 HBuilderX 導入到項目
選擇自己的項目即可
uview框架
uview 框架這里就不寫操作步驟了
大家根據(jù)步驟安裝就行了
代碼實現(xiàn)
兩個頁面 index.vue fixedPosition.vue
首頁index.vue代碼
<template>
<view class="content">
<button class="" @click="positionClick">點擊選擇位置</button>
<view class="">當前地址：{{address.city}}{{address.area}}</view>
<view class="">當前位置坐標：{{address.lng}},{{address.lat}}</view>
</view>
</template>
<script>
import QQMapWX from '@/utils/qqmap-wx-jssdk.min.js' // 騰訊地圖SDK （自己把騰訊地圖SDK添加到自己指定的文件）
export default {
data() {
return {
address: {
city: '',// 城市
area: '',// 區(qū)、縣
lng: '',// 經(jīng)度
lat: '' // 緯度
}
}
},
onLoad() {
// 位置授權(quán)
this.getLocation()
},
onShow() {
let _this = this
// 重新獲取定位
uni.$on('againLocation', function() {
_this.address = {
city: '',
area: '',
lng: '',
lat: ''
}
_this.getLocation()
})
// 解析傳過來的位置
uni.$on('getLocation', function(city, area) {
let address = city + area
_this.getMapAddress(address)
})
},
mounted() {
},
methods: {
// 選擇位置
positionClick() {
let item = encodeURIComponent(JSON.stringify(this.address))
uni.navigateTo({
url: `/pages/fixedPosition/index?item=${item}`
})
},
// 重新獲取定位
getLocation() {
let _this = this
uni.getLocation({
type: 'wgs84',
success: function(res) {
_this.getAddress(res.longitude, res.latitude).then(res => {
_this.address = {
city: res.result.ad_info.city,
area: res.result.ad_info.district,
lng: res.result.ad_info.location.lng,
lat: res.result.ad_info.location.lat
}
}).catch(res => {})
},
fail() {
// 首次拒絕授權(quán)位置（根據(jù)自己要求配置或不配默認地址）
_this.address = {
city: '北京市',
area: '',
lng: '116.407526',
lat: '39.904030'
}
}
});
},
// 高德位置解析
getMapAddress(address) {
let _this = this
return new Promise(function(resolve, reject) {
uni.request({
url: `https://restapi.amap.com/v3/geocode/geo?address=${ address }&key=這里填高德申請的key`,
method: "GET",
success(res) {
console.info("高德地圖", res)
if (res.data.status == 1) {
const coordinate = res.data.geocodes[0].location.split(",")
_this.address = {
city: res.data.geocodes[0].city,
area: res.data.geocodes[0].district.length != 0 ? res.data.geocodes[0].district : "",
lng: coordinate[0],
lat: coordinate[1],
}
}
resolve();
},
});
});
},
// 騰訊地圖經(jīng)緯度轉(zhuǎn)中文地址
getAddress(lng, lat) {
return new Promise((resove, reject) => {
const qqmapsdk = new QQMapWX({
key: '騰訊地圖申請的key', //之前在騰訊位置服務申請的key
})
qqmapsdk.reverseGeocoder({
location: {
latitude: lat,
longitude: lng,
},
success: (res) => {
resove(res)
},
fail: (e) => {
reject(e)
},
})
})
}
}
}
</script>
<style lang="scss" scoped>
.content {}
</style>
城市列表fixedPosition.vue頁面
<template>
<view class="fixed-position">
<!-- 城市搜索 -->
<view class="search">
<input placeholder="請輸入城市" border="surround" v-model="code" shape="circle" prefixIcon="search" clearable
@focus="inputFocus" @blur="inputBlur" @input="inputFun"></input>
<view class="cancel" v-show="isCancel" @click="inputCancel">取消</view>
</view>
<!-- 搜索結(jié)果模塊 -->
<view class="search-box" v-show="isFocus || isCancel">
<view class="search-item" v-for="(item,index) in searchList" :key="index" @click="getLocation(item.name)">
<view class="">{{item.name}}</view>
</view>
</view>
<!-- 城市、區(qū)縣切換tabs 就這里用到了uview框架 -->
<u-tabs :list="tabsList" :current="current" @click="tabsClick" v-show="!isCancel"></u-tabs>
<view v-show="current == 0">
<!-- 當前位置、重新定位功能 -->
<view class="current-location" v-show="!isCancel">
<view class="left">當前：{{area.city}}{{area.area}}</view>
<view class="right" @click="Repositioning"><u-icon name="map" style="margin-right: 10rpx;"></u-icon>重新定位
</view>
</view>
<!-- 右側(cè)索引 -->
<view class='letter_right' v-show="!isCancel">
<text class='letter_item' v-for='(item,index) in letter' :key='index'
@tap.stop='letterTap(index)'>{{item}}</text>
</view>
<!-- 城市列表 -->
<scroll-view scroll-with-animation="true" class="cityListView" scroll-y="true" :scroll-into-view="scrollId"
v-show="!isCancel">
<view class="city-index-list">
<view class="city-item" v-for="(item,index) in cityList" :key="index" :id="item.letter">
<view class="letter">{{item.letter}}</view>
<view class="city" v-for="(text) in item.city" @click="getLocation(text.name)">{{text.name}}</view>
</view>
</view>
</scroll-view>
</view>
<!-- 區(qū)縣展示 -->
<view class="area" v-show="current == 1">
<view class="area-list">
<view class="area-item" v-for="(item,index) in areaList" :key="index">
<view class="area-title" @click="areaLocation(item.name)">{{item.name}}</view>
</view>
</view>
</view>
</view>
</template>
<script>
import { city } from './city.js' // 結(jié)尾有下載地址
import { area } from './area.js' // 結(jié)尾有下載地址
import permision from "@/js_sdk/wa-permission/permission.js" // 導入從DCloud安裝的插件
export default {
data() {
return {
address: {
city: '',
cityId: ''
},
code: '',
scrollId: '',
letter: ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T","U", "V", "W", "X", "Y", "Z"],
cityList: city,
cityAll: [],
tabsList: [{name: '國內(nèi)'}, {name: ''}],
areaList: [],
areaAll: [],
searchList: [],
current: 0,
area: {
city: '',
area: ''
},
isFocus: false,
isCancel: false
}
},
onLoad(options) {
// 首頁傳過來的數(shù)據(jù)
let item = JSON.parse(decodeURIComponent(options.item))
let name = item.city.split("市").join("");
this.cityList.forEach(itemS => {
itemS.city.forEach(text => {
if (text.name === item.city) {
this.address.city = text.name
this.address.cityId = text.id
}
})
})
// 根據(jù)城市ID查找出改城市所屬的區(qū)縣
this.areaList = area[this.address.cityId]
this.area.city = item.city
this.area.area = item.area
// 初始tabs標題
this.tabsList[1].name = name + '區(qū)縣'
},
async onShow() {
let isLocations = false
let _this = this
let device = uni.getSystemInfoSync().platform // 獲取當前設備
if (device === 'android') {
isLocations = await permision.requestAndroidPermission("android.permission.ACCESS_FINE_LOCATION") // 安卓方法返回用戶是否授權(quán)獲取位置
} else if (device === 'ios') {
isLocations = permision.judgeIosPermission("location") // ios方法返回用戶是否授權(quán)獲取位置
} else {
isLocations = await this.weChatGetLocation() // 返回微信小程序是否授權(quán)了位置
}
// 未授權(quán)時彈窗提示用戶授權(quán)
if (!isLocations) {
uni.showModal({
title: '提示',
content: '請開啟位置信息權(quán)限',
showCancel: false,
success() {
// 設備為android或ios是跳轉(zhuǎn)系統(tǒng)設置（用戶自行設置）
if (device === 'android' || device === 'ios') {
permision.gotoAppPermissionSetting(); // 打開權(quán)限設置界面
uni.navigateBack()
} else {
// 微信小程序時打開小程序設置界面
uni.openSetting({
success: (res) => {}
})
}
}
});
}
},
mounted() {
// 初始化城市JS數(shù)據(jù)
this.cityList.forEach(item => {
this.cityAll = this.cityAll.concat(item.city)
})
},
onUnload() {
// 銷毀事件監(jiān)聽
uni.$off('againLocation')
uni.$off('getLocation')
},
methods: {
// 重新定位
Repositioning() {
uni.$emit('againLocation')
uni.navigateBack()
},
// 獲取定位
getLocation(item) {
let name = item
uni.$emit('getLocation', name)
uni.navigateBack()
},
// 區(qū)定位
areaLocation(item) {
uni.$emit('getLocation', this.area.city, item)
uni.navigateBack()
},
// 右邊索引點擊
letterTap(index) {
this.scrollId = this.letter[index]
},
// tabs狀態(tài)切換
tabsClick(item) {
this.current = item.index
},
// 搜索輸入框聚焦
inputFocus() {
this.isFocus = true
this.isCancel = true
},
// 搜索輸入框失去焦點
inputBlur() {
this.isFocus = false
},
// 搜索框取消
inputCancel() {
this.isCancel = false
},
// 搜索輸入框輸入事件
inputFun(e) {
let value = e
let newArray = []
if (value == '') {
this.searchList = []
} else {
for (let i = 0; i < this.cityAll.length; i++) {
if (this.cityAll[i].name.indexOf(value) != -1 || this.cityAll[i].letter == value.toUpperCase()) {
newArray.push(this.cityAll[i])
}
}
this.searchList = newArray
}
},
// 微信小程序是否授權(quán)位置信息
weChatGetLocation() {
return new Promise((resolve, reject) => {
uni.authorize({
scope: 'scope.userLocation',
success() {
resolve(true)
console.log('授權(quán)了')
},
fail() {
resolve(false)
console.log('沒有授權(quán)')
}
})
})
}
}
}
</script>
<style lang="scss" scoped>
.fixed-position {
background-color: #fff;
.search {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20rpx 30rpx;
padding-bottom: 0rpx;
.cancel {
margin-left: 30rpx;
}
}
.search-box {
width: 100vw;
height: calc(100vh - 96rpx);
.search-item {
height: 88rpx;
line-height: 88rpx;
padding-left: 30rpx;
border-bottom: 1rpx solid #eee;
display: flex;
align-items: center;
}
}
.current-location {
padding: 30rpx 30rpx;
background-color: #fff;
display: flex;
justify-content: space-between;
.right {
display: flex;
align-items: center;
::v-deep .u-icon--right {
margin-right: 10rpx;
}
}
}
.letter_right {
z-index: 99;
width: 60rpx;
display: flex;
height: 100%;
position: fixed;
right: 0;
flex-direction: column;
justify-content: center;
top: 60rpx;
.letter_item {
display: block;
font-size: 20rpx;
color: #666;
text-align: center;
padding-left: 20rpx;
padding-top: 3rpx;
padding-bottom: 3rpx;
font-weight: bold;
}
}
.cityListView {
height: calc(100vh - 284rpx);
.city-index-list {
.city-item {
.letter {
height: 88rpx;
line-height: 88rpx;
font-weight: bold;
border-bottom: 1rpx solid #eee;
padding-left: 30rpx;
}
.city {
height: 88rpx;
line-height: 88rpx;
padding-left: 30rpx;
border-bottom: 1rpx solid #eee;
}
}
}
}
.area {
.area-list {
display: flex;
flex-wrap: wrap;
padding: 30rpx;
.area-item {
width: 33%;
height: 110rpx;
text-align: center;
.area-title {
width: 70%;
margin: 0 auto;
height: 68rpx;
line-height: 68rpx;
border: 1rpx solid #eee;
background: #fff;
border-radius: 10rpx;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
padding: 0 20rpx;
}
}
}
}
}
</style>
注意（必看）
APP：如果你的APP時在開發(fā)階段需要打開 定位功能
在項目的 manifest.json 中的 APP模塊配置
有問題可以留言也可以私我。
到這里也就結(jié)束了，謝謝大家觀看。文章來源：http://www.zghlxwxcb.cn/news/detail-676913.html
城市、區(qū)縣數(shù)據(jù)文章來源地址http://www.zghlxwxcb.cn/news/detail-676913.html
到了這里，關于uniapp實現(xiàn)城市列表選擇獲取經(jīng)緯度、附帶搜索功能（移動端、微信小程序）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
