博客

和风天气插件的运用

地址：

https://widget.qweather.com/create-standard/

<div id="he-plugin-standard"></div>

const changeOrider = window.outerWidth / 750 * 686
window.WIDGET = {
    CONFIG: {
        layout: '1',
        width: changeOrider,
        height: '150',
        background: '1',
        dataColor: 'FFFFFF',
        borderRadius: '5',
        // 生成代码后的key
        key: '288b5690c60a4524b43cbde090fcba53'
    }
}
const script = document.createElement('script')
script.setAttribute('src', 'https://widget.qweather.net/standard/static/js/he-standard-common.js?v=2.0')
document.body.append(script)

效果：

运用高德地图自动获取当前省市位置

<script src="https://webapi.amap.com/maps?v=2.0&key=申请的key&plugin=AMap.Transfer"></script>

window.onload = function (){
	// 模糊定位
    AMap.plugin('AMap.CitySearch', function () {
        var citySearch = new AMap.CitySearch()
        citySearch.getLocalCity(function (status, result) {
            if (status === 'complete' && result.info === 'OK') {
                // 查询成功，result即为当前所在城市信息
                console.log(result)
            }
        })
    })
    // 精准定位  注意，部分浏览器会获取不到位置，如谷歌。经测试，用Edge是可以获取到的
    AMap.plugin('AMap.Geolocation', function() {
           var geolocation = new AMap.Geolocation({
                // 是否使用高精度定位，默认：true
                enableHighAccuracy: true,
            })
            geolocation.getCurrentPosition()
            AMap.event.addListener(geolocation, 'complete', onComplete)
            AMap.event.addListener(geolocation, 'error', onError)
            function onComplete (data) {
                // data是具体的定位信息
                console.log('data', data);//这里就是获取到的位置了
            }
            function onError (err) {
                // 定位出错
                console.log('err', err);//这里就是获取到的位置了
            }
        })
    })
}

获取后的效果图如下：