(十九)原生js案例之h5地里位置信息与高德地图的初使用

h5 地里位置信息

1. 获取当前位置信息

在这里插入图片描述

window.onload = function () {const oBtn = document.querySelector("#btn");const oBox = document.querySelector("#box");oBtn.onclick = function () {window.navigator.geolocation.getCurrentPosition(function (position) {console.log("🚀 ~ position:", position);const { latitude, longitude } = position.coords;oBox.innerHTML += `${latitude} ${longitude}`;},function (error) {console.log("🚀 ~ error:", error);},{enableHighAccuracy: true,timeout: 5000,});};
};
  • 失败编码

    • 0 未知错误,不包括下面的
    • 1 用户拒绝
    • 2 尝试获取用户信息,但失败了
    • 3 超时,设置了 timeout 参数
  • chrome 浏览器失败,edge 浏览器成功
    在这里插入图片描述

  • 数据收集,json 格式

    {"enableHighAccuracy": true, // 开启高精度,默认 false"timeout": 5000, // 超时时间,默认 infinity"maximumAge": 0 // 位置可以缓存时间,默认 0
    }
    

2. 获取当前位置信息

window.onload = function () {const oBtn = document.querySelector("#btn");const oBox = document.querySelector("#box");let timer = null;oBtn.onclick = function () {timer = window.navigator.geolocation.getCurrentPosition(function (position) {console.log("🚀 ~ position:", position);let str = "";for (const key in position.coords) {const value = position.coords[key];str += `${key}: ${value} <br/>`;}oBox.innerHTML = str;},function (error) {console.log("🚀 ~ error:", error);//移动端主要位置改变,这里就会一直报错//清除定时器window.navigator.geolocation.clearWatch(timer);},{enableHighAccuracy: true,timeout: 5000,frequence: 1000,maximumAge: 1000,});};
};
  • h5 获取到地里位置信息后进行标注定位,配置使用高德地图

    • 封装高德地图,进行初始化
window._AMapSecurityConfig = {securityJsCode: "自己的key",
};class AMapHelper {static async getMap() {if (window.AMap) {return window.AMap;}let AMap = null;const baseConfig = {key: window._AMapSecurityConfig.securityJsCode, //申请好的Web端开发者 Key,调用 load 时必填version: "2.0", //指定要加载的 JS API 的版本,缺省时默认为 1.4.15};try {AMap = await AMapLoader.load(baseConfig);console.log("高德地图初始化");} catch (error) {console.log(error);}return AMap;}
}
  • 拿到高德地图对象后,进行标记
window.onload = async function () {let timer = 0;await AMapHelper.getMap();let map = new AMap.Map("box", {resizeEnable: true,});getPos();function getPos() {timer = window.navigator.geolocation.getCurrentPosition(function (position) {console.log("🚀 ~ position:", position);//获取位置信息const { longitude, latitude } = position.coords;//创建标记const marker = new AMap.Marker({position: [longitude, latitude], //位置});map.add(marker); //添加到地图},function (error) {console.log("🚀 ~ error:", error);//移动端主要位置改变,这里就会一直报错//清除定时器window.navigator.geolocation.clearWatch(timer);},{enableHighAccuracy: true,timeout: 5000,frequence: 1000,maximumAge: 1000,});}
};

案例,高德地图添加标记,事件,自定义标记 ICON

在这里插入图片描述

window.onload = async function () {let timer = 0;await AMapHelper.getMap();// console.log(window.AMap);let map = new AMap.Map("box", {resizeEnable: true,});const content = ["<div><b>高德软件有限公司</b>","电话 : 010-84107000   邮编 : 100102","地址 : 北京市望京阜通东大街方恒国际中心A座16层</div>",];const icon = new AMap.Icon({size: new AMap.Size(25, 34), //图标尺寸image: "./img/site.png", //Icon 的图像imageOffset: new AMap.Pixel(-9, -3), //图像相对展示区域的偏移量,适于雪碧图等imageSize: new AMap.Size(135, 40), //根据所设置的大小拉伸或压缩图片});getPos();function getPos() {timer = window.navigator.geolocation.getCurrentPosition(function (position) {console.log("🚀 ~ position:", position);//获取位置信息const { longitude, latitude } = position.coords;//创建标记,自定义图片const marker = new AMap.Marker({position: new AMap.LngLat(longitude, latitude), //点标记的位置offset: new AMap.Pixel(-13, -30), //偏移量icon: icon, //添加 Icon 实例title: "高德科技",zooms: [2, 12], //点标记显示的层级范围,超过范围不显示});//添加窗体事件const infoWindow = new AMap.InfoWindow({//创建信息窗体isCustom: false, //使用自定义窗体// content: "<div id='info1'>这里可以显示自己的自定义描述内容</div>", //信息窗体的内容可以是任意html片段offset: new AMap.Pixel(16, -45),content,closeWhenClickMap: true,});//默认展示信息窗体infoWindow.open(map, [longitude, latitude]);const onMarkerClick = function (e) {// infoWindow.open(map, e.target.getPosition()); //点击打开信息窗体//e.target就是被点击的Marker};map.add(marker); //添加到地图marker.on("click", onMarkerClick); //绑定click事件},function (error) {console.log("🚀 ~ error:", error);//移动端主要位置改变,这里就会一直报错//清除定时器window.navigator.geolocation.clearWatch(timer);},{enableHighAccuracy: true,timeout: 5000,frequence: 1000,maximumAge: 1000,});}
};

进阶之路: 高德地图2.0文档

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/49557.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

SQL每日一题:游戏玩法分析 I

题干 活动表 Activity&#xff1a; --------------------- | Column Name | Type | --------------------- | player_id | int | | device_id | int | | event_date | date | | games_played | int | --------------------- 在 SQL 中&#xff0c;表的主键是 (player_id, eve…

49 IRF 经典案例

49 IRF 经典案例 一 H3C-FWW-RF 脚本 <IRF-MATER-FW1000>display current-configuration #version 7.1.064, Alpha 7164 #sysname IRF-MATER-FW1000 # context Admin id 1 #telnet server enable #irf mac-address persistent timerirf auto-update enableundo irf l…

案例研究|柯尼卡美能达软件开发(大连)有限公司基于DataEase构筑内部数据可视化体系

柯尼卡美能达软件开发&#xff08;大连&#xff09;有限公司于2007年5月25日注册成立。公司以“洞悉在工作的人们真实情况&#xff0c;探寻他们的愿望&#xff0c;持续提供使人们更加幸福的服务”为使命&#xff0c;致力于系统品质测试服务、软件开发服务、IT安全服务、高级BPO…

2024最新手机软件APP下载排行网站源码 软件下载站PHP源码

源码介绍 这是一款简洁蓝色的手机软件下载应用排行、平台和最新发布网站源码&#xff0c;主要包括主页、APP列表页、APP详情介绍页、新闻资讯列表、新闻详情页、关于我们等模块页面。 软件下载站PHP网站源码&#xff0c;简单的部署上线&#xff0c;访问首页安装程序&#xff…

AI工具记录

1、互联网知名的AI模型 文心一言&#xff08;百度&#xff09; ---代码、逻辑推理 豆包&#xff08;云雀模型&#xff09; miniMax 讯飞星火 混元大模型&#xff08;腾讯&#xff09; kimi 可灵&#xff08;快手&#xff09;---视频王者 智谱清言&#xff08;清华&…

小程序收银视频介绍

千呼新零售2.0系统是零售行业连锁店一体化收银系统&#xff0c;包括线下收银线上商城连锁店管理ERP管理商品管理供应商管理会员营销等功能为一体&#xff0c;线上线下数据全部打通。 适用于商超、便利店、水果、生鲜、母婴、服装、零食、百货、宠物等连锁店使用。 详细介绍请…

【测开能力提升-Javascript】JavaScript运算符流程结构

1. 递增递减运算符 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Title</title><script>// 前置递增运算符var age10age //类似于ageage1&#xff0c; 先加1后返回值alert(age)// 后置…

总结一些vue3小知识3

1.限制时间选择器只能选择后面的日期 说明&#xff1a;disabled-date属性是一个用来判断该日期是否被禁用的函数&#xff0c;接受一个 Date 对象作为参数。 应该返回一个 Boolean 值。 <el-date-picker class"w180" v-model"datas.form.timeDate[0]" …

Shiro安全框架(上)

目录 第一章 权限概述 1、什么是权限 2、身份认证概念-Authentication 【1】什么是认证 【2】对象 2、用户授权概念-Authorization 【1】什么是授权 【2】授权流程 第二章 Shiro概述 1、Shiro简介 【1】什么是Shiro? 【2】Shiro 的特点 2、核心组件 第三章 Shiro…

HormonyOs之 路由简单跳转

Navigation路由相关的操作都是基于页面栈NavPathStack提供的方法进行&#xff0c;每个Navigation都需要创建并传入一个NavPathStack对象&#xff0c;用于管理页面。主要涉及页面跳转、页面返回、页面替换、页面删除、参数获取、路由拦截等功能。 Entry Component struct Index …

八月超市营销活动规划

八月骄阳似火&#xff0c;尽管多地仍笼罩在炎热的夏意之中&#xff0c;但随着立秋节气的到来&#xff0c;以及七夕节、中元节等传统节日的相继而至&#xff0c;为商家们提供了极佳的营销契机。巧妙地根据这些节日节气规划每一周期的营销活动&#xff0c;不仅能营造浓厚的节日氛…

Java面试篇类加载过程详解(吊打面试官)

类加载过程详解 文章目录 类加载过程详解类的生命周期类加载过程1.加载2.验证3.准备4.解析5.初始化6.类卸载 类的生命周期 类从被加载到虚拟机内存中开始到卸载内存为止&#xff0c;它的整个生命周期简单概括加载-验证-准备-解析-初始化-使用-卸载 验证、准备、解析这三个阶段…

使用ESP32搭建简单的WiFi控制LED的Web服务器

在这篇博客中&#xff0c;我将展示如何使用ESP32或ESP8266开发板通过WiFi搭建一个简单的Web服务器&#xff0c;并使用它来控制一个LED的开关。首先确保esp32与自己的手机或者电脑在同一WiFi环境下 效果展示 led 项目准备 在开始之前&#xff0c;请确保你已经准备好以下材料&a…

MySQL中的CREATE EVENT 语句详解

CREATE EVENT 语句在 MySQL 中用于创建一个事件调度器&#xff08;Event Scheduler&#xff09;的事件。事件调度器允许你安排数据库任务&#xff08;如查询、数据更新等&#xff09;在将来的某个时间点自动执行&#xff0c;或者根据特定的时间间隔重复执行。这对于需要定期执行…

【HarmonyOS】关于鸿蒙消息推送的心得体会(二)

【HarmonyOS】关于鸿蒙消息推送的心得体会&#xff08;二&#xff09; 前言 推送功能的开发与传统功能开发还是有很大区别。首先最大的区别点就在于需要多部门之间的协同&#xff0c;作为鸿蒙客户端开发&#xff0c;你需要和产品&#xff0c;运营&#xff0c;以及后台开发一起…

泛型、Trait和生命周期(10)

泛型、Trait和生命周期 1.泛型数据类型1.1在函数定义中使用泛型1.2结构体定义中的泛型1.3枚举定义中的泛型1.4方法定义中的泛型1.5泛型代码的性能 2.Trait: 定义共同行为2.1定义trait2.2为类型实现trait2.3默认实现2.4trait作为参数2.5Trait Bound语法2.6通过 指定多个trait b…

golang语言 .go文件版本条件编译,xxx.go文件指定go的编译版本必须大于等于xxx才生效的方法, 同一个项目多个go版本文件共存方法

在go语言中&#xff0c;我们不关是可以在编译时指定版本&#xff0c; 在我们的xxx.go文件中也可以指定go的运行版本&#xff0c;即 忽略go.mod中的版本&#xff0c;而是当当前的go运行版本达到指定条件后才生效的xxx.go文件。 方法如下&#xff1a; 我们通过在xxx.go文件的头部…

vue3访问URL添加session变量

本文主要讲了我们在访问网址时候&#xff0c;为了实现一些免登录等效果&#xff0c;需要在会话Session中添加一些变量&#xff0c;已实现特定效果。 关键代码在于蓝色这部分&#xff1a; <script setup> import { ref } from vue import axios from axios const loginUrl…

java小白针对大数据多表联查的一些小思路,帮助新手学习

假设我的member_user里面有352599条数据&#xff0c;gp_project里面有1211974条数据 SELECT gp.*, mu.linkmanName , mu.linkmanPhone, mu.legalPersonName, mu.legalPersonPhone, mu.address, mu.registerArea FROM gp_project gp LEFT JOIN member_user mu ON mu.supplierId…

通过“微软蓝屏”事件对网络安全的思考

近日&#xff0c;一次由微软视窗系统软件更新引发的全球性“微软蓝屏”事件&#xff0c;不仅成为科技领域的热点新闻&#xff0c;更是一次对全球IT基础设施韧性与安全性的深刻检验。这次事件&#xff0c;源于美国电脑安全技术公司“众击”提供的一个带有“缺陷”的软件更新&…