Vent-App/pages/user/location.vue

<template>
    <view>
		<cu-custom :bgColor="NavBarColor" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">定位</block>
		</cu-custom>
		<map 
		style="width: 100%; height:500px;" 
		:latitude="latitude" 
		:longitude="longitude" 
		:markers="marker"
		:scale="scale"
		>
		</map>
    </view>
</template>

<script>
	export default {
	    data() {
	        return {
				NavBarColor:this.NavBarColor,
	            id:0, // 使用 marker点击事件 需要填写id
	            title: 'map',
	          　latitude: 40.009704,  //纬度
		　　    longitude: 116.374999,  //经度
		  　　　marker: [{
			   　　id:0,
			   　　latitude: 40.009704,//纬度
			   　　longitude: 116.374999,//经度
			   　　iconPath: '/static/location.png',    //显示的图标        
			   　　rotate:0,   // 旋转度数
			   　　width:20,   //宽
			   　　height:20,   //高
			  　　 title:'你在哪了',//标注点名
			  　　 alpha:0.5,   //透明度
			  　　 /* label:{//为标记点旁边增加标签   //因背景颜色H5不支持
				  　　 content:'北京国炬公司',//文本
				　　　 color:'red',//文本颜色
					　 fontSize:24,//文字大小
					   x:5,//label的坐标，原点是 marker 对应的经纬度
					   y:1,//label的坐标，原点是 marker 对应的经纬度 
					   borderWidth:12,//边框宽度
					   borderColor:'pink',//边框颜色    
					　 borderRadius:20,//边框圆角                        
					　 bgColor:'black',//背景色
					　 padding:5,//文本边缘留白
					   textAlign:'right'//文本对齐方式。
			   }, */
			   callout:{//自定义标记点上方的气泡窗口 点击有效  
			   　　content:'北京国炬公司',//文本
			   　　color:'#ffffff',//文字颜色
			   　　fontSize:14,//文本大小
			   　　borderRadius:2,//边框圆角
			  　　 bgColor:'#00c16f',//背景颜色
			   　　display:'ALWAYS'//常显
			   }
			   // anchor:{//经纬度在标注图标的锚点，默认底边中点
			   //     x:0,    原点为给出的经纬度
			   //     y:0,
			   // }
						
		   }],
		   scale:16,//地图缩放程度
	   　 　controls:[{//在地图上显示控件，控件不随着地图移动
		  　　id:1,//控件id
		  　　iconPath:'/static/login3.png',//显示的图标
		      clickable:true,
		  　　position:{//控件在地图的位置
			 　　left:15,
			 　　top:15,
			 　　width:50,
			 　　height:50
		 　　  },    
	   　　}], 
	   　 　circles:[{//在地图上显示圆
		  　　latitude: 40.009704,
		  　　longitude: 116.374999,
		  　　radius:50,//半径
		      fillColor:"#ffffffAA",//填充颜色
		  　　color:"#55aaffAA",//描边的颜色
		 　　 strokeWidth:1//描边的宽度
		  }], 
	   　/* 　polyline:[{//指定一系列坐标点，从数组第一项连线至最后一项
	   　　　　points:[
			  　　{latitude: 40.009153,longitude: 116.374935},
			 　　 {latitude: 40.009704,longitude: 116.374999},
	   　　　　],
	   　　　　color:"#0000AA",//线的颜色
	   　　　　width:2,//线的宽度
	   　　　　dottedLine:true,//是否虚线
	   　　　　arrowLine:true,    //带箭头的线 开发者工具暂不支持该属性
	   　　}], */
	     }
	    },
		onLoad() {
			this.getLocation()
		},
	    methods: {
			getLocation(){
				uni.getLocation({
				    type: 'gcj02',
				    success: function (res) {
				        console.log('当前位置的经度：' + res.longitude);
				        console.log('当前位置的纬度：' + res.latitude);
				    },
					fail: function (res) {
						 console.log('当前位置的经度');
					}	
				});
			}
	    }
	}
</script>

<style>
</style>