先上效果图：
说明： 用了原生的wx.getLocation 定位功能获取 经纬度，然后通过高德解析位置（可以获取位置信息，及附近地址，天气等）
准备：需要下载高德小程序位置组件https://lbs.amap.com/api/wx/download
配置：在创建的项目中，新建一个名为 libs 目录，将 amap-wx.js （amap-wx.js 从相关下载页面下载的 zip 文件解压后得到）文件拷贝到 libs 的本地目录下，如下图所示。
引用高德组件
（下面有完整代码包含城市锚点滚动功能）主要代码如下：
import amapFile from'../../libs/amap-wx.js' //记着引用
methods: {
//定位城市
gpsCity(){
var that=this;
//调用自带位置获取
wx.getLocation({
type: 'gcj02', //返回可以用于wx.openLocation的经纬度
success: function (res) {
var latitude = res.latitude//维度
var longitude = res.longitude//经度
that.loadCity(latitude,longitude);//调用高德
}
})
},
//把当前位置的经纬度传给高德地图，调用高德API获取当前地理位置，天气情况等信
loadCity(latitude, longitude){
var that=this;
var myAmapFun = new amapFile.AMapWX({ key: that.markersData.key });
myAmapFun.getRegeo({
location: '' + longitude + ',' + latitude + '',//location的格式为'经度,纬度'
success: function (data) {
console.log(data);//全部数据
var cityCode=data[0].regeocodeData.addressComponent.adcode//获取城市code
that.gpsCode=cityCode
that.city_name=data[0].regeocodeData.addressComponent.province//获取省份名称
console.log(that.gpsCode);
console.log(that.city_name);
},
fail: function (info) {}
});
},
}
完整页面代码如下（包含锚点滚动城市列表功能博客有篇文章介绍此功能）：
<template>
<div class="longinPage">
<div class="right_Letter">
<div class="Letter_list" v-for="(item,index) in LetterCity" :key="index" @click="addClassName(index,item.letter)" :class="{active:index == thatnum}">{{item.letter}}</div>
</div>
<scroll-view class="longinPage_scroll" :scroll-y="true" @scrolltolower="scrolltolower" @scroll="scroll" :scroll-into-view="toView" :scroll-with-animation="true">
<div class="head_gps">
<div class="title">定位城市</div>
<div class="hot_city hot_citys">
<div class="city_list" @click="toHome(city_name,gpsCode)">{{city_name}}</div>
<div class="city_again" @click="gpsCity">重新定位</div>
</div>
</div>
<div class="head_gps">
<div class="title">热门城市</div>
<div class="hot_city">
<div class="city_list" v-for="(item,index) in hotCity" :key="index" @click="toHome(item.name,item.linkageid)">{{item.name}}</div>
</div>
</div>
<div class="Letter_city" v-for="(item,index) in LetterCity" :key="index" :id="item.letter">
<div class="Letter_title">{{item.letter}}</div>
<div v-for="(item2,index2) in item.childArr" :key="index2">
<div class="Letter_province">{{item2.name}}</div>
<div class="hot_city">
<div class="city_list" v-for="(item3,index3) in item2.childArr" :key="index3" @click="toHome(item3.name,item3.linkageid)">{{item3.name}}</div>
<div class="placeholder"></div>
</div>
</div>
</div>
<div class="box"></div>
</scroll-view>
</div>
</template>
<script>
import LetterCity from "./LetterCity.json"
import amapFile from'../../libs/amap-wx.js'
export default {
data () {
return {
LetterCity:"",
hotCity:[],
thatnum: 0,
toView:'',
city_name:"--",
markersData:{
latitude: '',//纬度
longitude: '',//经度
key: "***********************"//申请的高德地图key（申请的web key）
},
gpsCode:'',
}
},
onLoad:function(options){
//标题
wx.setNavigationBarTitle({
title: '选择城市'
})
this.LetterCity=LetterCity
//获取开通城市
this.$http.post({
url:"/apiyd/index/getOpenCityListInfo",
data:{
source:'2',
}
})
.then(res => {
if(res.code==1000){
this.hotCity=res.data
}else{
wx.showToast({
title: res.message,
icon: 'loading',
duration: 2000,
mask: true,
});
}
})
this.gpsCity();
},
methods: {
//定位城市
gpsCity(){
var that=this;
//调用自带位置获取
wx.getLocation({
type: 'gcj02', //返回可以用于wx.openLocation的经纬度
success: function (res) {
var latitude = res.latitude//维度
var longitude = res.longitude//经度
that.loadCity(latitude,longitude);//调用高德
}
})
},
//把当前位置的经纬度传给高德地图，调用高德API获取当前地理位置，天气情况等信
loadCity(latitude, longitude){
var that=this;
var myAmapFun = new amapFile.AMapWX({ key: that.markersData.key });
myAmapFun.getRegeo({
location: '' + longitude + ',' + latitude + '',//location的格式为'经度,纬度'
success: function (data) {
console.log(data);
var cityCode=data[0].regeocodeData.addressComponent.adcode.substring(0, 2)+"0000";
that.gpsCode=cityCode
that.city_name=data[0].regeocodeData.addressComponent.province
console.log(that.gpsCode);
console.log(that.city_name);
},
fail: function (info) {}
});
},
//to首页
toHome(name,numID){
wx.setStorage({
key:'cityName',
data:name
})
wx.setStorage({
key:'cityId',
data:numID
})
wx.switchTab({url: "/pages/index/main"})
},
//选择字母
addClassName: function(index,id) {
this.Tips(id)
this.thatnum = index;
var that=this;
for (let i = 0; i < that.LetterCity.length; ++i) {
if (that.LetterCity[i].letter == id) {
that.toView= that.LetterCity[i].letter
break
}
}
},
//提示
Tips(text){
wx.showToast({
title: text,
icon: 'none',
duration: 500
});
},
}
}
</script>
<style scoped>
.longinPage{
position: fixed;
top: 0;
left: 0;
z-index: 50;
width: 100%;
height: 100%;
background: #F7F7F7;
padding: 0 9% 0 3%;
box-sizing: border-box;
overflow: hidden;
}
.longinPage_scroll{
width: 100%;
height: 100%;
padding-top: 10px;
}
.bottom_text{
font-size: 20px;
color: #B5B5B5;
text-align: center;
}
.right_Letter{
position: fixed;
right: 10px;
top: 80px;
z-index: 100;
width: 25px;
overflow: hidden;
}
.Letter_list{
width: 25px;
height: 25px;
font-size: 14px;
color: #006A3C;
text-align: center;
line-height: 25px;
margin-bottom: 5px;
}
.head_gps{
margin-top: 10px;
}
.title{
font-size: 14px;
color: #333333;
margin-bottom: 10px;
}
.city_list{
width: 96px;
height: 27px;
border: 1px solid #CCCBCB;
border-radius: 2px;
line-height: 27px;
text-align: center;
margin-bottom: 10px;
font-size: 14px;
color: #6D6D6D;
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
}
.hot_city{
display: flex;
justify-content:space-between;
flex-wrap: wrap;
}
.hot_citys{
justify-content: flex-start;
}
.Letter_title{
width: 22px;
height: 22px;
background: #006A3C;
border-radius: 50%;
font-size: 14px;
color: #FFFFFF;
text-align: center;
line-height: 22px;
margin: 15px 0;
}
.Letter_province{
font-size: 20px;
}
.placeholder {
width: 30%;
height: 0px;
}
.active{
background: #006A3C;
border-radius: 5px;
color: #fff;
font-size: 16px;
}
.box{
width: 100%;
height: 30px;
}
/*隐藏滚动条*/
.longinPage_scroll ::-webkit-scrollbar {
width: 0;
height: 0;
color: transparent;
}
.city_again{
width: 96px;
height: 27px;
line-height: 27px;
margin-left: 10px;
color: #6D6D6D;
}
</style>