uniapp 实现定位功能

<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>
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值