久久性生大片免费观看性,最新大黄网站免费,中文字幕亚洲激情

準(zhǔn)備工作

1. 注冊(cè)一個(gè)高德地圖`API`賬號(hào)，選擇開(kāi)發(fā)支，持地圖 JS API。

2. 登錄控制臺(tái)成為開(kāi)發(fā)者并創(chuàng)建KEY。

3. 進(jìn)入安全密鑰使用說(shuō)明，找到方式二。

4. 創(chuàng)建一個(gè)vue項(xiàng)目

將vue的一些默認(rèn)組件和樣式刪除，在views下新建一個(gè)Index.vue，并且在index.js下配置路由。目錄結(jié)構(gòu)如下所示：

5. 通過(guò)npm install echarts –save安裝一個(gè)依賴，這樣就可以使用echarts了

開(kāi)始（細(xì)分11步）

將準(zhǔn)備工作第三步找到的方式二的兩個(gè)<script>引入到index.html中，將你自己申請(qǐng)的key值和安全密鑰粘貼到里面去。這樣就可以使用高德地圖 JS API?開(kāi)發(fā)地圖應(yīng)用。
設(shè)置頭部樣式和背景色，時(shí)間和切換城市用到了彈性布局。

 //html

  <div class="container">

        <div class="nav">

            <div class="time">7:41</div>

            <div class="city">切換城市</div>

        </div>

  <div>

//css

  .container {

    min-height: 100vh;

    background: #000;

    opacity: 0.7;

    color: #fff;

}



.nav {

    display: flex;

    justify-content: space-between;

    padding: 10px;

}

3. 設(shè)置我們需要的天氣數(shù)據(jù)展示的`html+css`結(jié)構(gòu)，這主要考查的是切頁(yè)面能力。

//html

 <div class="city-info">

            <p class="city">{{}}</p>

            <p class="weather">{{}}</p>

            <h2 class="temp">

                <em></em>℃

            </h2>

            <div class="detail">

                <span>風(fēng)力：{{

                }}</span>|

                <span>風(fēng)向：{{ }}</span>|

                <span>空氣濕度：{{  }}</span>

            </div>

        </div>

        <div class="future">

            <div class="group" v-if="futureData.length > 0">

                明天：

                <span class="tm">白天:{{ }}℃ {{ 

                }} {{  }}風(fēng) {{ }} </span>

                <span class="tm"> 夜間:{{

                }}℃ {{  }} {{  }}風(fēng) {{ 

}}

                </span>

            </div>

            <div class="group" v-if="futureData.length > 0">

                后天：

                <span class="tm">白天:{{ }}℃ {{ 

                }} {{  }}風(fēng) {{  }} </span>

                <span class="tm"> 夜間:{{ 

                }}℃ {{  }} {{  }}風(fēng) {{ 

}}

                </span>

            </div>

        </div>

//css

.city-info {

    text-align: center;



    .temp {

        font-size: 26px;



        em {

            font-size: 34px;

            font-style: normal;

        }

    }

}



.future {

    padding: 0 10px;

    margin-top: 30px;



    .group {

        height: 44px;

        line-height: 44px;

        background: rgba(255, 255, 255, 0.3);

        margin-bottom: 10px;

        padding: 0 10px;

        font-size: 13px;

        border-radius: 5px;



    }

}

4. 再放一個(gè)div 用于存放折線圖。

//html

<div class="echart-container"> </div>

//css

.echart-container {

    width: 100%;

    height: 50vh;

}

5. 用watchEffect或onMounted來(lái)獲取天氣數(shù)據(jù)。
6. 獲得定位

想要獲取天氣情況我們先要獲得定位，這是需要用到高德地圖API,我們來(lái)到這個(gè)位置：開(kāi)發(fā)?>?地圖 JS API v2.0?>?教程?>?服務(wù)?>?定位，找到IP定位獲取當(dāng)前城市信息。

將這段代碼復(fù)制到onMounted的回調(diào)函數(shù)中，這樣我們就能獲取到定位信息。

7. 獲取天氣

接下來(lái)就可以來(lái)獲取天氣了，我們把獲取天氣封裝成一個(gè)函數(shù)getWeather。同樣的我們來(lái)到：開(kāi)發(fā) > 地圖 JS API v2.0 > 教程 > 服務(wù) > 天氣，找到實(shí)時(shí)天氣查詢。

把上圖中的代碼復(fù)制到獲取天氣的函數(shù)中，并將它放在獲取定位成功后執(zhí)行，傳入定位的城市，這樣就可以獲得定位的城市的天氣情況了。

8. 同樣的，我們來(lái)獲取未來(lái)幾天的天氣情況，通過(guò)下面的代碼就可以獲取到。

weather.getForecast('cityName', function(err, data) {

console.log(err, data); });

注意：此時(shí)輸出的未來(lái)天氣是一個(gè)數(shù)組。

9. 存儲(chǔ)天氣數(shù)據(jù)

我們已經(jīng)獲取到了天氣數(shù)據(jù)了，接下來(lái)就要把這些數(shù)據(jù)存起來(lái)，把它變成響應(yīng)式的，然后把它放到頁(yè)面上展示出來(lái)。

 const state = reactive({

            today: {},

            futureData: [],

        })



  state.today = data

  state.futureData = data.forecasts

   return {

            ...toRefs(state),

        }

把數(shù)據(jù)放到頁(yè)面上我理解的是挖坑然后埋數(shù)據(jù)，就像下面這樣：

 <p class="city">{{ today.city }}</p>

 <p class="weather">{{ today.weather }}</p>

注意：由于futureData是一個(gè)數(shù)組，我們要在它放數(shù)據(jù)的div上加一個(gè)v-if="futureData.length > 0"，要不然會(huì)報(bào)錯(cuò)。

<div class="group" v-if="futureData.length > 0">

                明天：

<span class="tm">白天:{{ futureData[1].dayTemp }}℃ {{ futureData[1].dayWeather}} {{ futureData[1].dayWindDir }}風(fēng) {{ futureData[1].dayWindPower }} </span>

<span class="tm"> 夜間:{{ futureData[1].nightTemp }}℃ {{ futureData[1].nightWeather }} {{ futureData[1].nightWindDir }}風(fēng) {{ futureData[1].nightWindPower

}}

                </span>

            </div>

10. 做一個(gè)折線圖

接下來(lái)我們就來(lái)做一個(gè)折線圖了，打開(kāi)ECharts官網(wǎng)，選一個(gè)折線圖Examples – Apache ECharts

定義一個(gè)方法initEchart來(lái)完成圖的繪制（這里定義了一個(gè)空數(shù)組來(lái)獲取未來(lái)幾天的溫度）

 const tempArr = ref([])

   data.forecasts.forEach(item => {

                        tempArr.value.push(item.dayTemp)

                    })

  const echartContainer = ref(null)

  const initEchart = () => {

            const myChat = echarts.init(echartContainer.value);

            let option = {

                xAxis: {

                    type: 'category',

                    data: ['今天', '明天', '后天', '大后天'],

                    lineStyle: {

                        color: '#fff'

                    },

                    axisTick: {

                        show: false

                    },



                },

                yAxis: {

                    type: 'value',

                    show: false



                },

                series: [

                    {

                        data: tempArr.value,

                        type: 'line'

                    }

                ]

            };

            myChat.setOption(option)

        }

   return {

            echartContainer

        }

別忘了在裝這幅圖的div上掛一個(gè)ref="echartContainer"喲。

這樣就能幫我們初始化一個(gè)折線圖了。

最后直接在獲取未來(lái)天氣中調(diào)用initEchart就可以了。
部分代碼

<script>

import { toRefs, watchEffect, reactive, ref, onMounted } from 'vue';

import * as echarts from 'echarts';



export default {

    setup() {

        const echartContainer = ref(null)

        const state = reactive({

            today: {},

            futureData: [],

        })

        const tempArr = ref([])



        onMounted(() => {

            //1.獲取定位

            AMap.plugin('AMap.CitySearch', function () {

                var citySearch = new AMap.CitySearch()

                citySearch.getLocalCity(function (status, result) {

                    // console.log(status);

                    if (status === 'complete' && result.info === 'OK') {

                        // 查詢成功，result即為當(dāng)前所在城市信息

                        //console.log(result.city);

                        getWeather(result.city)

                    }

                })

            })

        })

        const getWeather = (cityName) => {

            //加載天氣查詢插件

            AMap.plugin('AMap.Weather', function () {

                //創(chuàng)建天氣查詢實(shí)例

                var weather = new AMap.Weather();



                //執(zhí)行實(shí)時(shí)天氣信息查詢

                weather.getLive(cityName, function (err, data) {

                    console.log(err, data);

                    state.today = data

                });

                //未來(lái)的天氣

                weather.getForecast(cityName, function (err, data) {

                    console.log(err, data);

                    state.futureData = data.forecasts



                    data.forecasts.forEach(item => {

                        tempArr.value.push(item.dayTemp)

                    })

                    initEchart()

                });



            });

        }



        const initEchart = () => {

            const myChat = echarts.init(echartContainer.value);

            let option = {

                xAxis: {

                    type: 'category',

                    data: ['今天', '明天', '后天', '大后天'],

                    lineStyle: {

                        color: '#fff'

                    },

                    axisTick: {

                        show: false

                    },



                },

                yAxis: {

                    type: 'value',

                    show: false



                },

                series: [

                    {

                        data: tempArr.value,

                        type: 'line'

                    }

                ]

            };

            myChat.setOption(option)

        }

        return {

            ...toRefs(state),

            echartContainer

        }

    }

}

</script>