今天就跟大家聊聊有关如何在Html5中实现定位，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。
1. 在浏览器中，通过腾讯地图jsapi获取位置
1.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.js
const qq = window.qq
var geolocation = null
if (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获取位置信息
2.1 微信 js-sdk 相关的准备工作
2.1.1 引入js文件
/**
* 微信sdk异步加载
* @param {*} src
* @param {*} callback api接口
*/
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)
}2.1.2 注入权限验证配置
所有需要使用JS-SDK的页面必须先注入配置信息，否则将无法调用。通常是通过后台接口获取配置信息。
/**
* 注入权限验证配置
* @param {object} 微信 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.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}`)
})
})2.3 根据不同运行环境调用不同的定位方法
// public.js
/**
* UA枚举
*/
const UA = {
/**
* 微信h6
*/
WECHAT: 'WECHAT',
/**
* 支付宝h6
*/
ALIPAY: 'ALIPAY',
/**
* 其他
*/
OTHERS: 'OTHERS'
}
/**
* 判断客户端运行环境 这里只判断微信和浏览器h6
*/
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.js
/**
* 唤起微信api
* @param {*} _href 当前页面url
* @param {*} options 分享信息
* @param {*} apiType 调用api类型
*/
export 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.js
import { getUserAgent, handlerLoadScript } from '@/module/utils'
import { handleWXSDKCall } from '@/module/utils/wechat/wxJsApiSdk'
import UA from '@/module/enums/userAgent'
import TMap from '@/module/utils/tMap'
/**
* 对外暴露的获取位置方法
* @return Promise resolve一个 positionData 对象 lat-纬度 lng-经度
*/
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. 页面调用
3.1 绑定方法到 Vue 原型上
import getLocation from '@/module/utils/getLocation' Vue.prototype.$getLocation = getLocation
3.2 在页面组件中调用
onShow() {
// 获取位置信息后请求后台接口
this.$getLocation()
.then(res => {
console.warn('首页获取位置成功', res)
this.latitude = res.lat
this.longitude = res.lng
// 这里根据获取到的经纬度请求后台接口...
})
.catch(err => {
console.error('首页获取位置失败', err)
// 错误处理
})
}看完上述内容，你们对如何在Html5中实现定位有进一步的了解吗？如果还想了解更多知识或者相关内容，请关注亿速云行业资讯频道，感谢大家的支持。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
