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

Posted 2021-02-14 all1008

要写个城市选择器能返回对应的城市（这里只定义到了地级市），同时返回坐标系，参考了网上资料，下面就看看具体代码吧

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);
  }
}

样式有些不好看，这样就写了一个类似滴滴首页点击地址进入到的城市选择界面。

有些地方写的不是很周到，大家多多指教。