uni-app 地圖組件演示

最近看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>

效果圖：

其中微信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

uni-app地圖組件：https://uniapp.dcloud.io/component/map

獲取當前位置經緯度需要在pages.json中加

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