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

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

实现的功能：

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

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

首先引入api

<script charset="utf-8" src="=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 = '';});
},

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

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

实现的功能：

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

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

首先引入api

<script charset="utf-8" src="=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 = '';});
},