react 使用高德地图ip定位获取所在城市

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_34036636/article/details/79266693
import React from 'react';
import { Icon, Button, Row, Col } from 'antd';
import styles from './style.less';

const ColProps = {
  xs: 6,
  sm: 6,
}

export default class citys extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      city:''
    }
  }
  componentDidMount () {
    // 获取地理位置
    fetch("http://restapi.amap.com/v3/ip?key=高德地图key").then((res)=>{
      if(res.ok){
        res.text().then((data)=>{
          const detail=JSON.parse(data)
          this.setState({
            city:detail.city,
            adcode:detail.adcode
          })
        })
      }
    }).catch((res)=>{
      console.log(res.status);
    });
  }

  render () {
    return (
      <div className={styles.citys}>
        <div className={styles.content}>
          <div className={styles.nav}>
            <a href="/#/activitys"  className={styles.back}><Icon type="left" /></a>
            <p className={styles.title}>切换城市</p>
          </div>
          <div className={styles.city}>
            <p className={styles.title}>定位城市</p>
            <Row gutter={24}>
              <Col {...ColProps} xl={{ span: 4 }} md={{ span: 6 }}>
                <a href={"/#/activitys/"+this.state.adcode}><Button>{this.state.city}</Button></a>
              </Col>
            </Row>
          </div>
        </div>
      </div>
    );
  }
}
展开阅读全文

没有更多推荐了,返回首页