【腾讯地图】腾讯地图定位解析

记一次腾讯地图使用经验(代码片段)

实现的功能：

输入位置-> 地图marker定位到该位置

点击地图marker定位 -> 解析位置填充到输入框

首先引入api

<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=这里写你的key"></script>

初始化

init () {// 起始位置数据  this.longitude = 39.916527, this.latitude = 116.397128;this.myLatLng = new qq.maps.LatLng(this.longitude, this.latitude);const myOptions = {zoom: 10,center: this.myLatLng,mapTypeId: qq.maps.MapTypeId.ROADMAP,};// 初始化mapthis.map = new qq.maps.Map(document.getElementById('new-map'), myOptions);this.map.panTo(this.myLatLng);// 监听地图点击事件this.ListeningMapClick();// 初始化markerthis.marker = new qq.maps.Marker({position: this.myLatLng,map: this.map,});this.marker.setPosition(this.myLatLng);// 初始化geocoderthis.geocoder = new qq.maps.Geocoder();
}

监听点击事件，解析点击位置地址

ListeningMapClick() {qq.maps.event.addListener(this.map, 'click', event => {if (!this.marker) {this.marker = new qq.maps.Marker({position: event.latLng,map: this.map,});}// marker定位到点击位置this.marker.setPosition(event.latLng);// 转换成地址信息this.LatLng2address(event.latLng);});
}

经纬度解析地址

LatLng2address(latLng) {const { geocoder } = this;geocoder.getAddress(latLng);geocoder.setComplete(result => {this.addressValue = result.detail.address;});geocoder.setError( err => {Toast.info('解析地址出错');});
},

位置解析经纬度并且 marker定位到解析位置

address2LatLng(address, changeZoom = false) {const { marker, map, geocoder } = this;changeZoom && map.zoomTo(13);  // 地图放大geocoder.getLocation(address);geocoder.setComplete(result => {const { lat, lng } = result.detail.location;this.latitude = lat;this.longitude = lng;marker.setPosition(new qq.maps.LatLng(lat, lng));map.panTo(new qq.maps.LatLng(lat, lng));});geocoder.setError(err => {Toast.info('解析错误，请输入正确地址');this.addressValue = '';});
},

【腾讯地图】腾讯地图定位解析相关推荐

利用高德地图和腾讯地图的详细地址定位
今天要说的基于浏览器的定位,是通过高德地图通过浏览器定位来获取经纬度,然后利用腾讯地图的逆地址解析,将经纬度解析为详细的地址,使用高德地图时,需要先去高德开发者平台申请key码. 代码如下: < ...
vue使用腾讯地图获取经纬度和逆解析获取详细地址
vue使用腾讯地图获取经纬度和逆解析获取详细地址示例必须在腾讯api中申请自己的key 打开这个webservice用来逆解析详细地址下面是代码 1 , html创建放地图的容器 <div ...
vue - 实现 H5 网站使用腾讯地图，附带地图使用教程 / 当前用户 IP 定位获取位置信息教程（详细配置教程及运行示例源代码，保证新手小白 100% 成功）vue.js 或 nuxt.js都行
效果图百度的教程基本上都不行,本篇文章做优质教程,从 0-1 完整详细的配置流程及地图功能的使用方式. Vue.js 网站项目中,引入配置腾讯地图详细教程,并附带详细的地图使用及IP 定位等常见功能 ...
uniapp - 实现 H5 网站使用腾讯地图，附带地图使用教程 / 当前用户 IP 定位获取位置信息教程（详细配置教程及运行示例源代码，保证新手小白 100% 成功）
效果图百度的教程基本上都不行,本篇文章做优质教程,从 0-1 完整详细的配置流程及地图功能的使用方式. 实现了 uniapp h5网站项目中,引入配置腾讯地图详细教程,并附带详细的地图使用及IP 定 ...
高德h5地图api接口_html5通过腾讯地图、高德地图、百度地图开发api接口获取坐标对应的周边信息...
在通过 geolocation 获取到当前的 GPS 坐标后,需要通过"逆地理位置解析"才能得到街道对应的街道.建筑物.周边等相关信息. 下面我使用国内的三家主要的地图厂商(腾讯地 ...
通过腾讯地图、高德地图、百度地图开发接口获取坐标对应的周边相关信息
通过腾讯地图.高德地图.百度地图开发接口获取坐标对应的周边相关信息更新: 以前出于好意暴露了个人的KEY,现已被烂用.为不影响您的业务,请使用我的KEY的朋友去申请自己的KEY,我的KEY将在不久后 ...
腾讯推出产业版地图WeMap，“一张图”破局五大行业场景
在新兴技术与数据要素的加持下,新一代数字地图成为智慧产业快速发展的重要推手,将推动智慧城市.智慧交通.智慧商业.智慧文旅等领域不断落地. 11月10日,腾讯在京发布地图产业版(WeMap),WeMap ...
高德地图、百度地图、腾讯地图坐标相互转换
高德地图.百度地图.腾讯地图坐标相互转换 1.WGS-84原始坐标系,一般用国际GPS纪录仪记录下来的经纬度,通过GPS定位拿到的原始经纬度,Google和高德地图定位的的经纬度(国外)都是基于WGS ...
Android调用跳转百度地图、高德地图、腾讯地图进行目的地导航
Android App跳转百度地图.高德地图.腾讯地图进行目的地导航. 先放上百度.高德.腾讯地图调起API文档地址,有些参数不懂可以参考. 百度地图:http://lbsyun.baidu.com/ ...

【腾讯地图】腾讯地图定位解析

【腾讯地图】腾讯地图定位解析相关推荐

最新文章

热门文章