uniapp map 地图

## 简单实现两点连线 

文档地址： uni-app官网

 

## 代码 

<template>
	<view>
		<map style="width: 100%;height: 600rpx;" :latitude="latitude" :polyline="polyline"
			:include-points="includePoints" :longitude="longitude" :markers="markers"></map>
		<image src="../../static/logo.png" mode=""></image>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				markers: [],
				longitude: '',
				latitude: '',
				includePoints: [],
				polyline: {}
			}
		},
		onLoad() {
			uni.getLocation({
				type: 'gcj02',
				success: (res) => {
					console.log(res, '啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊');
					const {
						longitude,
						latitude
					} = res;
					this.longitude = longitude;
					this.latitude = latitude;
					const includePoints = [{
						longitude: 120.96617296006944,
						latitude: 31.372928059895834
					}, {
						longitude: 120.98181,
						latitude: 31.38475
					}]
					const polyline = [{
						points: [{
							latitude: 31.38475,
							longitude: 120.98181
						}, {
							latitude: 31.372928059895834,
							longitude: 120.96617296006944
						}],
						width: 2,
						color: '#0000AA',
					}]
					const list = [{
						id: 12001,
						longitude: this.longitude,
						latitude: this.latitude,
						iconPath: '../../static/logo.png',
						width: 20,
						height: 20,
						alpha: 0.5,
						label: {
							content: "me",
							color: '#333',
							fontSize: 14,
							borderRadius: 20,
							textAlign: 'center',
						},
						callout: {
							content: "我的位置",
							color: '#333',
							fontSize: 14,
							borderRadius: 20,
							textAlign: 'center',
						}
					}, {
						id: 12002,
						longitude: 120.96617296006944,
						latitude: 31.372928059895834,
						iconPath: '../../static/logo.png',
						width: 20,
						height: 20,
						alpha: 0.5,
						label: {
							content: "you",
							color: '#333',
							fontSize: 14,
							borderRadius: 20,
							textAlign: 'center',
						},
						callout: {
							content: "终点",
							color: '#333',
							fontSize: 14,
							borderRadius: 20,
							textAlign: 'center',
						}
					}]
					this.$nextTick(() => {
						this.$set(this, 'markers', list)
						this.$set(this, 'includePoints', includePoints)
						this.$set(this, 'polyline', polyline)
					})
				}
			})

		},
		methods: {

		}
	}
</script>

<style>

</style>