腾讯地图获取当前定位的经纬度、地址的详细名称和地图上的显示

具体步骤：

1、申请腾讯地图的开发者key  https://lbs.qq.com/console/mykey.html?console=mykey

2、引用腾讯地图的 cdn 链接

• 前端定位组件：https://lbs.qq.com/tool/component-geolocation.html
• 逆地址解析(坐标位置描述)：https://lbs.qq.com/webservice_v1/guide-gcoder.html

3、发送key给腾讯地图的服务端，获取定位信息

var geolocation = new qq.maps.Geolocation("开发者key", "myapp");

4、调用逆地址解析的方法

// 逆地址解析(经纬度到地名转换过程)
geocoder = new qq.maps.Geocoder({
    complete: function(res) {
        console.log(res)    
    }
});

效果：

 

5、在腾讯地图上标志位置，添加提示

// 标志位置
var center = new qq.maps.LatLng(lat, lng);
var map = new qq.maps.Map(document.getElementById('container'), {
    center: center,
    zoom: 13
});
//创建标记
var marker = new qq.maps.Marker({
    position: center,
    map: map
});
//添加到提示窗
var info = new qq.maps.InfoWindow({
    map: map
});
//获取标记的点击事件
qq.maps.event.addListener(marker, 'click', function() {
    info.open();
    info.setContent('
' + res.detail.address + '
');
    info.setPosition(center);
});

效果：

注意事项：

1、定位的时候，必须要跑起本地服务（或者放到线上），否则会定位失败。【可使用Vue项目跑本地服务，或者用node.js的http-server跑本地服务】

2、腾讯地图不再支持http的域名请求定位服务，使用本地 http 域名进行定位，会影响到定位的偏差。

完整dome代码：