vue使用高德地图实现实时定位天气预报功能
目录
- JSAPI 的加载
- 使用 JSAPI Loader (推荐)
- JSAPI key和安全密钥的使用
- 项目代码步骤：
- 1、在index.html页面body中添加密钥
- 2、安装@amap/amap-jsapi-loader 使用
- 3、实现代码：
实现效果：
需求：根据定位功能，使用高德地图实现定位当前城市的天气预报功能。
JSAPI 的加载
JS API 2.0 版本提供了两种方案引入地图 JSAPI：
1. 使用官网提供的 JSAPI Loader 进行加载；
2. 以常规 JavaScript 脚本的方式加载；
注意：为避免地图数据协议和前端资源不匹配导致页面运行报错，只允许在线加载 JSAPI，禁止进行本地转存、与其它代码混合打包等用法。
使用 JSAPI Loader (推荐)
JSAPI Loader是我们提供的 API 加载器，可帮助开发者快速定位、有效避免加载引用地图 JSAPI 各种错误用法，具有以下特性：
- 来说明下上面的案例的问题：为什么此时图标就无法粘性定位了，主要是因为它（子元素）不知道以那个父元素的滚动为准(现在有两个父级元素都产生了滚动)，所以我们要对一层层祖级元素检查看是否有overflow属性如果有将元素设置 overflow: visible； body {overflow: visible； }； 简单理解：两个父级body 和div.main 如果同高度宽度的话，子元素就不知道到底以父元素为主，就会出现无法粘性定位的支持以 普通JS 和 npm包 两种方式使用；
- 有效避免错误异步加载导致的 JSAPI 资源加载不完整问题；
- 对于加载混用多个版本 JSAPI 的错误用法给予报错处理；
- 对于不合法加载引用 JSAPI 给予报错处理；
- 支持指定 JSAPI 版本；
- 支持插件加载；
- 允许多次执行加载操作，网络资源不会重复请求，便于大型工程模块管理；
- 支持IE9以上的浏览器，不支持IE8以下
注意（您在2021年12月02日申请以后的key需要配合您的安全密钥一起使用）
JSAPI key和安全密钥的使用
JSAPI key搭配代理服务器并携带安全密钥转发（安全）
1) 引入 JSAPI 使用 Loader 之前增加代理服务器设置脚本标签，设置代理服务器域名或地址，将下面示例代码中的「您的代理服务器域名或地址」替换为您的代理服务器域名或ip地址，其中_AMapService为代理请求固定前缀，不可省略或修改。 （注意您这 个设置必须是在加载loader.js的脚本引入之前进行设置，否则设置无效。）
项目代码步骤：
1、在index.html页面body中添加密钥
.......
<body>
<noscript>
<strong>We're sorry but map-demo doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<script type="text/javascript">
window._AMapSecurityConfig = {
// serviceHost:'您的代理服务器域名或地址/_AMapService',
securityJsCode:"xxxxxx"//申请的密钥
}
</script>
</body>
......
2、安装@amap/amap-jsapi-loader 使用
npm i @amap/amap-jsapi-loader --save
页面引入：
import AMapLoader from "@amap/amap-jsapi-loader";
3、实现代码：
当前截取的代码是天气部分
...
<div class="header-content flex align-items">
<!-- <img src="../../assets/img/index_03.png"/> -->
<span class="header-left-txt" id="weather" v-if="weatherObj.nightWeather!=weatherObj.dayWeather">
{{weatherObj.nightWeather}}转{{weatherObj.dayWeather}}
{{weatherObj.nightTemp?weatherObj.nightTemp+"°C":""}}<i v-show="weatherObj.dayTemp">-</i>{{weatherObj.dayTemp?weatherObj.dayTemp+"°C":""}}
</span>
<span class="header-left-txt" id="weather" v-else>
{{weatherObj.dayWeather}}
{{weatherObj.nightTemp?weatherObj.nightTemp+"°C":""}}<i v-show="weatherObj.dayTemp">-</i>{{weatherObj.dayTemp?weatherObj.dayTemp+"°C":""}}
</span>
<!-- <van-icon name="arrow-down" color="#fff" size="14px" class="ml10"/> -->
</div>
...
// 天气
weatherObj:{
nightTemp:"",//夜间温度,
dayTemp:"",//白天温度
dayWeather:"",//白天天气
nightWeather:"",//夜间天气
}
// 天气
loadWeather(city) {
return new Promise((reslove, reject) => {
AMapLoader.load({
key: "xxxxx", // 申请好的Web端开发者Key，首次调用 load 时必填
// version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
plugins: ["AMap.Weather"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
AMapUI: {
// 是否加载 AMapUI，缺省不加载
version: "1.1", // AMapUI 缺省 1.1
plugins: [] // 需要加载的 AMapUI ui插件
}
}).then(AMap => {
//创建天气查询实例
let weather = new AMap.Weather();
//执行实时天气信息查询
weather.getForecast(city?city:"武汉市", (err, data)=> {
// console.log(err, data);
if(data.info=="OK"){
let forecasts = data.forecasts[0];
this.weatherObj = forecasts;
console.log(this.weatherObj,"天气")
}else{
console.log("获取天气失败");
}
});
reslove();
})
.catch(e => {
console.log(e, "高德地图加载失败");
reject(e);
});
});
}
可以根据手机定位获取当前天气功能，或者可以实现切换城市获取天气。
mounted(){
this.loadWeather("武汉");//高德天气
}
文档查看：天气-服务-教程-地图 JS API v2.0 | 高德地图API
到此这篇关于vue使用高德地图实现实时天气预报功能的文章就介绍到这了,更多相关vue实时天气预报内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
Vue实现天气预报功能
本文为大家分享了Vue实现天气预报功能的具体代码,供大家参考,具体内容如下 1.功能描述 在搜索框中输入城市,下方出现今天及未来四天的天气情况.搜索框下面固定了几个城市,点击可以快速查询. 2.html代码 <div id="app"> <div id="srchbar"> <input type="text" v-model="city" @keyup.enter="srch(city
-
Vue实现天气预报小应用
这是本人在自学vue框架时候所模仿的一个网站,可以查询一些城市的天气情况,大家可以看看: html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /
-
前端vue如何使用高德地图
首先,注册Key 1.注册开发者账号,成为高德开放平台开发者 2.登陆之后,在进入「应用管理」 页面「创建新应用」 3.为应用添加 Key,「服务平台」一项请选择「 Web 端 ( JSAPI ) 」 然后,书写代码 在vuecli public文件夹中的index.html添加导入 JS API 的入口脚本标签 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8
-
Vue入门实战之天气预报
本文实例为大家分享了Vue实现天气预报的具体代码,供大家参考,具体内容如下 效果图 实现代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-
VUE项目调用高德地图的详细步骤
目录 前言 申请高德key 技术选型 准备工作 项目中应用 刷新页面,地图加载偶尔失败 在绑定插件的时候,控制台报错 a[d].split is not a function 原生调用高德API 混合使用(vue-amap与原生API混合使用) 总结 参考链接 前言 相信大家或多或少都接触过在大屏的项目,在大屏项目中除了用到了echarts中的行政地图,街道地图也是很常见的,今天主要来说一下在vue中调用高德地图遇到的一些问题
-
vue+高德地图实现地图搜索及点击定位操作
首先需要在index.html中引入高德地图的js链接,key需要换成你自己的key 最近有个需求是实现一个使用地图搜索定位的功能,在网上参考了下其他的文章,感觉不是很完善,自己整理了一下,可以实现点击定位,搜索列表定位等功能,可能有些地方是多余的,需要的自己看着改下 <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.14&key=你的key"></
-
vue使用高德地图实现实时定位天气预报功能
目录 JSAPI 的加载 使用 JSAPI Loader (推荐) JSAPI key和安全密钥的使用 项目代码步骤: 1.在index.html页面body中添加密钥 2.安装@amap/amap-jsapi-loader 使用 3.实现代码: 实现效果: 需求:根据定位功能,使用高德地图实现定位当前城市的天气预报功能. JSAPI 的加载 JS API 2.0 版本提供了两种方案引入地图 JSAPI: 1. 使用官网提供的 JSAPI Loader 进行加载: 2. 以常规 JavaScri
-
Vue使用高德地图搭建实时公交应用功能（地图 + 附近站点+线路详情 + 输入提示+换乘详情）
最近项目要使用高德地图写了一个实时公交的应用,这边分享一个小应用主要熟悉下高德地图在vue中的使用,常用api,vue的常用指令 先给大家看下页面效果: 如果有需要源码的童鞋请移步我的github地址 vue搭建实时公交 (欢迎star) 实现思路 在vue项目中导入高德地图 具体功能调用相应高德js APi 1.在vue项目中导入高德地图 1.修改webpac.base.conf.js文件 externals: { 'AMap': 'AMap' } 2.引入sdk 引入有两种方式,一种是在in
-
Vue使用高德地图实现城市定位
本文实例为大家分享了Vue使用高德地图实现城市定位的具体代码,供大家参考,具体内容如下 一 前端选择框点击跳转至地图选址页面 <van-row class="address_item"> <van-col span="6" class="item-title">收货地址</van-col> <van-col span="18"> <p class="item&qu
-
vue使用高德地图根据坐标定位点的实现代码
前言 项目中需要根据坐标定位,将自己的实现过程写下来,废话不多说,上代码 正文 <script> var map,marker; export default { data(){ return{ arriveCoor:[108.947025,34.2613255],//坐标点 arrive:"",//位置信息 } }, mounted() { mapDraw(this.arriveCoor), mapCoor(this.arriveCoor) }, methods:{ ma
-
vue 使用高德地图vue-amap组件过程解析
这篇文章主要介绍了vue 使用高德地图vue-amap组件过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 首先 npm install -S vue-amap 然后在 main.js import VueAMap from 'vue-amap'; //注意不要和 AMap原始名称覆盖 Vue.use(VueAMap); // 初始化vue-amap VueAMap.initAMapApiLoader({ // 高德的key key: '
-
vue使用高德地图点击下钻上浮效果的实现思路
这里给使用高德地图下钻提供一个思路 先讲下我的思路,高德地图api有一个地图绘制区域,你只要提供区码,就可以绘制该区域.以浙江省为例,我一开给浙江省的区码就可以绘制出浙江省的区域,接下来我要进入杭州市,当我点击杭州市的时候我先清空地图上的覆盖层并且能获取到'杭州市'这个字符串,通过对比这个字符串我就可以给出杭州市的区码,最后绘制出杭州市的覆盖层. 接下来看代码: 第一步 绘制地图: //创建地图 this.map = new AMap.Map("container", { cursor
-
vue.js高德地图实现热点图代码实例
1.在index.html引入高德地图JSAPI <script src="https://webapi.amap.com/maps?v=1.3&key=xxx"></script> 2.地图dom <div class="map-container"> <div id="container" style="width:100%;height:500px"></di
-
Vue开发高德地图应用的最佳实践
目录 前言 异步加载 封装组件 使用组件 自定义界面最佳实践 总结 前言 之前做不过不少关于地图交互的产品系统,目前国内主流的地图应用 SDK 只有几家:高德.百度和腾讯.所以个人觉得在 PC 应用上高德地图开发相对好一些,至少体验起来没有很明显的坑.这篇文章算是总结下开发地图应用总结吧. 异步加载 因为使用 js sdk 应用,脚本文件本身体积很大,所以要注意下加载的白屏时间,解决用户体验问题,目前绝大部分产品应用都是 SPA 单页面应用系统,所以我封装一个异步加载的方法: const loa
-
Vue使用百度地图实现城市定位
本文实例为大家分享了Vue使用百度地图实现城市定位的具体代码,供大家参考,具体内容如下 Vue项目运行环境:Vue 2.0,Vue Cli 3.0 步骤一:登录 百度地图开放平台 在 控制台---->应用管理---->我的应用 下面创建一个应用. 目的是获取 ak 步骤二:在public文件夹的index.html文件中 导入百度地图,拼上你的ak 步骤三:在项目的根目录中创建vue.config.js文件 如果有vue.config.js文件的话,直接添加以下代码即可. vue.config
-
vue接入高德地图绘制扇形效果的案例详解
目录 vue接入高德地图绘制扇形 需求 预想效果 代码实现 绘制基站第一步 绘制基站第二步 - 计算扇形形状 计算扇形坐标 扇区点击事件 原点点击事件 vue接入高德地图绘制扇形 为什么又写这一篇呢,主要是因为这个功能高德不支持,只能自己实现,但是呢,我估计很多人会用到这玩意儿.所以说呢,就简单的实现一下,如果有需要的话直接超过去就行,之前写过天地图绘制扇形区域的,如果使用天地图的话可以翻一下我之前的博客,百度地图和这个方法类似,可能就是使用的类不同,这样的话只要原理流程理解的差不多,直接把各个