taro时间选择_Taro开发之城市选择器（带坐标）

import Taro, { Component } from ‘@tarojs/taro‘;

import { View, ScrollView } from‘@tarojs/components‘;

import { connect } from‘@tarojs/redux‘;

import amapFile from‘../../sdks/amap-wx‘　　//高德地图sdkimport 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= thisTaro.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

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.datasetthis.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.statereturn(

定位城市：{citySelected}

热门城市

{

hotCityData.map((item, index)=>(

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}

))

}

{

cityData.map((item, index)=>{return(

{index}

{

item.map((itemx, indexx)=>(

className="fullname"key={indexx}

data-fullname={itemx.fullname}

data-lat={itemx.location.lat}

data-lng={itemx.location.lng}

onClick={this.selectCity}>{itemx.fullname}

))

}

)

}

)

}

{

py.map((item, index)=>({item == ‘hot‘ ? "★" : item}

))

}

{showPy== ‘hot‘ ? "★": showPy}

)

}

}

exportdefault Choicecity