中国建设招标网网站首页,东莞网站建设哪家,做网站一般字号要做多少,组建网站需多少钱首先得去高德控制台申请两个 key#xff0c;一个天气key和一个定位key 获取天气信息的函数#xff1a;
const getWeather function (city) {// 使用 fetch 发送请求获取天气信息fetch(https://restapi.amap.com/v3/weather/weatherInfo?city${city}keyeefd36557b0250…
首先得去高德控制台申请两个 key一个天气key和一个定位key 获取天气信息的函数
const getWeather function (city) {// 使用 fetch 发送请求获取天气信息fetch(https://restapi.amap.com/v3/weather/weatherInfo?city${city}keyeefd36557b0250d19d243aea0f62d499).then((response) response.json()).then((data) {const { lives } data;// 更新响应式数据weather.city lives[0].city;weather.weather lives[0].weather;weather.temperature lives[0].temperature;weather.winddirection lives[0].winddirection;weather.windpower lives[0].windpower;weather.reporttime lives[0].reporttime;});
};使用Geolocation API获取当前位置
onMounted(() {let latitude 0;let longitude 0;if (geolocation in navigator) {navigator.geolocation.getCurrentPosition(function (position) {latitude position.coords.latitude;longitude position.coords.longitude;},function (error) {console.error(获取位置失败, error.message);});} else {console.error(浏览器不支持Geolocation);}
});加载高德地图API并在地图上显示标记和天气信息
AMapLoader.load({// 加载高德地图API
}).then((AMap) {// 在地图上显示当前位置的标记const marker new AMap.Marker({position: new AMap.LngLat(longitude, latitude),title: 当前位置,});// 其他地图初始化和相关操作// 在地图上显示信息窗体watch(weather, (newVal, oldVal) {// 创建信息窗体var content [divb天气/b,城市${weather.city},// 其他天气信息.../div,];var infoWindow new AMap.InfoWindow({content: content.join(br),anchor: top-left,});infoWindow.open(map, [longitude, latitude]);});// 添加标记到地图map.add(marker);// 标记点击事件marker.on(click, function (e) {// 打开信息窗体infoWindow.open(map, [longitude, latitude]);});
}).catch(e {console.error(e);
});全部代码
templatediv idcontainer/div!-- --
/template
script setup langts
import {onMounted, reactive, ref, watch} from vue;
import AMapLoader from amap/amap-jsapi-loader;
import {computed} from vue-demi;// 如果是在 ts 的项目中这一步会有类型错误解决方案请移步 2.1.1
window._AMapSecurityConfig {securityJsCode: d6a5157a0b06c55bcee22c7b69a42c5a// 你的安全密钥
};
// 定义当前经纬度
/** 初始化地图函数 */
// IP定位获取当前城市信息
const weather reactive({city: ,weather: ,temperature: ,winddirection: ,windpower: ,reporttime:
})
const weatheritem computed(() {// 回调函数必须return结果就是计算的结果// 如果计算属性依赖的数据发生变化那么会重新计算return weather
})const getWeather function (city) {fetch(https://restapi.amap.com/v3/weather/weatherInfo?city${city}keyeefd36557b0250d19d243aea0f62d499 //天气key).then((response) {return response.json();}).then((data) {const {lives} dataconsole.log(lives[0])weather.city lives[0].cityweather.weather lives[0].weatherweather.temperature lives[0].temperatureweather.winddirection lives[0].winddirectionweather.windpower lives[0].windpowerweather.reporttime lives[0].reporttime});
}
onMounted(() {let latitude 0;let longitude 0;// 获取当前位置的经纬度
// 检查浏览器是否支持Geolocationif (geolocation in navigator) {// 获取当前位置navigator.geolocation.getCurrentPosition(function (position) {// 获取经纬度latitude position.coords.latitude;longitude position.coords.longitude;// 在这里使用经纬度数据进行其他操作console.log(纬度 latitude , 经度 longitude);},function (error) {// 处理获取位置失败的情况console.error(获取位置失败, error.message);});} else {// 浏览器不支持Geolocationconsole.error(浏览器不支持Geolocation);}// AMapLoader 加载器// 资源加载完成后就会触发 thenAMapLoader.load({key: 34b7b1e632fcf24d30be5c5825f8043d, // 申请好的Web端开发者定位Key首次调用 load 时必填version: 2.0, // 指定要加载的 JS API 的版本缺省时默认为 1.4.15plugins: [], // 需要使用的的插件列表如比例尺AMap.Scale等}).then((AMap) {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.city)getWeather(result.city)}})})const marker new AMap.Marker({position: new AMap.LngLat(longitude, latitude), //经纬度对象也可以是经纬度构成的一维数组[116.39, 39.9]title: 当前位置,});//打开信息窗体// 初始化地图const map new AMap.Map(container, {center: [longitude, latitude], //地图中心点zoom: 10// 配置对象 - 配置地图的风格和缩放比例请移步 2.2});//获取当前城市信息//信息窗体的内容watch(weather, (newVal, oldVal) {console.log(newVal, oldVal)var content [divb天气/b,城市${weather.city},时间${weather.reporttime},天气${weather.weather},温度${weather.temperature}℃,风向${weather.winddirection},风速${weather.windpower},/div,];
//创建 infoWindow 实例var infoWindow new AMap.InfoWindow({content: content.join(br), //传入字符串拼接的 DOM 元素anchor: top-left,});infoWindow.open(map, [longitude, latitude]); //map 为当前地图的实例map.getCenter() 用于获取地图中心点坐标。})map.add(marker)marker.on(click, function (e) {// 打开信息窗体显示信息console.log(e)infoWindow.open(map, [longitude, latitude]);});}).catch(e {console.log(e);});
});/scriptstyle scoped
#container {width: 100vw;height: 100vh;
}
/style
