uniapp地图-标记点-多点连线

深碍√TFBOYSˉ_ 2021-08-20 02:01 948阅读 0赞

## 前言：正在使用uniapp开发地图这块不明白的小伙伴可以看看我以下的代码分享;下面是我开发中使用vue+uniapp遇到的地图问题，有的APP涉及到地理位置的功能，所以，地图组件可以实现这个功能，如：调起手机的第三方导航（百度地图、高德地图）、在地图上标记出来每个不同的定位，也可以让相同类型的标记点相连并设置不同的图片和颜色更好的辨认。 ##

**PS：下面我跟大家分享是地图标记点和标记点相连;注释已经写在代码里面的，代码易懂，表达不清楚或者有什么问题可以评论~**

--------------------

[uniapp地图-点击添加标记点][uniapp_-]

[uniapp地图-删除标记点][uniapp_- 1]

[uniapp子窗体的使用与传参][uniapp]

--------------------

## 正在加载。。。。 ##

PS：先上效果图

--------------------

图1：标记点  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MjI3Mjkx_size_16_color_FFFFFF_t_70]

--------------------

图2：标记点相连  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MjI3Mjkx_size_16_color_FFFFFF_t_70 1]

--------------------

**.vue代码文件**

PS：以上效果便是下面代码执行之后的，这里要注意复制过去注意图片路径

<template>
    	<view class="content">
    		
    		<map id="maps" :latitude="latitude" :longitude="longitude" :markers="markers" :polyline="polylines" scale="10"></map>
    	</view>
    </template>
    
    <script>
    	export default { 
    		data() { 
    			return { 
    				latitude: '',//纬度
    				longitude: '',//经度
    				markers:[],//标记点数组
    				polylines:[]//连续数组
    			}
    		},
    		onReady() { 
    			//调用的函数放到onReady里面
    			this.getlocal();
    			this.test();
    		},
    		methods: { 
    			//地图标记点;   具体的属性可以看看官网的说明
    			test(){ 
    				var that = this;
    				//地图标记点连线静态数据赋值;
    				// 可以理解成下面polylines里面的一个对象为一条线，每一条线都是独立的，可以设置不同的连续颜色
    				//points[]里面是从第一个对象连到最后一个对象的经纬度成一条线
    				that.polylines = [{ 
    					points: [{ 
    							latitude: 23.043594,
    							longitude: 113.160704
    						},
    						{ 
    							latitude: 23.036344,
    							longitude: 113.160704
    						},
    						{ 
    							latitude: 23.03528,
    							longitude: 113.149565
    						},
    						{ 
    							latitude: 23.03794,
    							longitude: 113.138498
    						},
    						{ 
    							latitude: 23.049247,
    							longitude: 113.145684
    						}
    					],
    					arrowLine: true,
    					dottedLine: true,
    					arrowIconPath: "/static/images/2btn_loc/btn_loc3.png",
    					width: 2,
    					color: "FEAA34"
    				}];
    				//地图标记点静态数据赋值;
    				//标记点和连线的意思差不多，标记点的数组是单纯将markers数组中的对象的经纬度通过图片的方式标记出来（图片可以自定义）
    				that.markers = [{ 
    						title: '123',
    						latitude: 23.043594,
    						longitude: 113.160704,
    						iconPath: '/static/btn_loc0.png'
    					},
    					{ 
    						title: '123',
    						latitude: 23.036344,
    						longitude: 113.160704,
    						iconPath: '/static/btn_loc0.png'
    					},
    					{ 
    						title: '123',
    						latitude: 23.03528,
    						longitude: 113.149565,
    						iconPath: '/static/btn_loc0.png'
    					},
    					{ 
    						title: '123',
    						latitude: 23.03794,
    						longitude: 113.138498,
    						iconPath: '/static/btn_loc0.png'
    					},
    					{ 
    						title: '123',
    						latitude: 23.049247,
    						longitude: 113.145684,
    						iconPath: '/static/btn_loc0.png'
    					},
    				];
    			},
    			//定位方法;获取当前的经纬度，也可以通过经纬度来获取当前的地理位置，比如：xx省、xx市、xx镇
    			getlocal: function() { 
    				let _this = this;
    				//显示当前位置
    				var map = uni.createMapContext('maps', this).$getAppMap();
    				map.showUserLocation(true);
    				//获取当前定位
    				uni.getLocation({ 
    					type: 'wgs84',
    					success: function(res) { 
    						console.log('当前位置的经度：' + res.longitude);
    						console.log('当前位置的纬度：' + res.latitude);
    						_this.longitude = res.longitude;
    						_this.latitude = res.latitude;
    					}
    				})
    			},
    		}
    	}
    </script>
    
    <style scoped lang="scss">
    	.content { 
    		position: absolute;
    		width: 100%;
    		height: 100%;
    
    		#maps { 
    			width: 100%;
    			height: 100%;
    		}
    	}
    </style>

[uniapp_-]: https://blog.csdn.net/qq_34227291/article/details/103840555
[uniapp_- 1]: https://blog.csdn.net/qq_34227291/article/details/103791125
[uniapp]: https://blog.csdn.net/qq_34227291/article/details/103386066
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MjI3Mjkx_size_16_color_FFFFFF_t_70]: /images/20210724/dcb9bd26759d4d21aa303281b6cd1020.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MjI3Mjkx_size_16_color_FFFFFF_t_70 1]: /images/20210724/b9ef785838cd4498a1a0149887209ea7.png