JP-ChargeTeam51/pages/navigation/index.vue

<template>
	<view>
			<view id="container" :style="myStyle"></view>
		<button @click="gotoBtn">前往某地</button>
		<button @click="searchBtn">查询距离某地</button>
		<button @click="getPoint(true)">获取自身定位(需要用微信打开)</button>
		<button @click="getPositionByLonLats()">定位转换文字</button>
		
		{{message}}
	</view>
</template>

<script>
	import * as WxJsApi from '@/utils/wxJsApi.js'
	
	import MapLoader from '@/utils/AMap'
	export default {
		name:"Carmap",
		
		data() {
			return {
				myStyle:"width: 100%; height: 340px;",
				longitude: 112.276527,
				latitude: 30.306427,
				longitude2: 112.276527,
				latitude2: 30.306427,
				message:"",
				AMap:null,
				marker:null,
			}
		},
		onReady() {
			WxJsApi.getWxConfig(['getLocation','addEventListener']).then((res)=>{
			
				// this.message=JSON.stringify(res)
				// uni.showToast({
				// 	title:JSON.stringify(res)
				// })
				//(res)
			 
			}).catch(error => {
					//(res)
			})
			
		},
		methods:{
			//获取定位地址
			getPositionByLonLats() {
				var _this = this;
				MapLoader().then(AMap => {
					var lnglatXY =//[_this.longitude, _this.latitude]
					 [_this.longitude2, _this.latitude];
					AMap.service('AMap.Geocoder', function() {
						let geocoder = new AMap.Geocoder({});
						geocoder.getAddress(lnglatXY, function(status, result) {
							//(lnglatXY);
							//(status, result);
							if (status === 'complete' && result.info === 'OK') {
								var address = result.regeocode.formattedAddress;
								//(address);
								_this.message= address;
							
							} else {
								_this.message= '无法获取定位';
							}
						});
					});
				}).catch(error => {
					//(error)
				})
			},
			getPoint() {
 			
				
				WxJsApi.getLocation().then((res) => {
					
					var latitude = parseFloat(res.latitude);
					var longitude = parseFloat(res.longitude);
			
					this.latitude2 = latitude;
					this.longitude2 = longitude;
					uni.showToast({
						title:JSON.stringify(res)
					})
					this.message=JSON.stringify(res)
				}).catch(error => {
					uni.showToast({
						title:JSON.stringify(error)
					})					
				})
			},
			searchBtn(){
				var _this = this;
				MapLoader().then(AMap1 => {
					
					this.AMap=AMap;
				
					var map=new AMap.Map("container", {
						center: [116.397559, 39.89621],
						zoom: 14
					});  
					AMap.plugin('AMap.Driving', function() {
					  var driving = new AMap.Driving({
					    // 驾车路线规划策略，AMap.DrivingPolicy.LEAST_TIME是最快捷模式
					    policy: AMap.DrivingPolicy.LEAST_TIME
					  })
					  
					 var startLngLat = [116.379028, 39.865042]
					 var endLngLat = [116.427281, 39.903719]
					 
					  driving.search(startLngLat, endLngLat, function (status, result) {
							//(result)
							//(result.routes[0].time)//秒
							//(result.routes[0].distance)//米
							uni.showToast({
								title:result.routes[0].time+"秒，"+result.routes[0].distance+"米"
							})
					  })
					  
					  var startLngLat2 = [_this.longitude, _this.latitude]
					  var endLngLat2 = [_this.longitude2, _this.latitude2]
					
					  
					  driving.search(startLngLat2, endLngLat2, function (status, result) {
					  							//(result)
					  							//(result.routes[0].time)//秒
					  							//(result.routes[0].distance)//米
					  							uni.showToast({
					  								title:result.routes[0].time+"秒，"+result.routes[0].distance+"米"
					  							})
					  })
					})
					
				
				}, e => {
					//_this.mui.toast('地图加载失败');
					//('地图加载失败', e)
				})
			},
			gotoBtn(){
				var _this = this;
				MapLoader().then(AMap => {
					
					this.AMap=AMap;
				
					var marker=new AMap.Marker({
						
						position: [this.longitude, this.latitude],
					
					});
					 marker.markOnAMAP({
					        position: marker.getPosition(),
					       // name:'首开广场'//name属性在移动端有效
					    })
				 
				}, e => {
					//_this.mui.toast('地图加载失败');
					//('地图加载失败', e)
				})
				
			}
		},
	}
</script>

<style>
	
</style>