Html5获取高德地图定位天气的方法


Posted in HTML / CSS onDecember 26, 2019

注:使用的是的模块注入方式,适用各种前端单页面应用及H5

创建一个AMap.js文件

// AMap.js

// 高德map   https://webapi.amap.com/maps?v=1.4.11&key=你的高德地图的key
export default function MapLoader () {
return new Promise((resolve, reject) => {
if (window.AMap) {
  resolve(window.AMap)
} else {
  var script = document.createElement('script')
  script.type = 'text/javascript'
  script.async = true
  //这里引入的是全部模块,或者按需要模块引入,加参数plugin=“模块名”
  script.src =
    'http://webapi.amap.com/maps?v=1.4.11&callback=initAMap&key=6747cb97****************7e774b4b62' //你的高德应用AK (申请参考官方文档)
  script.onerror = reject
  document.head.appendChild(script)''
}
window.initAMap = () => {
  resolve(window.AMap)
}
})
}

使用

vue 示例

import MapLoader from '@/common/SDK/AMap.js'

MapLoader().then(AMap => {
                //加载定位插件
                AMap.plugin(['AMap.Geolocation', 'AMap.Weather'], function() {
                    var geolocation = new AMap.Geolocation({
                        // 是否使用高精度定位,默认:true
                        enableHighAccuracy: true,
                        // 设置定位超时时间,默认:无穷大
                        timeout: 10000,
                        // 定位按钮的停靠位置的偏移量,默认:Pixel(10, 20)
                        buttonOffset: new AMap.Pixel(10, 20),
                        //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见,默认:false
                        zoomToAccuracy: true,
                        //  定位按钮的排放位置,  RB表示右下
                        buttonPosition: 'RB'
                    })
            
                    geolocation.getCurrentPosition()
                    AMap.event.addListener(geolocation, 'complete', onComplete)
                    AMap.event.addListener(geolocation, 'error', onError)
                    var weather = new AMap.Weather();
            
                    function onComplete(data) {
                        // data是具体的定位信息
                        that.$store.dispatch('UPDATE_ADDRESS', data.formattedAddress)
                        // weather.getForecast(data.addressComponent.adcode, function(err, data) {
                        //     console.log(err, data);
                        // });
                        weather.getLive(data.addressComponent.adcode, function(err, data) {
                            // console.log(err, data);
                            let obj = {
                                adcode: "330100", //区域编码
                                city: "杭州市", //城市
                                humidity: "92", //空气湿度(百分比)
                                info: "OK", //状态
                                province: "浙江", //省份
                                reportTime: "2019-12-24 19:55:48",
                                temperature: 10, //实时气温,单位:摄氏度
                                weather: "阴", //天气预报
                                windDirection: "东", // 风向,风向编码对应描述
                                windPower: "≤3", //风力,风力编码对应风力级别,单位:级
                            }
                            let weatherObj = {
                                date: `${that.$moment().format('MM月DD日')}`,
                                week: `${that.$moment().format('d')}`,
                                temperature: data.temperature,
                                currentCity: data.city,
                                weatherDesc: data.weather
                            }
                            that.$store.dispatch("UPDATE_Weather", weatherObj)
                        });
            
                    }
            
                    function onError(data) {
                        // 定位出错
                        if (data.info == 'NOT_SUPPORTED') {
                            uni.showModal({
                                title: '提示',
                                content: '当前浏览器不支持定位功能' || '定位失败'
                            })
                        } else if (data.info == 'FAILED') {
                            uni.showModal({
                                title: '提示',
                                content: data.message || '定位失败'
                            })
                        }
            
                    }
                })
            }, e => {
                console.log('地图加载失败', e)
            })
        }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
移动端rem布局的两种实现方法
Jan 03 HTML / CSS
CSS3 Flexbox中flex-shrink属性的用法示例介绍
Dec 30 HTML / CSS
CSS3动画animation实现云彩向左滚动
May 09 HTML / CSS
使用CSS3的::selection改变选中文本颜色的方法
Sep 29 HTML / CSS
详解Html5微信支付爬坑之路
Jul 24 HTML / CSS
HTML5通过调用canvas对象的getContext()方法来获取绘图环境
Jun 23 HTML / CSS
让IE下支持Html5的placeholder属性的插件
Sep 02 HTML / CSS
逼真的HTML5树叶飘落动画
Mar 01 HTML / CSS
HTML5 Canvas的常用线条属性值总结
Mar 17 HTML / CSS
详解canvas绘制多张图的排列顺序问题
Jan 21 HTML / CSS
H5最强接口之canvas实现动态图形功能
May 31 HTML / CSS
使用CSS3实现按钮悬停闪烁动态特效代码
Aug 30 HTML / CSS
鼠标滚轮事件和Mac触控板双指事件
Dec 23 #HTML / CSS
HTML5 Canvas 实现K线图的示例代码
Dec 23 #HTML / CSS
html5利用canvas实现颜色容差抠图功能
Dec 23 #HTML / CSS
HTML5 客户端数据库简易使用:IndexedDB
Dec 19 #HTML / CSS
吃透移动端 Html5 响应式布局
Dec 16 #HTML / CSS
HTML文本属性&颜色控制属性的实现
Dec 17 #HTML / CSS
吃透移动端 1px的具体用法
Dec 16 #HTML / CSS
You might like
php 正确解码javascript中通过escape编码后的字符
2010/01/28 PHP
php in_array() 检查数组中是否存在某个值详解
2016/11/23 PHP
php实现微信公众平台发红包功能
2018/06/14 PHP
一些常用且实用的原生JavaScript函数
2010/09/08 Javascript
cnblogs 代码高亮显示后的代码复制问题解决实现代码
2011/12/14 Javascript
JQuery+CSS提示框实现思路及代码(纯手工打造)
2013/05/07 Javascript
jquery中的on方法使用介绍
2013/12/29 Javascript
js实现左侧网页tab滑动门效果代码
2015/09/06 Javascript
Jquery全屏相册插件zoomvisualizer具有调节放大与缩小功能
2015/11/02 Javascript
百度地图去掉marker覆盖物或者去掉maker的label文字方法
2018/01/26 Javascript
JavaScript实现区块链
2018/03/14 Javascript
支付宝小程序自定义弹窗dialog插件的实现代码
2018/11/30 Javascript
ES6 class的应用实例分析
2019/06/27 Javascript
layui下拉框获取下拉值(select)的例子
2019/09/10 Javascript
浅谈vuex为什么不建议在action中修改state
2020/02/02 Javascript
jquery实现垂直手风琴菜单
2020/03/04 jQuery
js抽奖转盘实现方法分析
2020/05/16 Javascript
Element Rate 评分的使用方法
2020/07/27 Javascript
[57:36]DOTA2-DPC中国联赛 正赛 SAG vs CDEC BO3 第三场 2月1日
2021/03/11 DOTA
python之模拟鼠标键盘动作具体实现
2013/12/30 Python
python实现kMeans算法
2017/12/21 Python
python 读入多行数据的实例
2018/04/19 Python
Python sorted函数详解(高级篇)
2018/09/18 Python
浅谈django三种缓存模式的使用及注意点
2018/09/30 Python
python与字符编码问题
2019/05/24 Python
Python3内置模块之base64编解码方法详解
2019/07/13 Python
使用python绘制二维图形示例
2019/11/22 Python
CSS3 border-image详解、应用及jQuery插件
2011/08/29 HTML / CSS
美国价格实惠的在线眼镜网站:Zeelool
2020/12/25 全球购物
教师党员思想汇报
2014/01/06 职场文书
婚庆公司的创业计划书
2014/01/22 职场文书
网络教育自我鉴定
2014/02/04 职场文书
体育教师个人的自我评价
2014/02/16 职场文书
物流管理专业毕业生自荐信
2014/03/04 职场文书
家具公司总经理岗位职责
2014/07/08 职场文书
python使用glob检索文件的操作
2021/05/20 Python