(十九)原生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…

小程序收银视频介绍

千呼新零售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…

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

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

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

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

04 HTML CSS JavaScript

文章目录 HTML1、HTML介绍2、快速入门3、基础标签4、图片、音频、视频标签5、超链接标签6、列表标签7、表格标签8、布局标签9、 表单标签 CSS1、 概述2、 css 导入方式3、 css 选择器4、 css 属性 JavaScript1、JavaScript简介2、JavaScript引入方式3、JavaScript基础语法4、Ja…

Potree在web端显示大型点云模型文件

一、克隆项目代码&#xff08;准备好上网工具&#xff0c;得先有node.js npm 环境&#xff09; git clone https://github.com/potree/potree.git二、依赖安装&#xff08;换淘宝镜像能快一些&#xff09; cd potree npm install三、运行 npm start四、使用样例 打开浏览器…

【Spring】SpringRetry重试机制和Spring异步任务发送操作结合应用场景实操,通俗易懂

平时调用一些第三方接口或者内部接口&#xff0c;可能出现处理异常或者超时或者意外因素&#xff0c;我们可以使用重试机制来为用户提高体验。 1.引用依赖 <dependency><groupId>org.springframework.retry</groupId><artifactId>spring-retry</a…

单片机学习(18)--红外遥控器

红外遥控器 17.1红外遥控的基础知识1.红外遥控简介2.硬件电路3.基本发送和接收4.NEC编码5.遥控器键码6.51单片机的外部中断7.外部中断寄存器 17.2红外遥控的程序代码1.红外遥控&#xff08;1&#xff09;工程目录&#xff08;2&#xff09;main.c函数&#xff08;3&#xff09;…

vue 实战 tab标签页+el-card+流式布局+异步接口调用

<template><div><!-- 布局按钮 --><el-button click"dialogVisible true">布局配置查看</el-button><!-- 布局配置对话框 --><el-dialog :visible.sync"dialogVisible" title"布局配置查看" width"…

Invalid bound statement (not found)

Invalid bound statement (not found) 首先申明的是这个错误一般是使用mybatis方法没有找到或者参数不匹配等原因造成的&#xff01; 原本项目是使用eclipse运行&#xff0c;导入到idea之后&#xff0c;项目启动就报错 …Invalid bound statement (not found)… 解决办法&#…