小程序选择城市，以及实时获取当前城市位置

点击的时候

可选择，
代码：
其中样式是自己写的一个css，你们可以自己写样式，用到了阿里图标
index.wxml

<!--定位和搜索-->
  <view class="indexTop display-flex align-center">
    <view class="display-flex align-center">
      <text class="textColor city" catchtap="switchcity">{{city}}</text><text class="iconfont icon-xiala"></text>
    </view>
    <view class="search">
      <navigator>搜索</navigator>
    </view>
  </view>

index.js

/*到获取地理位置 */
onShow: function () {
     /*获取本地存储城市 */   
     wx.getStorage({
      key:"city",
      success:res=>{
        this.setData({
          city:res.data
        })
      }
    })
  },
  onLoad: function () {
    wx.getLocation({
      type: 'wgs84',
      geocode:true,
      success:res=>{
        var latitude = res.latitude;
        var longitude = res.longitude;

        // 构建请求地址
        var qqMapApi = 'https://apis.map.qq.com/ws/geocoder/v1/' + "?location=" + latitude + ',' +
          longitude + "&key=" + 'XVLBZ-BSU66-ULJSQ-MFGXD-TM7GZ-55F2M' + "&get_poi=1";
        this.sendRequest(qqMapApi);
      }
    })
  },
  /**
   * 发送请求获取地图接口的返回值
   */
  sendRequest: function (qqMapApi) {
    // 调用请求
    wx.request({
      url: qqMapApi,
      data: {},
      method: 'GET',
      success: (res) => {
        console.log(res)
        if (res.statusCode == 200 && res.data.status == 0) {
          // 从返回值中提取需要的业务地理信息数据
          this.setData({ city: res.data.result.address_component.city });
          wx.setStorage({
            key:"city",
            data:res.data.result.address_component.city
          })
        }
      }
    })
  },
  switchcity(){
    wx.navigateTo({
      url: 'switchcity/switchcity'
    })
  },

本地存储起来，好用到，在 ***构建请求地址***那里用到地图，原本是http请求，我们需要勾选小程序不校验合法域名，因为小程序只能访问https的，所以我们加上了s然后在开发者工具中 开发>开发设置>服务器域名在这里插入图片描述
这样就可以了

switchcity.wxml

<view class="searchLetter touchClass">
  <view class="thishotText" catchtap="hotCity">
    <view style="margin-top:0;">当前</view>
    <view style="margin-top:0;">热门</view>
  </view>
  <view wx:for="{{searchLetter}}" style="color:#2ab4ff;font-size:20rpx;" wx:key="index" data-letter="{{item.name}}" catchtouchend="clickLetter" >{{item.name}}</view>
</view>
<block wx:if="{{isShowLetter}}">
  <view class="showSlectedLetter">
    {{showLetter}}
  </view>
</block>
<scroll-view scroll-y="true" style="height:{{winHeight}}px" bindscroll="bindScroll" 
 scroll-into-view="{{scrollTopId}}" scroll-top="{{scrollTop}}">
  <view class="hotcity-common thisCity">当前选择城市</view>
  <view class="thisCityName">{{city}}</view>
  <view>
    <text class="hotcity hotcity-common">热门城市</text>
    <view class="weui-grids">
      <block wx:for-items="{{hotcityList}}" wx:key="{{index}}">
        <view class="weui-grid" data-cityCode="{{item.cityCode}}" data-city="{{item.city}}" catchtap="bindHotCity" >
          <view class="weui-grid__label">{{item.city}}</view>
        </view>
      </block>
    </view>
  </view>
  <view class="selection" wx:for="{{cityList}}" wx:key="{{item.initial}}">
    <view class="item_letter"  id="{{item.initial}}">{{item.initial}}</view>
    <view class="item_city"  wx:for="{{item.cityInfo}}" wx:for-item="ct" wx:key="{{ct.id}}" data-cityCode="{{ct.code}}" data-city="{{ct.city}}" catchtap="bindCity">
      {{ct.city}}
    </view>
  </view>
</scroll-view>

switchcity.wxss

/* pages/index/switchcity/switchcity.wxss */
.searchLetter {
  position: fixed;
  right: 0;
  width: 50rpx;
  text-align: center;
  justify-content: center;
  display: flex;
  flex-direction: column;
  color: #666;
  z-index: 1;
}
 
.searchLetter view {
  margin-top: 20rpx;
}
 
.touchClass {
  background-color: #fff;
  color: #fff;
  padding-top: 46rpx;
}
 
.showSlectedLetter {
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 50%;
  left: 50%;
  margin: -100rpx;
  width: 200rpx;
  height: 200rpx;
  border-radius: 20rpx;
  font-size: 52rpx;
  z-index: 1;
}
 
.selection {
  display: flex;
  width: 100%;
  flex-direction: column;
  margin-top: 10rpx;
}
 
.item_letter {
  display: flex;
  background-color: #f5f5f5;
  height: 40rpx;
  padding-left: 34rpx;
  align-items: center;
  font-size: 24rpx;
  color: #666;
}
 
.item_city {
  display: flex;
  background-color: #fff;
  height: 100rpx;
  padding-left: 34rpx;
  align-items: center;
  border-bottom: 1rpx solid #ededed;
  font-size: 24rpx;
  color: #666;
}
 
.hotcity-common {
  font-size: 24rpx;
  color: #666;
  padding: 0 0 0 30rpx;
}
 
.thisCity {
  padding-top: 30rpx;
}
 
.thisCityName {
  display: inline-block;
  border: 1rpx solid #2ab4ff;
  padding: 10rpx 20rpx;
  box-sizing: border-box;
  border-radius: 8rpx;
  font-size: 24rpx;
  color: #2ab4ff;
  text-align: center;
  min-width: 149.5rpx;
  margin: 20rpx 0 20rpx 30rpx;
}
 
.thishotText {
  color: #2ab4ff;
  font-size: 20rpx;
  margin: 0 !important;
}
 
.slectCity {
  border-color: #2ab4ff !important;
}
 
.slectCity view {
  color: #2ab4ff !important;
}
 
.weui-grid {
  position: relative;
  float: left;
  padding: 10rpx 0;
  width: 149.5rpx;
  box-sizing: border-box;
  border: 1rpx solid #ececec;
  border-radius: 8rpx;
  margin: 10rpx 12rpx;
}
 
.weui-grid__label {
  display: block;
  text-align: center;
  color: #333;
  font-size: 24rpx;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

switchcity.js

var city = require('../../../utils/city');
var app = getApp()
Page({
  data: {
    searchLetter: [],
    showLetter: "",
    winHeight: 0,
    // tHeight: 0,
    // bHeight: 0,
    cityList: [],
    isShowLetter: false,
    scrollTop: 0,//置顶高度
    scrollTopId: '',//置顶id
    city: "",
    hotcityList: [{ cityCode: 110000, city: '北京市' }, { cityCode: 310000, city: '上海市' }, { cityCode: 440100, city: '广州市' }, { cityCode: 440300, city: '深圳市' }, { cityCode: 330100, city: '杭州市' }, { cityCode: 320100, city: '南京市' }, { cityCode: 420100, city: '武汉市' }, { cityCode: 410100, city: '郑州市' }, { cityCode: 120000, city: '天津市' }, { cityCode: 610100, city: '西安市' }, { cityCode: 510100, city: '成都市' }, { cityCode: 500000, city: '重庆市' }]
  },
  onLoad: function () {
      /*获取本地存储当前城市 */
      wx.getStorage({
        key:"city",
        success:res=>{
          console.log(res.data)
          this.setData({
            city:res.data
          })
        }
      })

    // 生命周期函数--监听页面加载
    var searchLetter = city.searchLetter;
    var cityList = city.cityList();
    var sysInfo = wx.getSystemInfoSync();
    var winHeight = sysInfo.windowHeight;
    var itemH = winHeight / searchLetter.length;
    var tempObj = [];
    for (var i = 0; i < searchLetter.length; i++) {
      var temp = {};
      temp.name = searchLetter[i];
      temp.tHeight = i * itemH;
      temp.bHeight = (i + 1) * itemH;
      tempObj.push(temp)
    }
    this.setData({
      winHeight: winHeight,
      itemH: itemH,
      searchLetter: tempObj,
      cityList: cityList
    })
 
  },
  onReady: function () {
    // 生命周期函数--监听页面初次渲染完成
 
  },
  onShow: function () {
    // 生命周期函数--监听页面显示
 
  },
  onHide: function () {
    // 生命周期函数--监听页面隐藏
 
  },
  onUnload: function () {
    // 生命周期函数--监听页面卸载
 
  },
  onPullDownRefresh: function () {
    // 页面相关事件处理函数--监听用户下拉动作
 
  },
  onReachBottom: function () {
    // 页面上拉触底事件的处理函数
 
  },
  clickLetter: function (e) {
    console.log(e.currentTarget.dataset.letter)
    var showLetter = e.currentTarget.dataset.letter;
    this.setData({
      showLetter: showLetter,
      isShowLetter: true,
      scrollTopId: showLetter,
    })
    var that = this;
    setTimeout(function () {
      that.setData({
        isShowLetter: false
      })
    }, 1000)
  },
  //选择城市
  bindCity: function (e) {
    console.log(e.currentTarget.dataset.city)
    this.setData({ 
      city: e.currentTarget.dataset.city 
    })
    wx.setStorage({
      key:"city",
      data:e.currentTarget.dataset.city
    })

    wx.switchTab({
      url: '../index',
    })
  },
  //选择热门城市
  bindHotCity: function (e) {
    console.log(e.currentTarget.dataset.city)
    this.setData({
      city: e.currentTarget.dataset.city
    })
    wx.setStorage({
      key:"city",
      data:e.currentTarget.dataset.city
    })

    wx.switchTab({
      url: '../index',
    })
  },
  //点击热门城市回到顶部
  hotCity: function () {
    this.setData({
      scrollTop: 0,
    })
  }
})

原文地址：https://blog.csdn.net/F_mengze/article/details/107202369