腾讯地图位置服务的深度解析与应用实践

在数字化时代，位置服务已成为我们日常生活中不可或缺的一部分。腾讯地图作为国内领先的地图服务提供商，其位置服务授权和应用实践备受关注。本文将详细解析腾讯地图位置服务的授权机制、使用场景、最新功能更新，并提供实际的开发案例和FAQ，帮助开发者更好地理解和应用腾讯地图位置服务。

腾讯地图位置服务授权概览

随着商业化步伐加快，许多应用中嵌入地图API调用次数不断增加，对高级功能的需求也日益增长。腾讯地图位置服务授权成为企业和开发者关注的焦点。

授权的必要性

腾讯地图位置服务授权对于保护地图数据的合规使用、确保项目的合规交付以及使用高级功能至关重要。

授权使用场景

授权使用场景
使用腾讯地图位置服务授权的主要场景包括：

高级功能使用，需要大量并发请求；
大型APP应用商店上架应用；
合规的项目交付；
地图数据授权合规使用。

合规获取授权的途径

腾讯地图提供基础版和高级版两种授权版本，99%的项目交付使用基础版本即可满足需求。

授权版本的选择

授权版本的选择
选择正确的授权版本对于项目成本控制和功能实现至关重要。

合作获取授权

与开发公司技术公司合作，可以帮助开发公司以合理的成本获取正规的授权。

腾讯地图位置服务的最新功能

腾讯地图位置服务持续更新，带来一系列新功能和开源组件，满足开发者的多样化需求。

独家功能更新

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

腾讯位置服务tlbs-map地图组件库正式开源；
地址输入、地铁图、AI地图插件等多个小程序插件；
uni-app成功完成腾讯位置服务web端接入。

H5地图选取坐标点获取位置信息实战

本章节将详细介绍如何使用腾讯地图+逆地址解析的方式实现地图选取坐标点获取位置信息。

前言

本篇内容围绕腾讯地图API，展示如何实现地图选取坐标点获取位置信息，未使用腾讯地图的前端选点组件。

准备工作

登录/注册腾讯地图开放平台，已登录的直接进入控制台；
创建应用，已有应用的可跳过；
添加key，注意key是腾讯开发文档免费获取的；

代码片段

以下使用vue实现腾讯地图选取坐标点获取位置信息的示例代码。

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;

            //这里的判断 解决微信开发者工具和pc端拿不到地址信息的情况

            if (position.addr == '') {

                this.addressInfo(location);

            } else {

                this.address = position.addr;

            }

        },

        //定位失败再请求定位

        showErr() {

            this.getUserLocation();

        },

        //初始化地图

        mapInit() {

            //步骤：定义map变量 调用 qq.maps.Map() 构造函数 获取地图显示容器

            //设置地图中心点

            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

                });



                //监听地图点击事件

                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("经度: " + 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 + '请联系管理员！');
                    }
                },
                error: function (error) {
                   vant.Toast('遇到未知错误！请联系管理员');
                }
            });
        },
        //打开地图
        openMap() {
            this.mapStatus = true;
            this.mapInit();
        },
    }
});

### 注意事项

线上调试开发时，需要注意跨域问题和域名配置。



## 腾讯地图API的开源项目

腾讯宣布开源tlbs-map，一个基于腾讯位置服务地图API开发的web端地图组件库，支持多种技术栈。



### tlbs-map地图组件库

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

tlbs-map地图组件库支持在网页绘制地图并在地图上绘制点、线、面、热力图等效果，支持Vue2、Vue3、React等业界主流技术栈。



### Javascript API GL

Javascript API GL是基于WebGL技术打造的3D版地图API，提供丰富的功能接口，使开发者更加容易的实现产品构思。



### 项目地址

- 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. **问：腾讯地图位置服务授权如何申请？**

   - 答：您需要登录腾讯地图开放平台，创建应用并添加key，即可获得授权。

2. **问：腾讯地图位置服务有哪些高级功能？**

   - 答：腾讯地图位置服务提供多种高级功能，包括但不限于地图数据授权合规使用、大量并发请求处理等。

3. **问：如何在项目中使用腾讯地图API？**

   - 答：在项目中使用腾讯地图API，首先需要在腾讯地图开放平台获取key，然后根据官方文档集成API到您的项目中。

4. **问：腾讯地图位置服务支持哪些技术栈？**

   - 答：腾讯地图位置服务支持Vue2、Vue3、React等业界主流技术栈，并通过开源项目tlbs-map提供支持。

5. **问：如何获取腾讯地图位置服务的最新功能更新？**

   - 答：您可以关注腾讯地图官方文档和GitHub项目，以获取最新功能更新和开源组件。