data(){
return{
mapUrl: 'https://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js'
}
}
this.getLocation() // 执行这个方法
(1)
getLocation(){ // 定义定位成功和失败各个情况将要执行的方法
var _this = this
let localCallback = () => getPosition(data => getGeoData(data), err => getGeoError(err))
addSrcTag(_this.mapUrl, localCallback)
let getGeoData = (data) => { //当定位成功的时候执行的方法
console.log('JS获取定位成功', data)
data.province // 省名字
data.city // 城市名字
data.lat // 纬度
data.lon // 经度
}
let getGeoError = (err) => { //当定位失败的时候执行的方法
console.log('js获取定位失败' ,err)
}
}
(2)
getPosition (cb, errcb){ // 执行开始定位的方法
let geolocation = new qq.maps.Geolocation('6IZBZ-JQ4WP-5SMD2-VJKOA-OYGFZ-26F5B', 'myapp') // key值和申请key值的名字
if(geolocation){ // 当传入值定位成功后
console.log("getPosition")
let options = { timeout:9000, failTipFlag:true } // 给的时间为9000,是否提示为true
geolocation.getLocation(position => {
console.log('success定位成功执行的方法', position)
let lon = position.lng // 经度
let lat = position.lat // 纬度
let city = position.city //城市名
let province = position.province // 省名字
let location = { lon, lat, city, province }
if (typeof cb === 'function') cb(location)
}, error => {
console.log('定位失败执行的方法 error', error)
if(typeof errcb === 'function') errcb(error)
}, options)
} else {
console.log('未获取位置对象')
}
}
(3)
addSrcTag(src, cb, error) { // 添加地址,方法
let script = document.createElement('script') //创建script对象标签
script.src = src // script的src赋值
console.log(script.src)
document.head.appendChild(script) // head追加script标签
script.onload = () => cb(error)
}