黄色网在线播放,韩国一级毛片在线高清免费 ,97欧美精品一区二区三区

使用騰訊地圖位置服務授權的主要場景包括：

高級功能使用，需要大量并發(fā)請求；
大型APP應用商店上架應用；
合規(guī)的項目交付；
地圖數(shù)據(jù)授權合規(guī)使用。

合規(guī)獲取授權的途徑

騰訊地圖提供基礎版和高級版兩種授權版本，99%的項目交付使用基礎版本即可滿足需求。

授權版本的選擇

授權版本的選擇
選擇正確的授權版本對于項目成本控制和功能實現(xiàn)至關重要。

合作獲取授權

與開發(fā)公司技術公司合作，可以幫助開發(fā)公司以合理的成本獲取正規(guī)的授權。

騰訊地圖位置服務的最新功能

騰訊地圖位置服務持續(xù)更新，帶來一系列新功能和開源組件，滿足開發(fā)者的多樣化需求。

獨家功能更新

獨家功能更新
最新的更新包括：

騰訊位置服務tlbs-map地圖組件庫正式開源；
地址輸入、地鐵圖、AI地圖插件等多個小程序插件；
uni-app成功完成騰訊位置服務web端接入。

H5地圖選取坐標點獲取位置信息實戰(zhàn)

本章節(jié)將詳細介紹如何使用騰訊地圖+逆地址解析的方式實現(xiàn)地圖選取坐標點獲取位置信息。

前言

本篇內(nèi)容圍繞騰訊地圖API，展示如何實現(xiàn)地圖選取坐標點獲取位置信息，未使用騰訊地圖的前端選點組件。

準備工作

登錄/注冊騰訊地圖開放平臺，已登錄的直接進入控制臺；
創(chuàng)建應用，已有應用的可跳過；
添加key，注意key是騰訊開發(fā)文檔免費獲取的；

代碼片段

以下使用vue實現(xiàn)騰訊地圖選取坐標點獲取位置信息的示例代碼。

html







    返回


  







    

        地址：{{address}}


    




地圖選擇地址

> css

```css

.my-btn {

        width: 2rem;

        height: 2rem;

        position: fixed;

        right: 2%;

        top: 70%;

        transform: translateY(-70%);

        font-size: .6rem;

        background-color: #fff;

        border-radius: 50%;

        display: flex;

        justify-content: center;

        align-items: center;

        color: #fff;

        font-weight: bold;

        box-sizing: border-box;

        padding: 0;

        background-image: linear-gradient(to right top, #0976F1, #228FF9, #2F9EFE);

        z-index: 999;

    }


const app = new Vue({
el: "#app",
data: {
clientW: document.documentElement.clientWidth,
clientH: document.documentElement.clientHeight,
mapStatus: false,
address:'',
lat: 0,
lng: 0,
marker: null,
mapContent: null
},
created: function () {

    },

    mounted: function () {

        //頁面加載完，先獲取用戶當前位置

        this.getUserLocation();

    },

    methods: {

        //獲取用戶當前位置

        getUserLocation() {

            var geolocation = new qq.maps.Geolocation("替換為你的key", "應用名（注意不是key名稱）");

            var options = { timeout: 8000 };

            geolocation.getLocation(this.showPosition, this.showErr, options);

        },

        //成功返回的信息，挑取自己所需要的

        showPosition(position) {

            this.lat = position.lat;

            this.lng = position.lng;

            var location = position.lat + ',' + position.lng;

            //這里的判斷 解決微信開發(fā)者工具和pc端拿不到地址信息的情況

            if (position.addr == '') {

                this.addressInfo(location);

            } else {

                this.address = position.addr;

            }

        },

        //定位失敗再請求定位

        showErr() {

            this.getUserLocation();

        },

        //初始化地圖

        mapInit() {

            //步驟：定義map變量 調(diào)用 qq.maps.Map() 構造函數(shù) 獲取地圖顯示容器

            //設置地圖中心點

            var myLatlng = new qq.maps.LatLng(this.lat, this.lng);

            var myOptions = {

                zoom: 18,               //設置地圖縮放級別

                center: myLatlng,      //設置中心點樣式

                mapTypeId: qq.maps.MapTypeId.ROADMAP  //設置地圖樣式詳情參見MapType

            }



            var that = this;

            that.$nextTick(function () {



                //獲取dom元素添加地圖信息

                that.mapContent = new qq.maps.Map(document.getElementById("container"),myOptions);



                //給定位的當前位置添加圖片標注

                that.marker = new qq.maps.Marker({

                    position: myLatlng,

                    map: that.mapContent,

                    draggable: true, //允許鼠標拖動

                    //content: that.address

                });



                //監(jiān)聽地圖點擊事件

                qq.maps.event.addListener(that.mapContent, 'click', function (event) {

                    //我這里使用了vant的消息提示組件，您也可以自己寫一個

                    vant.Dialog.confirm({

                        message: '確認選擇該地點嗎？',

                        showConfirmButton: true,

                        showCancelButton: true,

                        cancelButtonText: '取消'

                    }).then(function (res) {

                        if (!that.marker) {

                            that.marker = new qq.maps.Marker({

                                position: event.latLng,

                                map: that.mapContent

                            });

                        }

                        that.marker.setPosition(event.latLng);



                        var longitude = event.latLng.getLat();

                        var latitude = event.latLng.getLng();

                        //console.log("經(jīng)度: " + longitude + "," + "緯度: " + latitude);

                        var location = longitude + ',' + latitude;

                        that.addressInfo(location);



                    }).catch(function () {

                        // //console.log('用戶點擊了取消');

                    });

                })

           });

        },

        //逆地址解析

        addressInfo(location) {

            var that = this;

            $.ajax({

                type: 'GET',

                url: https://apis.map.qq.com/ws/geocoder/v1/?location=${location}&output=jsonp&key=替換為你的key, //注意遵循此格式
                dataType: 'jsonp', //注意dataType必須為jsonp
                success: function (res) {
                    //console.log('地址解析信息', res);
                    if (res.message == "query ok" && res.result) {
                        that.address = res.result.address;
                        that.mapStatus = false;
                    } else {
                        that.mapStatus = false;
                        vant.Toast(res.message + '請聯(lián)系管理員！');
                    }
                },
                error: function (error) {
                   vant.Toast('遇到未知錯誤！請聯(lián)系管理員');
                }
            });
        },
        //打開地圖
        openMap() {
            this.mapStatus = true;
            this.mapInit();
        },
    }
});

### 注意事項

線上調(diào)試開發(fā)時，需要注意跨域問題和域名配置。



## 騰訊地圖API的開源項目

騰訊宣布開源tlbs-map，一個基于騰訊位置服務地圖API開發(fā)的web端地圖組件庫，支持多種技術棧。



### tlbs-map地圖組件庫

![tlbs-map地圖組件庫](https://explinks-blog.oss-cn-beijing.aliyuncs.com/md/2025/01/1f7556641ea6ed6de1a415bb771189ba.png)

tlbs-map地圖組件庫支持在網(wǎng)頁繪制地圖并在地圖上繪制點、線、面、熱力圖等效果，支持Vue2、Vue3、React等業(yè)界主流技術棧。



### Javascript API GL

Javascript API GL是基于WebGL技術打造的3D版地圖API，提供豐富的功能接口，使開發(fā)者更加容易的實現(xiàn)產(chǎn)品構思。



### 項目地址

- Vue 組件庫：[GitHub - Tencent/tlbs-map-vue](https://github.com/Tencent/tlbs-map-vue)

- React 組件庫：[GitHub - Tencent/tlbs-map-react](https://github.com/Tencent/tlbs-map-react)



### FAQ

1. **問：騰訊地圖位置服務授權如何申請？**

   - 答：您需要登錄騰訊地圖開放平臺，創(chuàng)建應用并添加key，即可獲得授權。

2. **問：騰訊地圖位置服務有哪些高級功能？**

   - 答：騰訊地圖位置服務提供多種高級功能，包括但不限于地圖數(shù)據(jù)授權合規(guī)使用、大量并發(fā)請求處理等。

3. **問：如何在項目中使用騰訊地圖API？**

   - 答：在項目中使用騰訊地圖API，首先需要在騰訊地圖開放平臺獲取key，然后根據(jù)官方文檔集成API到您的項目中。

4. **問：騰訊地圖位置服務支持哪些技術棧？**

   - 答：騰訊地圖位置服務支持Vue2、Vue3、React等業(yè)界主流技術棧，并通過開源項目tlbs-map提供支持。

5. **問：如何獲取騰訊地圖位置服務的最新功能更新？**

   - 答：您可以關注騰訊地圖官方文檔和GitHub項目，以獲取最新功能更新和開源組件。