在github下载地图json文件,这里我把json改成js
var china = [{
"name": "北京市"
.....
}]
module.exports = china
同一个文件夹下面的
首先是wxml
<!-- 蒙版 -->
<view class="region-bg" class="{{regionShow === true ? '' : 'region-none'}}">
<!-- 装省市区的盒子 -->
<view class="region">
<!-- 省遍历 -->
<view class="region-common province">
<text class="{{provinceIndex == index ? 'pro-h' : '' }}" wx:for="{{proData}}" wx:key="{{index}}" bindtap="mapTap" data-num="{{index}}" data-name="{{item.name}}" data-type="province">{{item.name}}</text>
</view>
<!-- 市遍历 -->
<view class="region-common city">
<text class="{{cityIndex == index ? 'city-h' : '' }}" wx:for="{{cityData}}" bindtap="mapTap" data-num="{{index}}" data-name="{{item.name}}" data-type="city">{{item.name}}</text>
</view>
<!-- 地区遍历 -->
<view class="region-common area">
<text wx:for="{{areaData}}" bindtap="mapTap" data-num="{{index}}" data-name="{{item}}" data-type="area">{{item}}</text>
</view>
</view>
</view>
wxss文件
.region-bg {
position: absolute;
width: 100%;
height: 95%;
background: rgba(0, 0, 0, 0.1);
}
.region-none {
display: none;
}
.region {
width: 100%;
height: 400px;
overflow-y: auto;
position: absolute;
}
.region-common {
height: 100%;
position: absolute;
overflow-y: auto;
}
.province {
width: 33%;
background: #aaa;
left: 0;
}
.city {
width: 33%;
background: #bbb;
left: 33%;
}
.area {
width: 34%;
background: #ccc;
left: 66%;
}
.province text ,.city text ,.area text {
display: block;
width: 100%;
text-align: center;
}
.pro-h,.city-h {
background-color: greenyellow;
}
js文件
// pages/test/test.js
// 引入地图
var china = require("./data.js")
Page({
/**
* 页面的初始数据
*/
data: {
regionShow: true,
proData: china,
provinceIndex: 0,
cityIndex: 0,
areaData: [],
cityData: []
},
mapTap (e) {
var type = e.currentTarget.dataset.type
var name = e.currentTarget.dataset.name
var idx = e.currentTarget.dataset.num
console.log(type,name,idx)
console.log(china[idx].city[0].area)
if (type === 'province') {
this.setData({
cityData: china[idx].city,
areaData: china[idx].city[0].area,
provinceIndex: idx
})
} else if (type === 'city') {
var proIdx = this.data.provinceIndex
this.setData({
areaData: china[proIdx].city[idx].area,
cityIndex: idx
})
} else {
this.setData({
regionShow: false
})
console.log('name',name)
}
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.setData({
cityData: china[0].city,
areaData: china[0].city[0].area
})
console.log(china)
}
})