html5绝对定位代码,css3 定位

　　背景

　　给新公司的第二个项目是和朋友一起做一个H5商城，主要是微信，但也要考虑其他浏览器。其中，主页需要找到最近的商店，并根据当前用户的经纬度进行显示。前端需要做的就是获取用户的经纬度，然后查询后台界面，渲染页面。

　　目标与分析

　　我们的目标是，封装后只需要调用一个方法就可以得到返回的位置信息。

　　我们要做的就是针对不同的终端(微信H5等浏览器环境)封装不同的类，然后通过一个方法用UA来区分，调用不同环境对应的类来得到位置。

　　在微信内部，经过反复实践，无论是通过原生HTML5定位，还是通过第三方(如百度或腾讯地图)jsapi获取位置，不仅定位时间长，还经常出现定位失败的情况，严重影响用户体验，尤其是对于大部分信息流依赖位置的商城首页，完全无法接受。所以在微信中，我们只有微信sdk的选择；

　　至于浏览器，可以通过第三方地图jsapi或者定位组件稳定快速的获取位置信息。为了尽可能与微信保持一致，我们选择腾讯地图jsapi。

　　解决方案

　　说话便宜，给我看代码。事不宜迟，直接进入代码：

　　1. 在浏览器中，通过腾讯地图jsapi获取位置

　　1.1将腾讯地图jsapi引入项目的html模板文件中。

　　！-index.html-script charset= utf-8 src= https://map . QQ . com/API/js？V=2.expkey=腾讯地图keyreferer=应用名称/脚本描述：

　　要使用腾讯地图jsapi，需要去腾讯地图开放平台申请自己的账号，然后创建自己的应用，用腾讯地图key和创建的应用名称替换上面的值。

　　1.2 调用获取位置接口，获取位置信息

　　为了便于重用，我们单独封装了腾讯地图jsapi的一个类，命名为tMap.js

　　//tmap . js const QQ=window . qqvar geolocation=nullif(QQ QQ . maps){//初始化位置组件geolocation=new QQ . maps . geolocation( Qvlbz-yuulr-Oum w7-wkxfd-4 suws-udbia ， mymap )} class tmap {//获取位置计数器。定位失败时，累计次数超过3次，则不继续。定位失败错误getPositionCount=0//get location(){ Return New Promise((resolve，Reject))={//定位成功回调this . getmaplocation(resolve，Reject)} }//调用腾讯地图获取位置getmaplocation(success，Fail) {const _self=this //定位成功回调const show position=position={ uni . set storage({ key: position Data ，Data: position})成功(position)}//定位失败回调const showErr=(err)=//如果定位失败3次以上， 抛出错误或继续获取定位信息if(this . getpositioncount 3){ Fail( 3次以上定位失败)} else {//定位失败recursion _ self . getpositioncount=_ self . getpositioncount 1 _ self . getmaplocation(success，Fail)}} //调用腾讯的web定位组件获取位置信息if(geolocation){ geolocation . getiplocation(showposition，showerr，{timeout: 6000，//location time out unit msfailtipflag:true } } }导出默认Newtmap () 010

　　2.1微信js-sdk相关准备工作

　　2 . 1 . 1 js文件简介

　　/** * 微信软件开发工具包异步加载* @param {*} src * @param {*}回调美国石油学会(American Petroleum Institute)接口*/export常量处理程序加载脚本=callback={ const src=` https://RES . wx。QQ。com/open/js/jweixin-1。4 .0 .js ` if(！(回调类型===函数){ callback=function(){ } } var check=document。查询选择器all(` script[src= $ { src } ]`)if(检查。长度0){ check[0].addEventListener(load ，function(){ callback()})callback()return } var script=document。createelement( script )var head=document。getelementsbytagname( head )[0]脚本。type= text/JavaScript 脚本。charset= UTF-8 脚本。src=src if(脚本。addevent listener){ script。addevent listener( load，function(){ callback()}，false)} else if(script。附加事件){脚本。附加事件( onreadystatechange ，函数注入权限验证配置

　　所有需要使用全功能型的页面必须先注入配置信息，否则将无法调用。通常是通过后台接口获取配置信息。

　　/** * 注入权限验证配置* @param {object}微信全功能型权限验证配置*/export const wx configinfo=config={ wx。config({ debug:false，//开启调试模式，调用的所有美国石油学会(美国石油协会)的返回值会在客户端警报出来，若要查看传入的参数，可以在个人计算机端打开，参数信息会通过原木打出，仅在个人计算机端时才会打印appId: config.appId，timestamp:parse int(config。时间戳)，非中心配置。non centr，signature: config.signature，jsApiList: [ //需要使用的支付插件列表. getLocation //获取地理位置] })}2.2 调用美国石油学会(美国石油协会)获取位置信息

　　/** * 微信获取位置*/export const handleGetLocation=(config)={ return new Promise((resolve，reject)={ wxconfigInfo(config)wx。ready(函数(){ wx。获取位置({ type: WGS 84 ，//默认为wgs84的全球定位系统坐标，如果要返回直接给openLocation用的火星坐标，可传入gcj02 成功：函数{ console.warn(微信软件开发工具包定位成功，res)解析({ lat: res.latitude，//纬度液化天然气：参考经度，//经度速度：分辨率速度，//速度，以米/每秒计精度：分辨率精度//位置精度}) }，失败：function(err){ console。错误(微信软件开发工具包定位失败，err)拒绝(err)} })wx。错误(函数(err){//配置信息验证失败会执行错误函数，如签名过期导致验证失败，具体错误信息可以打开配置的调试模式查看，也可以在返回的表示留数参数中查看，对于矿泉可以在这里更新签名。console.log(wxjsapi-error=，err)reject(` wxjsapi-error:$ { err } `)})})2.3根据不同运行环境调用不同的定位方法

　　//public.js/** * UA枚举*/const UA={ /** *微信h5 */微信：微信,/** *支付宝h5 */支付宝：支付宝,/** *其他*/OTHERS: OTHERS}/** *判断客户端运行环境这里只判断微信和浏览器H5 */export const get user agent=()={ var user agent=navigator。用户代理。tolowercase()if(用户代理。匹配(/支付宝/i)=支付宝){ return UA .支付宝} else if(用户代理。match(/微信使/I)=微信使){ return UA .微信}否则{返回UA .其他} }//js-sdk.js/** *唤起微信api * @param {*} _href当前页面url * @param {*}选项分享信息* @param {*} apiType调用美国石油学会(美国石油协会)类型*/export const handleWXSDKCall=(_ href，apiType，options)={ return new Promise((resolve，reject)={ //通过后台接口获取配置信息微信服务。符号(_href).然后(RES={ if(RES){ if(API type=== location ){ handleGetLocation(RES).然后((res)={ resolve(res) }).catch(err={ reject(err)} } .catch(err={ reject(` err-sign:$ { err } `)uni。显示吐司({ title:err。数据。代码错误。数据。msg，mask: true，icon: none })} }//获取位置。来自 @/module/utils 的jsimport { getuser agent，handlerLoadScript }从 @/module/utils/微信/wxJsApiSdk 从 @ 导入UA/module/enums/用户代理从 @ 导入TMap/import对外暴露的获取位置方法* @退货承诺解决一个位置数据对象纬度-纬度液化天然气-经度*/const get location=()={ return new Promise((resolve，reject)={ console.log(进入全局获取用户位置方法)常量存储数据=uni。getstoragesync( position data )const user agent=get user agent()if(存储数据){ resolve(存储数据)} else {//根据环境判断如果在微信内使用微信软件开发工具包其他使用腾讯地图定位组件if (userAgent===UA .微信){ handlerLoadScript(()={ handleWXSDKCall(window。位置。href，“位置”).然后((RES)={ uni。setstoragesync( position data ，res) resolve(res) }).catch(err={ reject(err)} } } else { tmap。获取位置().然后(RES={ uni。setstoragesync( position data ，res) resolve(res) }).catch((err)={ reject(err)} } }导出默认获取位置2. 在微信 webview 中， 通过微信sdk获取位置信息

　　3.1 绑定方法到某视频剪辑软件原型上

　　从" @/module/utils/getLocation"vue。原型导入获取位置，$getLocation=getLocation3.2在页面组件中调用

　　onShow() { //获取位置信息后请求后台接口这个getLocation().然后(res={ console.warn(首页获取位置成功，RES)这个。纬度=RES . lat这个。经度=RES . LNG//这里根据获取到的经纬度请求后台接口.}) .catch(err={ console.error(首页获取位置失败，err) //错误处理})}3. 页面调用

　　遇到的坑以及需要注意的点：

　　使用微信软件开发工具包获取位置信息需要按顺序完成以下步骤：

　　异步加载微信软件开发工具包通过接口获取配置信息，配置微信软件开发工具包在wx。就绪回调中调用方法必须严格按顺序完成以上的三个步骤，否则是无法调用微信软件开发工具包的功能的。

　　总之，通过这篇文章，可以解决H5定位99% 以上的应用场景。

　　以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。