在一些需求中，我们需要有一个全国城市的列表供我们选择，并且可以获得对应的经纬度坐标。
今天，我们就一起来实现这个需求。
好，我们先看一下我们期望的最终效果，如下图：
52魔都.png
我们看到左侧有个下拉选项，右侧是供搜索的输入关键字用到的输入框。
关于搜索的需求可以看这个教程使用高德地图微信小程序SDK开发案例-输入提示（附源码）
我们今天主要实现如下需求：
1.页面布局。
2.进入页面自动定位当前所在的城市。
3.获取全国城市列表，并且按照拼音的首字母排序。
4.点击后获取对应的经纬度。
5.点击字母跳转到同一类拼音首字母开始的列表。
知道的要做的事情，咱们就开始撸代码～
<view class='list-city'>
<scroll-view scroll-y="true" style="height:100%;" scroll-into-view="{{scrollTopId}}" scroll-with-animation="true" enable-back-to-top="true">
<view class='item'>
<view class='fullname'>当前定位城市：{{citySelected}}</view>
</view>
<!-- 热门城市 -->
<view class='item'>
<view class='py' id="hot">热门城市</view>
<view class="fullname hot-city" wx:for="{{hotCityData}}" wx:key="key" data-fullname="{{item.fullname}}" data-lat="{{item.location.lat}}" data-lng="{{item.location.lng}}" bindtap='selectCity'>{{item.fullname}}
</view>
</view>
<!-- 全部 -->
<view class='item' wx:for="{{cityData}}" wx:for-index="idx" wx:for-item="group" wx:key="key">
<view class='py' id="{{idx}}">{{idx}}</view>
<view class="fullname" wx:for="{{group}}" wx:key="key" data-fullname="{{item.fullname}}" data-lat="{{item.location.lat}}" data-lng="{{item.location.lng}}" bindtap='selectCity'>{{item.fullname}}
</view>
</view>
</scroll-view>
<!-- 首字母 -->
<view class='city-py' bindtouchstart="tStart" bindtouchend="tEnd" catchtouchmove="tMove">
<view wx:for="{{_py}}" wx:key="key" bindtouchstart="getPy" bindtouchend="setPy" id="{{item}}">{{item == 'hot' ? "★" : item}}
</view>
</view>
</view>
这是页面的主要结构，我们分为三大块，热门城市，全部城市，还是有首字母。
我们使用循环来展示城市名称，并且使用data-fullname="{{item.fullname}}" data-lat="{{item.location.lat}}" data-lng="{{item.location.lng}}" bindtap='selectCity'来记录对应城市的经纬度，同时绑定了点击事件来获取经纬度和城市名称。
至于页面右侧字母索引绑定的事件比较复杂，我们到后面详细来讲。
页面的骨架有了，接着可以写几行css来美化下页面。然后我们正式进入主要阶段。
我们通过高德地图微信小程序SDKhttps://lbs.amap.com/api/wx/guide/get-data/regeo提供的接口来直接获取详细地址信息。
onLoad: function() {
var that = this;
var myAmapFun = new amapFile.AMapWX({key:'高德Key'});
myAmapFun.getRegeo({
success: function(data){
//成功回调，获得当前所在城市名称
let city = data.regeocodeData.addressComponent.province;
},
fail: function(info){
//失败回调
console.log(info)
}
})
},
或者我们也可以使用腾讯地图微信小程序SDK https://lbs.qq.com/qqmap_wx_jssdk/method-reverseGeocoder.html 提供的接口来获取。因为我们接下来就要使用腾讯地图微信小程序SDK。
第二步我们实现了，接下来获取全国城市列表。
是的，https://lbs.qq.com/qqmap_wx_jssdk/method-getcitylist.html，在页面上我们很快发现了这个接口，我们直接调用。然而我直接将数据保存到了js文件。
https://raw.githubusercontent.com/749264345/wechat-miniapp-map/master/libs/city.js
我们根据数据直接赋值到页面上的参数，结果很顺利。
很快，我们到了第四步，我们为列表的事件添加函数。
//选择城市
selectCity: function (e) {
var dataset = e.currentTarget.dataset;
this.setData({
citySelected: dataset.fullname,
location: {
latitude: dataset.lat,
longitude: dataset.lng
}
});
}
我们获取到刚才我们设置的三个属性，并且保存他们，以备后续使用。
是的，很简单，我们现在差后一步。当我们点击C的时候，页面滚动到重庆市，点击W的时候页面滚动到武清区。。。。以此类推。
于是我们字母索引添加2个事件，bindtouchstart="getPy" bindtouchend="setPy"。
//获取点击的字母，在页面放大上展示
getPy: function (e) {
this.setData({
hidden: false,
showPy: e.target.id,
})
},
//将设置到字母，赋值到scrollTopId
setPy: function (e) {
this.setData({
hidden: true,
scrollTopId: this.data.showPy
})
},
不急，我们慢慢来，这里有几个问题。
1.赋值到scrollTopId是为什么？
<scroll-view scroll-y="true" scroll-into-view="{{scrollTopId}}" scroll-with-animation="true" enable-back-to-top="true">
我们看到我们使用了小程序的scroll-view组件，我们将scrollTopId这个值赋值给了scroll-into-view属性，scroll-with-animation="true" 并且滚动时有滑动效果。
52魔都.png
这个类似于网页中的锚点，给scroll-into-view赋一个值X以后，页面将滚动到子元素设置属性id='x'的地方。所以我们看到：
<view class='py' id="{{idx}}">{{idx}}</view>
我们为列表中的索引添加了属性id。
第二个问题，为什么绑定2个事件，而不是一个点击事件bindtap
这里关系到我们下一个需求，就是我们手指点击索引那一栏之后，不离开，通过上下滑动，可以快速预览城市列表，当手指离开之后，列表滚动到手指最后停留的那个字母位置。
而且，我们必须将滑动的交互事件绑定到字母索引的外层，就像我们看到的这样：
<view class='city-py' bindtouchstart="tStart" bindtouchend="tEnd" catchtouchmove="tMove">
<view wx:for="{{_py}}" wx:key="key" bindtouchstart="getPy" bindtouchend="setPy" id="{{item}}">
{{item == 'hot' ? "★" : item}}
</view>
</view>
当我们将getPy有setPy合并到一个事件中时，我们将无法看到索引字母在页面中间的效果，当我们手指触摸到的时候显示，离开的时候消失，这里是2个事件。
52魔都.png
就像这样，中间字母的预览效果。
如果我们将这2个事件合并到父元素上时，我们将很难获取到准确的字母索引值，也就是id。
我们在父元素上添加了三个事件，
//滑动时
tMove: function (e) {
var y = e.touches[0].clientY,
offsettop = e.currentTarget.offsetTop,
that = this;
//判断选择区域,只有在选择区才会生效
if (y > offsettop) {
var num = parseInt((y - offsettop) / 12);
this.setData({
showPy: that.data._py[num]
})
};
},
//触发全部开始选择
tStart: function () {
this.setData({
hidden: false
})
},
//触发结束选择
tEnd: function () {
this.setData({
hidden: true,
scrollTopId: this.data.showPy
})
},
当我们在索引那一栏上下滑动手指的同时，计算出当前手指可能触碰到的字母，并且当且仅当手指在元素范围内的时候触发。
可能你觉这些代码有部分冗余，是否可以将tStart与tEnd舍去？答案是可以的，功能不受影响，但是当你在上下滑动的过程中，可以明显感到中间索引的提示有明显的卡顿，这不是我们想要的。
代码写到这里，基本上已经差不多了。
如有更好的实现方式希望在评论区能够分享。
详细案例请搜索微信小程序：52魔都
源码地址：https://github.com/749264345/wechat-weapp-map
网友评论