要写个城市选择器能返回对应的城市(这里只定义到了地级市),同时返回坐标系,参考了网上资料,下面就看看具体代码吧
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
下面是css代码。
@import '../../styles/mixin'; .taro_page { height: 100%; } .choicecity-page { @include wh(100%, 100%); box-sizing: border-box; .topv { height: 80px; top: 0; .topcity{ font-weight: 500; } } .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: 0; 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: 0;left: 0;bottom: 0;right: 0; z-index: 3; color: #333; box-shadow: 0 0 150rpx rgba(0,0,0,.35); } }
样式有些不好看,这样就写了一个类似滴滴首页点击地址进入到的城市选择界面。
有些地方写的不是很周到,大家多多指教。