结尾附视频腾讯位置 - 逆地址解析( 二 ) _坐标

没接触过地图构建的小伙伴可以进入传送门：腾讯位置 - 地图构建入门（结尾附视频）。

文章插图
src="http://img.gansulong.com/230625/1115442352-1.jpg">>//定义初始中心点坐标var center = new TMap.LatLng(40.046394, 116.285335);//定义全局变量mapvar map;//地图初始化函数function initMap() {//调用 TMap.Map() 构造函数创建地图map = new TMap.Map(document.getElementById('container'), {center: center, //设置地图中心点坐标zoom: 17, //设置地图缩放级别pitch: 43.5, //设置俯仰角rotation: 45 //设置地图旋转角度});}// 页面加载完成后执行$(function() {//初始化显示地图initMap();//初始化labelvar label = new TMap.MultiLabel({id: 'label-layer',map: map,styles: {//样式可以进行自定义'label': new TMap.LabelStyle({'color': '#3777FF', //颜色属性'size': 20, //文字大小属性'offset': {x: 0,y: 0}, //文字偏移属性单位为像素'angle': 0, //文字旋转属性'alignment': 'center', //文字水平对齐属性'verticalAlignment': 'middle' //文字垂直对齐属性})}});//定义事件处理方法var mousemoveHandler = function(evt) {var lat = evt.latLng.getLat().toFixed(6);var lng = evt.latLng.getLng().toFixed(6);label.updateGeometries([{'id': 'label_1', //点图形数据的标志信息'styleId': 'label', //样式id'position': new TMap.LatLng(lat, lng), //标注点位置'content': lat + ',' + lng //标注文本}]);}var mouseleaveHandler = function(evt) {label.remove(['label_1']);}var clickHandler = function(evt){var lat = evt.latLng.getLat().toFixed(6);var lng = evt.latLng.getLng().toFixed(6);//此处调用接口查询数据，在地图上进行文本标记}//Map实例创建后，通过on方法绑定点击事件map.on("mousemove", mousemoveHandler);map.on("click",clickHandler);//鼠标移出地图区域后清除label$("#container").on("mouseleave", mouseleaveHandler);});

效果：
2. 位置点击查询
接下来补全点击事件，在调试完成后，如果不需要实时显示坐标，可以移除鼠标滑动事件。

var clickHandler = function(evt){var lat = evt.latLng.getLat().toFixed(6);var lng = evt.latLng.getLng().toFixed(6);//此处调用接口查询数据，在地图上进行文本标记$.ajax({url:"https://apis.map.qq.com/ws/geocoder/v1/",type:"get",dataType:"json",data:{"key":"替换为自己的key","location":lat + "," + lng},success:function(resp){//在地图上放置另一个标记，注意区分idlabel.updateGeometries([{'id': 'label_2', //点图形数据的标志信息'styleId': 'label', //样式id'position': new TMap.LatLng(lat, lng), //标注点位置'content': resp.result.address//标注文本}]);}});}

效果如下：
移除鼠标滑动事件后：
本例中只是用了返回数据中的作为显示信息，具体效果可以进一步调整。
3. 完整案例源码
五、视频直达
视频地址：，喜欢的小伙伴儿一定要三连加关注哦~
腾讯位置 - 逆地址解析
写在结尾：作者力求做到将每个知识点细化，并且对于有关联的知识点都会使用传送门挂载链接。文章采用：“文字 + 配图 + 视频”的方式来进行展现，均是挤时间所作，希望看到这里能留下评论点个赞，略表支持！
【结尾附视频腾讯位置 - 逆地址解析】扫描下方二维码，加入官方粉丝微信群，可以与我直接交流，还有更多福利哦~

结尾附视频 腾讯位置 - 逆地址解析( 二 )

结尾附视频腾讯位置 - 逆地址解析( 二 )