uniapp使用高德地图

uni中使用地图还是挺麻烦的，文档还要借鉴人家小程序的文档

先做最基本的地图

首先在高德地图的控制台里下载小程序的SDK（不管你是不是开发小程序，都是这个）
点这里直接下载
然后把压缩包里的amap-wx.js放到工程的common目录下
不添加这个的话没法用高德地图提供的一些方法

制作地图页的时候建议使用nvue页面，即使原来的页面都是vue也没关系，因为map的好多属性和方法不支持vue页面

map的相关属性看官方文档
组件控制方法也在官方文档

地图是用uniapp的map组件加载出来的，所以使用的时候直接写一个map标签就行了，script中引入amap-wx.js文件

<template>
	<view class="map">
		<map
			id="my-map"
			ref="my-map"
		></map>
	</view>
</template>
<script>
var amapFile = require('@/common/amap-wx.js');
var myAmapFun = new amapFile.AMapWX({ key: '这里写在高德申请的key' });
export default {
	onReady: function(res) {
		this.mapContext = uni.createMapContext('my-map', this);//创建mapContext对象，为了用uni提供的组件控制方法
	},
}
</script>

map可以自定义控件，但是我不知道是因为BUG还是我代码的问题，data中写一个控件没问题，再加一个的话就没有了
所以我的控件现在是用cover-view和cover-image做的

使用uni提供的一些方法

getMyLocation() {
	let that = this;
	uni.getLocation({
		type: 'gcj02',//uniapp只支持gch02坐标，用到map上的话一定要改
		success: function(res) {
			that.myLatitude = res.latitude;
			that.myLongitude = res.longitude;
			console.log(that.myLatitude);
			console.log(that.myLongitude);
		},
		fail: function(e) {
			console.log(e);
		}
	});
}

这种获取位置的方法和其他方法的使用差不多，直接uni.····就行了

还有一种是组件控制方法
比如缩放视野展示所有经纬度
that.mapContext指的是上面写在onReady里的那个

let that = this
that.mapContext.includePoints({
	points:[{
		latitude:that.myLatitude,//定义在data中的我的纬度
		longitude:that.myLongitude//定义在data中的我的经度
	},{
		latitude:that.makers[0].latitude,//地图上一个maker的纬度
		longitude:that.makers[0].longitude//地图上一个maker的经度
	}]
})

最后一种是高德地图提供的方法（只能看微信小程序的那个文档）
比如用高德地图获取天气

onLoad() {
	let that = this;
	var myAmapFun = new amapFile.AMapWX({ key: that.$store.state.amapKey });
	myAmapFun.getWeather({
		success: function(data) {
			that.weather = data.weather.data;//获取到的天气
			that.temperature = data.temperature.data;//获取到的气温
			console.log(data.weather.data);
		},
		fail: function(info) {
			console.log(info);
		}
	});
}

最后贴上我的Map.nvue

<template>
	<view class="map">
		<map
			id="my-map"
			ref="my-map"
			class="my-map"
			:style="{ height: allScreen - 44 + 'px' }"
			:latitude="myLatitude"
			:longitude="myLongitude"
			:markers="makers"
			enable-3D="true"
			show-compass="true"
			show-location="true"
			:polyline="myPolyline"
		></map>
		<!-- 样式里减44px是因为默认的导航栏高度为44px -->
		<cover-view class="control-btn">
			<cover-view class="location" @tap="locationClick">
				<cover-image class="control-btn-location-img" src="../../static/imgs/location.png"></cover-image>
			</cover-view>
			<cover-view class="assemble" @tap="getRoute">
				<cover-image class="control-btn-assemble-img" src="../../static/imgs/assemble.png"></cover-image>
			</cover-view>
			<cover-view class="weather">
				<cover-image :src="weatherImg" class="weather-img"></cover-image>
				<cover-view class="wearth-txt">{{ temperature + '℃' }}</cover-view>
			</cover-view>
		</cover-view>
	</view>
</template>

<script>
var amapFile = require('@/common/amap-wx.js');

export default {
	data() {
		return {
			// id: 0,
			allScreen: '',
			myLatitude: '', //纬度
			myLongitude: '', //经度
			makers: [
				{
					id: 1,
					latitude: '纬度，不给看',
					longitude: '经度，也不给看',
					title: '测试点',
					iconPath: '/static/imgs/edit-maker.png',
					width: '50px',
					height: '50px'
				}
			],
			weather: '',//天气
			temperature: '',//温度
			myPolyline:[]//路线
		};
	},
	onLoad() {
		let that = this;
		var myAmapFun = new amapFile.AMapWX({ key: that.$store.state.amapKey });
		that.getMyLocation();
		uni.getSystemInfo({
			success: function(e) {
				that.allScreen = e.screenHeight;
			},
			fail: function(e) {
				console.log(e);
			}
		});
		myAmapFun.getWeather({
			success: function(data) {
				that.weather = data.weather.data;
				that.temperature = data.temperature.data;
				console.log(data.weather.data);
			},
			fail: function(info) {
				//失败回调
				console.log(info);
			}
		});
	},
	onReady: function(res) {
		this.mapContext = uni.createMapContext('my-map', this);
	},
	methods: {
		getRoute() {
			let that = this;
			var myAmapFun = new amapFile.AMapWX({ key: that.$store.state.amapKey });
			that.mapContext.includePoints({//缩放视野展示所有经纬度
				points:[{
					latitude:that.myLatitude,
					longitude:that.myLongitude
				},{
					latitude:that.makers[0].latitude,
					longitude:that.makers[0].longitude
				}]
			})
			var myLocal = that.myLongitude+','+that.myLatitude
			var target = that.makers[0].longitude+','+that.makers[0].latitude
			myAmapFun.getWalkingRoute({//获取步行线路
				origin: myLocal,
				destination: target,
				success: function(data) {
					console.log(data);
					//获取线路规划的数据，后面还需要在地图上画出来，未完成，完成后会发新博客
				},
				fail: function(info) {
					console.log(info);
				}
			});
		},
		getMyLocation() {
			let that = this;
			uni.getLocation({
				type: 'gcj02',
				success: function(res) {
					that.myLatitude = res.latitude;
					that.myLongitude = res.longitude;
					console.log('myLatitude为' + that.myLatitude);
					console.log('myLongitude为' + that.myLongitude);
				},
				fail: function(e) {
					console.log(e);
				}
			});
		},
		locationClick() {
			console.log('location');
			let that = this;
			that.getMyLocation();
			that.mapContext.moveToLocation({
				longitude: that.myLongitude,
				latitude: that.myLatitude,
				success: function(res) {
					console.log('刷新成功');
				},
				fail: function(e) {
					console.log('调用失败');
					console.log(e);
				},
				complete: function() {
					console.log('调用结束');
				}
			});
		},
		assembleClick() {
			uni.chooseLocation({
				success: function(res) {
					console.log('位置名称：' + res.name);
					console.log('详细地址：' + res.address);
					console.log('纬度：' + res.latitude);
					console.log('经度：' + res.longitude);
				}
			});
		}
	},
	computed: {
		weatherImg: function() {
			//返回天气图片，未完善
			//全部天气类型在https://lbs.amap.com/api/webservice/guide/tools/weather-code/
			switch (this.weather) {
				case '晴':
					return 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-tourism/fd3680c0-797a-11ea-b997-9918a5dda011.png';
					break;
				case '多云':
					return 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-tourism/fd29d690-797a-11ea-b94e-47f67ecf8268.png';
					break;
				default:
					return 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-tourism/fd34fa20-797a-11ea-b94e-47f67ecf8268.png';
			}
		}
	}
};
</script>

<style scoped>
/* nvue好像不能用scss */
.my-map {
	width: 750rpx;
}
.control-btn {
	position: fixed;
	flex-direction: column;
	top: 400rpx;
	left: 20rpx;
	align-items: center;
	/* background-color: #f00; */
}
.location {
	margin-bottom: 30rpx;
	flex-direction: column;
	align-items: center;
}
.assemble{
	flex-direction: column;
	align-items: center;
}
.control-btn-location-img {
	width: 60rpx;
	height: 60rpx;
}
.control-btn-assemble-img {
	width: 80rpx;
	height: 80rpx;
}
.control-btn-txt {
	font-size: 19rpx;
	text-align: center;
}
.weather {
	position: fixed;
	bottom: 10rpx;
	right: 50rpx;
	background-color: #fff;
	flex-direction: row;
	align-items: center;
}
.weather-img {
	width: 50rpx;
	height: 50rpx;
}
.wearth-txt {
	color: #999999;
	font-size: 32rpx;
}
</style>