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 相关文章推荐
CSS3+Sprite实现僵尸行走动画特效源码
Jan 27 HTML / CSS
简单掌握CSS3中resize属性的用法
Apr 01 HTML / CSS
使用CSS3的ruby-position固定注音位置的用法示例
Jul 05 HTML / CSS
纯CSS3绘制打火机动画火焰效果
Jul 18 HTML / CSS
详解CSS3 filter:drop-shadow滤镜与box-shadow区别与应用
Aug 24 HTML / CSS
HTML5之多线程(Web Worker)
Jan 02 HTML / CSS
x-ua-compatible content=”IE=7, IE=9″意思理解
Jul 22 HTML / CSS
深入浅析HTML5中的SVG
Nov 27 HTML / CSS
html5需遵循的6个设计原则
Apr 27 HTML / CSS
浅析HTML5中的 History 模式
Jun 22 HTML / CSS
AmazeUI的JS表单验证框架实战示例分享
Aug 21 HTML / CSS
浅谈css清除浮动(clearfix和clear)的用法
May 21 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中MVC的开发经验分享
2012/05/17 PHP
PHP中使用Session配合Javascript实现文件上传进度条功能
2014/10/15 PHP
smarty模板引擎中变量及变量修饰器用法实例
2015/01/22 PHP
[原创]php正则删除html代码中class样式属性的方法
2017/05/24 PHP
对于Laravel 5.5核心架构的深入理解
2018/02/22 PHP
实例讲解php将字符串输出到HTML
2019/01/27 PHP
php设计模式之工厂模式用法经典实例分析
2019/09/20 PHP
JavaScript作用域与作用域链深入解析
2013/12/06 Javascript
js实现图片漂浮效果的方法
2015/03/02 Javascript
javascript控制台详解
2015/06/25 Javascript
BootStrap Datepicker 插件修改为默认中文的实现方法
2017/02/10 Javascript
Bootstrap警告框(Alert)插件使用方法
2017/03/21 Javascript
vue-cli如何快速构建vue项目
2017/04/26 Javascript
jquery获取transform里的值实现方法
2017/12/12 jQuery
Angular实现点击按钮控制隐藏和显示功能示例
2017/12/29 Javascript
jquery实现点击a链接,跳转之后,该a链接处显示背景色的方法
2018/01/18 jQuery
浅析vue-router原理
2018/10/19 Javascript
对layer弹出框中icon数字参数的说明介绍
2019/09/04 Javascript
解决layui动态添加的元素click等事件触发不了的问题
2019/09/20 Javascript
《javascript设计模式》学习笔记七:Javascript面向对象程序设计组合模式详解
2020/04/08 Javascript
python监控linux内存并写入mongodb(推荐)
2017/09/11 Python
python九九乘法表的实例
2017/09/26 Python
Python求出0~100以内的所有素数
2018/01/23 Python
python实现监控某个服务 服务崩溃即发送邮件报告
2018/06/21 Python
利用Tensorflow构建和训练自己的CNN来做简单的验证码识别方式
2020/01/20 Python
python模拟预测一下新型冠状病毒肺炎的数据
2020/02/01 Python
Python基于进程池实现多进程过程解析
2020/04/30 Python
Python文件操作模拟用户登陆代码实例
2020/06/09 Python
彪马俄罗斯官网:PUMA俄罗斯
2019/07/13 全球购物
Java面试题:为什么要用Java
2012/05/11 面试题
优质的学校老师推荐信
2013/10/28 职场文书
英语系本科生求职信范文
2013/12/18 职场文书
美容师的职业规划书
2013/12/27 职场文书
丧事主持词大全
2014/04/02 职场文书
加强作风建设演讲稿
2014/10/24 职场文书
党员个人整改措施
2014/10/24 职场文书