本文已参与「新人创作礼」活动，一起开启掘金创作之路。

实现轮播图展示

/*
	1. 查看Carousel组件使用文档
*/

import React from "react";
import { Carousel } from 'antd-mobile';

import axios from "axios";

export default class Index extends React.Component{
    state = {
        swipers: [],
    }
    // 获取轮播图数据
    async getSwipers(){
        const res = await axios.get('http://localhost:8080/home/swiper')

        this.setState({
            swipers: res.data.body
        })
    }
    componentDidMount() {
        this.getSwipers()
    }
    renderSwipers(){
        return (
            this.state.swipers.map(val => (
                <a
                    key={val.id}
                    href="http://www.baidu.com"
                    style={{ display: 'inline-block', width: '100%', height: 212 }}
                >
                    <img
                        src={`http://localhost:8080${val.imgSrc}`}
                        alt={val.alt}
                        style={{ width: '100%', verticalAlign: 'top' }}
                    />
                </a>
            ))
        )
    }
    render(){
        return (
            <div>
                <Carousel
                    autoplay
                    infinite
                >
                    {this.renderSwipers()}
                </Carousel>
            </div>
        )
    }
}

导航菜单
```
/*
	1. 使用Flex布局组件
*/
```
在脚手架使用sass
- 安装Sass：npm i node-sass
- 创建后缀为.sass或.scss的样式文件
- 在组件中导入Sass样式文件
实现租房小组模块
- 需要根据当前地理位置显示不同小组信息
顶部导航

H5中的地理位置API

根据当前地理位置，获取当前所在城市的房源信息

地理位置API通过navigator.geolocation对象提供，通过getCurrentPosition方法获取

navigator.geolocation.getCurrentPosition(position=>{
    // position对象表示当前位置
    // 常用： latitude纬度 / longitude 经度
    // accuracy 经纬度的精度/ altitude 海拔高度 / altitudeAccuracy 海拔高度的精度 / heading 设备行进方向 / speed 速度
})

4.百度地图API

介绍
- H5的地理位置API只能获取经纬度信息
- 实际开发中，会使用百度地图/高德地图来完成地理位置的相关功能
- 百度地图文档（JavaScript API）
使用入门
- 申请百度账号和ak（使用秘钥）
使用步骤
- 引入百度地图API的JS文件，替换申请的秘钥
```
<script src="http://api.map.baidu.com/api?v=3.0&ak=ak_str"></script>
```
- 在index.css 中设置全局样式
```
html, body, #root, .app{
	height: 100%
}
body{
    margin: 0px;
    padding: 0px;
}
```
- 创建Map组件，配置路由。并在Map组件中，创建地图容器元素，并设置样式

获取顶部导航城市信息

打开百度地图JS API定位文档

通过IP定位获取当前城市名称

const myCity = new BMapGL.LocalCity()
myCity.get((res)=>{
    const cityName = res.name
    console.log('当前定位城市名称为：', cityName)
})

5.城市选择模块

功能分析
- 切换城市，并且看到该城市下的房源信息
- 功能：1.顶部导航栏 2.城市列表展示 3.使用索引快速切换城市 4.点击城市切换城市名称
- 第三方组件：react-virtualized 长列表
顶部导航栏

React 学习 第八天

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

4.百度地图API

5.城市选择模块

React 学习第八天