Taro开发之城市选择器（带坐标）

import Taro, { Component } from '@tarojs/taro';
import { View, ScrollView } from '@tarojs/components';
import { connect } from '@tarojs/redux';
import amapFile from '../../sdks/amap-wx'//高德地图sdk
import cityData from '../../utils/city' //利用腾讯地图获取城市列表得到
import './index.scss';let myAmapFun@connect(({ choicecity }) => ({
...choicecity,
}))
class Choicecity extends Component {
config = {
navigationBarTitleText: 'choicecity',
}; constructor(props) {
super(props)
this.state = {
citySelected: '',
scrollTopId: '',
hotCityData: [],
cityData: [],
py: ["hot", "A", "B", "C", "D", "E", "F", "G", "H", "J", "K", "L", "M", "N", "P", "Q", "R", "S", "T", "W", "X", "Y", "Z"],
hotCity: ["北京市", "上海市", "广州市", "深圳市", "杭州市", "苏州市", "成都市"],
hidden: true,
latitude: '',
longitude: '',
showPy: '★',
}
}; componentWillMount = () => {
myAmapFun = new amapFile.AMapWX({ key: '632e03727b4b9ab6b01f09e48676bdc2' })
} componentDidMount = () => {
let that = this Taro.showNavigationBarLoading()
myAmapFun.getRegeo({
success: function (data) {
console.log(data)
let dataq = data[0]
let city = dataq.regeocodeData.addressComponent.city
that.setState({
citySelected: city,
})
let cityArr = cityData.result[0].concat(cityData.result[1])
city = {}
let _hotCity = []
that.state.py.forEach((key) => {
cityArr.forEach((val) => {
let _py = val.pinyin[0][0].toUpperCase()
if (_py === key) {
if (city[_py] === undefined) {
city[_py] = []
}
city[_py].push(val)
}
if (that.state.hotCity.indexOf(val.fullname) >= 0) {
if (_hotCity.length < that.state.hotCity.length) {
console.log(val.fullname)
_hotCity.push(val)
}
}
})
})
console.log(_hotCity)
console.log(that.state.hotCity)
that.setState({
cityData: city,
hotCityData: _hotCity
})
Taro.hideNavigationBarLoading()
}
})
}; selectCity = (e) => {
let dataset = e.currentTarget.dataset
this.setState({
citySelected: dataset.fullname,
latitude: dataset.lat,
longitude: dataset.lng
}, () => {
Taro.setStorageSync('cityname', this.state.citySelected)
this.props.dispatch({
type: 'choicecity/save',
payload: { cityname: this.state.citySelected }
})
})
} getPy = (e) => {
// console.log('1')
this.setState({
hidden: false,
showPy: e.target.id
})
} setPy = () => {
// console.log('2')
this.setState({
hidden: true,
scrollTopId: this.state.showPy
})
} tStart = () => {
// console.log('3')
this.setState({
hidden: false
})
} tEnd = () => {
// console.log('4')
this.setState({
hidden: true,
scrollTopId: this.state.showPy
}, () => { console.log(this.state.scrollTopId) })
} render() {
const hot = 'hot'
const { scrollTopId, hotCityData, citySelected, py, hidden, showPy } = this.state
return (
<View className="choicecity-page">
<View className="topv">
<View className="topcity">定位城市：{citySelected}</View>
</View>
<View className="list-city">
<ScrollView scrollY='true' className="scorllcity" scrollIntoView={scrollTopId} scrollWithAnimation='true' enableBackToTop='true'>
<View className="item">
<View className="py" id={hot}>热门城市</View>
{
hotCityData.map((item, index) => (
<View
className="fullname hot-city"
key={index}
data-fullname={item.fullname}
data-lat={item.location.lat}
data-lng={item.location.lng}
onClick={this.selectCity}
>
{item.fullname}
</View>
))
} </View>
<View>
{
cityData.map((item, index) => {
return (
<View key={index}>
<View className="py" key={index} id={index}>{index}</View> {
item.map((itemx, indexx) => (
<View
className="fullname"
key={indexx}
data-fullname={itemx.fullname}
data-lat={itemx.location.lat}
data-lng={itemx.location.lng}
onClick={this.selectCity}
>
{itemx.fullname}
</View>
))
}
</View>
)
}
)
}
</View>
</ScrollView>
<View className="city-py" onTouchStart={this.tStart} onTouchEnd={this.tEnd}>
{
py.map((item, index) => (
<View key={index} onTouchStart={this.getPy} onTouchEnd={this.setPy} id={item}>{item == 'hot' ? "★" : item}</View>
))
}
</View>
</View>
<View className="showPy" hidden={hidden}>
{showPy == 'hot' ? "★" : showPy}
</View>
</View>
)
}
}export default Choicecity

@import '../../styles/mixin';.taro_page {
height: 100%;
}.choicecity-page {
@include wh(100%, 100%);
box-sizing: border-box;
.topv {
height: 80px;
top:;
.topcity{
font-weight:;
}
}
.list-city {
width: 100%;
height: 100%;
overflow-y: auto;
background: #fff;
.scorllcity {
height: 100%;
.fullname {
box-sizing: border-box;
font-size: 30px;
color: #555;
padding:13px;
border-bottom: 1px solid #eee;
}
.py{
box-sizing: border-box;
background: #eee;
font-size: 28px;
color: #aaa;
padding:8px 13px;
}
.hot-city {
border: 1px solid #eee;
display: inline-block;
margin: 26px 0 0 26px;
padding: 20px 26px;
font-size: 30px;
}
}
.city-py {
position: fixed;
top: 28%;
right:;
margin-top: -180px;
}
}
.showPy {
width: 75px;
height: 75px;
background: #fff;
border-radius: 8px;
line-height: 75px;
text-align: center;
font-size: 40px;
margin: auto;
position: absolute;
top:;left:;bottom:;right:;
z-index:;
color: #333;
box-shadow: 0 0 150rpx rgba(0,0,0,.35);
}
}