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制作饼状旋转载入效果的实例
Jun 23 HTML / CSS
CSS3中的Transition过度与Animation动画属性使用要点
May 20 HTML / CSS
CSS3 新增选择器的实例
Nov 13 HTML / CSS
html5本地存储_动力节点Java学院整理
Jul 12 HTML / CSS
HTML5样式控制示例代码
Nov 27 HTML / CSS
HTML5中的autofocus(自动聚焦)属性介绍
Apr 23 HTML / CSS
HTML5制作3D爱心动画教程 献给女友浪漫的礼物
Nov 05 HTML / CSS
24个canvas基础知识小结
Dec 17 HTML / CSS
基于html5绘制圆形多角图案
Apr 21 HTML / CSS
HTML5离线应用与客户端存储的实现
May 03 HTML / CSS
HTML5实现应用程序缓存(Application Cache)
Jun 16 HTML / CSS
HTML5公共页面提取作为公用代码的方法
Jun 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
jQuery 版本的文本输入框检查器Input Check
2009/07/09 Javascript
Javascript基础知识(二)事件
2014/09/29 Javascript
JavaScript跨浏览器获取页面中相同class节点的方法
2015/03/03 Javascript
JS实现统计复选框选中个数并提示确定与取消的方法
2015/07/01 Javascript
jQuery实现向下滑出的平滑下拉菜单效果
2015/08/21 Javascript
深入理解React中es6创建组件this的方法
2016/08/29 Javascript
详解Javascript函数声明与递归调用
2016/10/22 Javascript
JavaScript获取服务器端时间的方法
2016/11/29 Javascript
el表达式 写入bootstrap表格数据页面的实例代码
2017/01/11 Javascript
localStorage的黑科技-js和css缓存机制
2017/02/06 Javascript
Ext JS 实现建议词模糊动态搜索功能
2017/05/13 Javascript
easyUI下拉列表点击事件使用方法
2017/05/18 Javascript
最实用的JS数组函数整理
2017/12/05 Javascript
利用npm 安装删除模块的方法
2018/05/15 Javascript
Nodejs 发布自己的npm包并制作成命令行工具的实例讲解
2018/05/15 NodeJs
JavaScript常用截取字符串的三种方式用法区别实例解析
2018/05/15 Javascript
Vue作用域插槽slot-scope实例代码
2018/09/05 Javascript
react 父子组件之间通讯props
2018/09/08 Javascript
JS实现的新闻列表自动滚动效果示例
2019/01/30 Javascript
JavaScript中工厂函数与构造函数示例详解
2019/05/06 Javascript
vue 遮罩层阻止默认滚动事件操作
2020/07/28 Javascript
Openlayers显示瓦片网格信息的方法
2020/09/28 Javascript
[54:57]DOTA2-DPC中国联赛定级赛 Aster vs DLG BO3第二场 1月8日
2021/03/11 DOTA
python实现倒计时的示例
2014/02/14 Python
Python实现冒泡,插入,选择排序简单实例
2014/08/18 Python
python中enumerate函数遍历元素用法分析
2016/03/11 Python
Python实现JSON反序列化类对象的示例
2018/01/31 Python
Python3多线程操作简单示例
2018/05/22 Python
python快速排序的实现及运行时间比较
2019/11/22 Python
Python插入Elasticsearch操作方法解析
2020/01/19 Python
使用OpenCV获取图片连通域数量,并用不同颜色标记函
2020/06/04 Python
Order by的几种用法
2013/06/16 面试题
英语专业个人求职自荐信
2013/09/21 职场文书
物流管理专业求职信
2014/05/29 职场文书
解决Go gorm踩过的坑
2021/04/30 Golang
MySQL查询学习之基础查询操作
2021/05/08 MySQL