使用uni-app中＜map＞组件生成轨迹

使用uni-app中的map组件生成轨迹

---

前言

由于业务需要开发一款app，由于本人是后端开发，仅对开发过程中遇到的问题做记录，欢迎大家批评指正。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、uni-app是什么

个人理解，uni-app就是一款使用Vue.js 开发所有前端应用的框架，开发一套代码可以发布在多个平台上。所以使用uni-app本人还特意去大概了解学习了一下Vue.js。关于uni-app的具体介绍及使用还请移步官网。uni-app官网
话不多说，直接上map组件的使用方式。

二、使用步骤

1.标签声明

代码如下（示例）：

<view class="text-area">
        <button @tap="getwz">点我获取当前位置</button>
		<map :longitude="longitude" :latitude="latitude" :markers="marker" :polyline="polyline"></map>
</view>

2.绑定数据

代码如下（示例）：

export default {
		data() {
			return {
				longitude: 112.53038,
				latitude: 37.81721,
				marker: [
					{
						id:0,
				  　　  latitude: 37.81721,//纬度
					  　longitude: 112.53038,//经度
					  　iconPath: '../../logo.png',    //显示的图标        
					  　rotate:0,   // 旋转度数
					  　width:10,   //宽
					  　height:20,   //高
					 　 title:'开始位置',//标注点名
					} 
				],
				 polyline:[
					{//指定一系列坐标点，从数组第一项连线至最后一项
					　　　　points:[
					　　　　],
					　　　　color:"#0000AA",//线的颜色
					　　　　width:1,//线的宽度
					// 　　　　dottedLine:true,//是否虚线
					　　}
				]
			}
		},
		methods: {
			getwz(){
				var that = this
				uni.getLocation({
					type: 'gcj02',
					isHighAccuracy: true,
					success: function(res) {
						// console.log('当前位置的经度：' + res.longitude);
						// console.log('当前位置的纬度：' + res.latitude);
						that.longitude = res.longitude;
						that.latitude = res.latitude;
					}
				});
				// 将经纬度添加到	polyline数组中
				this.polyline[0].points.push({latitude: that.latitude,longitude: that.longitude});
			},
		},
	}

---

总结

注意： 1、运行在小程序时，位置会有偏差，调试时建议使用真机模式调试。 2、uni.getLocation({})方法中不能直接修改data里的数据。 3.由于初始时points数组为空，所以在手动获取位置时会报错： [渲染层错误] MultiPolyline.geometries: 希望传入PolylineGeometry数组，实际第0元素的paths属性无效！

以上只是简单实现了手动获取当前位置，并生成轨迹，实际项目中可以使用定时器等方式自动生成轨迹。