当前位置: 首页 > 工具软件 > 定位功能 > 使用案例 >

腾讯地图实现定位功能

翟昊明
2023-12-01

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)

}

 类似资料: