uni-app 地图组件演示

红太狼 2022-03-22 01:52 907阅读 0赞

**最近看uni-app地图组件，这个功能很经常用到，发现了一些坑，很难受，下面看一下代码**

<template>
    	<view>
    		<view class="page-body">
    		    <view class="page-section page-section-gap">
    		        <map style="width: 100%; height: 600px;" :controls="controls" :circles="circles" :polyline='polyline' :scale="scale" :latitude="latitude" :longitude="longitude" :markers="covers">
    		        </map>
    		    </view>
    		</view>
    	</view>
    </template>
     
    <script>
    	export default {
    		data() {
    			return {
    				title: 'map',
    				latitude: 39.909,
    				longitude: 116.39742,
    				covers: [{
    				    latitude: 39.909,//纬度
    				    longitude: 116.39742,//经度
    				    iconPath: '../../static/image/personal_center.png',	//显示的图标			
    					title:'阿打算',//标注点名
    					label:{//为标记点旁边增加标签
    				            content:'文本1',//文本
    				            color:'#F76350',//文本颜色
    					    anchorX:0,//label的坐标，原点是 marker 对应的经纬度
    					    anchorY:-80,//label的坐标，原点是 marker 对应的经纬度 
    // 					    x:39.909,//这个组件微信在1.2.0以后就废弃了
    // 					    y:116.39742,
    				            bgColor:'#fff',//背景色
    				            padding:5,//文本边缘留白
    					    borderWidth:1,//边框宽度
    					    borderColor:'#D84C29',//边框颜色							
    					    textAlign:'right'//文本对齐方式。
    				     },
    					 callout:{//自定义标记点上方的气泡窗口 点击有效
    				            content:'地点1',
    				            color:'#F76350',
    				            fontSize:12,
    							borderRadius:5,
    				     },
    // 					 anchor:{//经纬度在标注图标的锚点，默认底边中点
    // 						 x:5,
    // 						 y:1,
    // 					  }
    				}, {
    				    latitude: 39.90,
    				    longitude: 116.39,
    				    iconPath: '../../static/image/personal_center.png',
    					title:'阿迪达斯',
    					x:39.90,
    					y:116.399,
    					label:{
    					        content:'文本2',
    					        color:'#F76350',
    					        bgColor:'#fff',
    					        padding:5,
    					        borderRadius:4,
    					 },
    					 callout:{
    					        content:'地点2',
    					        color:'#F76350',
    					        fontSize:12
    					 }
    				}],
    				scale:15,//地图层级
    				controls:[{//在地图上显示控件，控件不随着地图移动
    					id:1,//控件id
    					iconPath:'../../static/image/equipment_deployment_two.png',//显示的图标	
    					position:{//控件在地图的位置
    						left:15,
    						top:15,
    						width:50,
    						height:50
    					},	
    				}],
    				circles:[{//在地图上显示圆
    					latitude: 39.90,
    					longitude: 116.39,
    					fillColor:"#FFC41F",//填充颜色
    					color:"#12A1DD",//描边的颜色
    					radius:500,//半径
    					strokeWidth:2//描边的宽度
    				}],
    				polyline:[{//指定一系列坐标点，从数组第一项连线至最后一项
    					points:[
    						{latitude: 39.909,longitude: 116.39742},
    						{latitude: 39.90,longitude: 116.39},
    					],
    					color:"#0000AA",//线的颜色
    					width:2,//线的宽度
    					dottedLine:true,//是否虚线
    					arrowLine:true,	//带箭头的线 开发者工具暂不支持该属性
    				}],
    				
    				
    			};
    		},
    		onLoad(){
    			uni.getLocation({//获取当前的位置坐标
    				type: 'wgs84',
    				success: function (res) {
    					console.log('当前位置的经度：' + res.longitude);
    					console.log('当前位置的纬度：' + res.latitude);
    				}
    			});  
    // 			uni.chooseLocation({
    // 				success: function (res) {
    // 					console.log('位置名称：' + res.name);
    // 					console.log('详细地址：' + res.address);
    // 					console.log('纬度：' + res.latitude);
    // 					console.log('经度：' + res.longitude);
    // 				}
    // 			});
    		}
    	}
    </script>
    
    <style>
    
    </style>

**效果图：**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk2ODA0Mw_size_16_color_FFFFFF_t_70][]

**其中微信marker 上的气泡 label位置调整，uni-app的组件是想x，y，但是微信在1.2.0以后就废弃了x，y改用anchorX和anchorY，如果使用x，y，微信开发小程序的模拟器是看不到效果的，真机调试有效果，但是我使用anchorX和anchorY，微信小程序是可以显示出来了位置的不同。**

**具体参考微信小程序地图组件地址：**[https://developers.weixin.qq.com/miniprogram/dev/component/map.html][https_developers.weixin.qq.com_miniprogram_dev_component_map.html]

**uni-app地图组件：**[https://uniapp.dcloud.io/component/map][https_uniapp.dcloud.io_component_map]

**获取当前位置经纬度需要在pages.json中加**

{
                "path" : "pages/map/map",
                "style" : {
                    "navigationBarTitleText" : "地图"
                }, 
    			"permission": { 
    				"scope.userLocation": {
    				  "desc": "你的位置信息将用于小程序位置接口的效果展示"
    				}
    			 }
            },

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk2ODA0Mw_size_16_color_FFFFFF_t_70]: /images/20220322/2941638818b94d1f9454253e9c30d42a.png
[https_developers.weixin.qq.com_miniprogram_dev_component_map.html]: https://developers.weixin.qq.com/miniprogram/dev/component/map.html
[https_uniapp.dcloud.io_component_map]: https://uniapp.dcloud.io/component/map