今天就跟大家聊聊有关如何在Html5中实现定位，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。
1. 在浏览器中，通过腾讯地图jsapi获取位置
1 在项目的 html 模版文件中引入腾讯地图 jsapi
<!-- index.html --><script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=腾讯地图key&referer=应用名称"></script>说明：
使用腾讯地图 jsapi, 需要先去腾讯地图开放平台申请自己的账号，然后创建自己的应用，将腾讯地图key 和创建的应用名称替换上面的值。
1.2 调用获取位置接口，获取位置信息
为了方便复用，我们单独封装一个腾讯地图 jsapi 的类，命名为 tMap.js
// tMap.jsconst qq = window.qqvar geolocation = nullif (qq && qq.maps) { // 初始化定位组件 geolocation = new qq.maps.Geolocation( 'QVLBZ-YUULR-OUMW7-WKXFD-4SUWS-UDBIA', 'mymap' )}class TMap { // 获取定位计数器 用于定位失败时累计次数 超过3次后不再继续，抛出定位失败错误 getPositionCount = 0 // 对外暴露的获取位置接口 getLocation () { return new Promise((resolve, reject) => { // 定位成功回调 this.getTMapLocation(resolve, reject) }) } // 调用腾讯地图获取位置 getTMapLocation (success, fail) { const _self = this // 定位成功回调 const showPosition = position => { uni.setStorage({ key: 'positionData', data: position }) success(position) } // 定位失败回调 const showErr = (err) => // 如果获取定位失败超过3次 抛出错误 否则继续获取定位信息 if (this.getPositionCount > 3) { fail('超过3次 获取定位失败') } else { // 定位失败递归 _self.getPositionCount = _self.getPositionCount + 1 _self.getTMapLocation(success, fail) } } // 调用腾讯web定位组件获取位置信息 if (geolocation) { geolocation.getIpLocation(showPosition, showErr, { timeout: 6000, // 定位超时时长 单位ms failTipFlag: true }) } }}export default new TMap()2. 在微信 webview 中, 通过微信sdk获取位置信息
1 微信 js-sdk 相关的准备工作
2.1.1 引入js文件
export const handlerLoadScript = callback => { const src = `https://res.wx.qq.com/open/js/jweixin-1.4.0.js` if (!(typeof callback === 'function')) { callback = function() {} } var check = document.querySelectorAll(`script[src="${src}"]`) if (check.length > 0) { check[0].addEventListener('load', function() { callback() }) callback() return } var script = document.createElement('script') var head = document.getElementsByTagName('head')[0] script.type = 'text/javascript' script.charset = 'UTF-8' script.src = src if (script.addEventListener) { script.addEventListener( 'load', function() { callback() }, false ) } else if (script.attachEvent) { script.attachEvent('onreadystatechange', function() { var target = window.event.srcElement if (target.readyState === 'loaded') { callback() } }) } head.appendChild(script)}1.2 注入权限验证配置
所有需要使用JS-SDK的页面必须先注入配置信息，否则将无法调用。通常是通过后台接口获取配置信息。
export const wxconfigInfo = config => { wx.config({ debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。 appId: config.appId, timestamp: parseInt(config.timestamp), nonceStr: config.nonceStr, signature: config.signature, jsApiList: [ // 需要使用的 jsapi 列表 ..., 'getLocation' // 获取地理位置 ] })}2 调用 api 获取位置信息
export const handleGetLocation = (config) => { return new Promise((resolve, reject)=>{ wxconfigInfo(config) wx.ready(function () { wx.getLocation({ type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02' success: function (res) { console.warn('微信sdk定位成功', res) resolve({ lat: res.latitude, // 纬度 lng: res.longitude, // 经度 speed: res.speed, // 速度，以米/每秒计 accuracy: res.accuracy // 位置精度 }) }, fail: function (err) { console.error('微信sdk定位失败', err) reject(err) } }) }) wx.error(function(err) { // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。 console.log('wxjsapi-error=', err) reject(`wxjsapi-error: ${err}`) }) })3 根据不同运行环境调用不同的定位方法
// public.jsconst UA = { WECHAT: 'WECHAT', ALIPAY: 'ALIPAY', OTHERS: 'OTHERS'}export const getUserAgent = () => { var userAgent = navigator.userAgent.toLowerCase() if (userAgent.match(/Alipay/i) == 'alipay') { return UA.ALIPAY } else if (userAgent.match(/MicroMessenger/i) == 'micromessenger') { return UA.WECHAT } else { return UA.OTHERS }}// js-sdk.jsexport const handleWXSDKCall = (_href, apiType, options) => { return new Promise((resolve, reject)=>{ // 通过后台接口获取配置信息 WeChatServivce.sign(_href) .then(res => { if (res) { if ( apiType === 'location' ) { handleGetLocation(res).then((res)=>{ resolve(res) }).catch(err=>{ reject(err) }) } } }) .catch(err => { reject(`err-sign: ${err}`) uni.showToast({ title: err.data.code + err.data.msg, mask: true, icon: 'none' }) }) })}// getLocation.jsimport { getUserAgent, handlerLoadScript } from '@/module/utils'import { handleWXSDKCall } from '@/module/utils/wechat/wxJsApiSdk'import UA from '@/module/enums/userAgent'import TMap from '@/module/utils/tMap'const getLocation = () => { return new Promise((resolve, reject) => { console.log('进入全局获取用户位置方法') const storageData = uni.getStorageSync('positionData') const userAgent = getUserAgent() if (storageData) { resolve(storageData) } else { // 根据环境判断 如果在微信内使用微信sdk 其他使用腾讯地图定位组件 if (userAgent === UA.WECHAT) { handlerLoadScript(() => { handleWXSDKCall(window.location.href, 'location').then((res) => { uni.setStorageSync('positionData', res) resolve(res) }).catch(err => { reject(err) }) }) } else { TMap.getLocation().then(res => { uni.setStorageSync('positionData', res) resolve(res) }).catch((err) => { reject(err) }) } } })}export default getLocation3. 页面调用
1 绑定方法到 Vue 原型上
import getLocation from '@/module/utils/getLocation'Vue.prototype.$getLocation = getLocation2 在页面组件中调用
onShow() { // 获取位置信息后请求后台接口 this.$getLocation() .then(res => { console.warn('首页获取位置成功', res) this.latitude = res.lat this.longitude = res.lng // 这里根据获取到的经纬度请求后台接口... }) .catch(err => { console.error('首页获取位置失败', err) // 错误处理 })}看完上述内容，你们对如何在Html5中实现定位有进一步的了解吗？如果还想了解更多知识或者相关内容，请关注编程网行业资讯频道，感谢大家的支持。
