uniapp项目--实现微信小程序定位

OGeek|极客世界-中国程序员成长平台 › 门户 › 编程› 移动开发›小程序云开发高级教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

一、获取对方(企业)位置

地图组件用于展示地图，而定位API只是获取坐标，请勿混淆两者。

使用uniapp的map组件(仅展示地图)

<!-- 获取input输入框value可能这样写,两种选择，手写输入或者选择定位 -->
<input class="moren" name="gsdz" placeholder="请填写" :value="gsdz" />
<map style="width: 100%;height: 150px;"
     :latitude="latitude"  //在地图上的纬度
     :longitude="longitude"//经度
     :markers="marker" //标记点用于在地图上显示标记的位置
     @tap="mark" //点击选择地点事件
     :scale="scale"//缩小或放大程度
     ></map>

marker 为对象数组类型，目前我只需要企业填写信息时获取公司位置，具体需要的可查看 uniapp文档

data() {
    return {
	  id:0,
	  latitude: '',//显示时中心位置
	  longitude: '',
	  marker: [
       {//标点一所需要的
	  	id:0,
	  	latitude: '',
	  	longitude: '',
	  	iconPath: '/static/images/zuobiao.png',    //显示的图标        
	  	rotate:0,   // 旋转度数
	  	width:20,   //宽
	  	height:20,   //高
	  	title:'在哪',//标注点名
	  	alpha:0.5,   //透明度
	  	label:{//为标记点旁边增加标签   //因背景颜色H5不支持
	  		content:'',//文本
	  		color:'red',//文本颜色
	  	},
	  	callout:{//自定义标记点上方的气泡窗口 点击有效  
	  		content: '',//文本，比如公司名称
	  		color:'#ffffff',//文字颜色
	  		fontSize:14,//文本大小
	  		borderRadius:2,//边框圆角
	  		bgColor:'#00c16f',//背景颜色
	  		display:'ALWAYS',//常显
	  	}
	  }],
	  scale:16//地图缩放程度
    };
  }

点击map 时触发mark方法，进入地图，uni.chooseLocation选择位置

mark:function(){
	let that = this;
	uni.chooseLocation({
        success: function (res) {
            console.log(res);//可打印出来看看都有什么
            that.marker[0].callout.content = res.name;//这个就是公司/店铺名称
            that.marker[0].latitude = res.latitude;//经纬度
            that.marker[0].longitude = res.longitude;
            that.marker[0].title = res.address;//具体地址
            //以that.latitude和that.longitude为中心显示位置
            that.latitude = res.latitude;
            that.longitude = res.longitude;
            that.gsdz =  res.address;//将位置显示到页面input框中
        }
	});
}

保存，OVER！

二、个人查看对方(企业)位置

判断数据库中有没有存储对方(企业)的位置，然后显示Map

<map style="width: 100%;height: 200px;"
     :latitude="latitude"  :longitude="longitude"
     :markers="marker"
     @tap="mark"
     :show-location="show_flag"//定位是否以当前位置为中心
     :enable-scroll="show_flag"//是否让个人可以滑动地图
     :scale="scale"
     ></map>

与第一点获取位置不一样的就是marker多了一组数据用来存储当前位置信息

data() {
    return {
	  id:0,
	  latitude: '',
	  longitude: '',
	  show_flag: false,
	  marker: [{
	  	id:0,
	  	latitude: '',
	  	longitude: '',
	  	iconPath: '/static/images/zuobiao.png',    //显示的图标        
	  	rotate:0,   // 旋转度数
	  	width:25,   //宽
	  	height:25,   //高
	  	title:'企业位置',//标注点名
	  	// alpha:0.5,   //透明度
	  	// label:{//为标记点旁边增加标签   //因背景颜色H5不支持
	  	// 	content:'许昌',//文本
	  	// 	color:'red',//文本颜色
	  	// },
	  	callout:{//自定义标记点上方的气泡窗口 点击有效  
	  		content: '',//文本
	  		color:'#000000',//文字颜色
	  		fontSize:16,//文本大小
	  		borderRadius:2,//边框圆角
	  		bgColor: '#ffffff',//背景颜色
	  		display: 'ALWAYS',//常显
			padding: 10,
			textAlign: 'center',
	  	}
	  },
		{
			id:1,
			latitude: '',
			longitude: '',
			iconPath: '/static/images/zuobiao.png',    //显示的图标        
			rotate:0,   // 旋转度数
			width:20,   //宽
			height:20,   //高
			title:'个人位置',//标注点名
		}
	  ],					
	  scale:15//地图缩放程度
    };
  }

建议写在onLoad 或者onShow：向后台请求数据，得到企业的位置信息 latitude longitude address 和 comName 分别赋值给 marker[0].latitude marker[0].longitude marker[0].title 和 marker[0].callout.content 。

这时marker 第一个标点就出来了，点击 mark 事件进入查看

mark:function(){
    let that = this;
    //uni.getLocation 获取当前位置信息
    uni.getLocation({
        type: 'gcj02', //返回可以用于uni.openLocation的经纬度
        success: function (res) {
            //经纬度就是你此刻的位置
            that.marker[1].latitude = res.latitude;
            that.marker[1].longitude = res.longitude;
            //uni.openLocation 查看位置 传入的经纬度必须为number类型，否则会失败。
            console.log(typeof that.latitude);
            uni.openLocation({
                latitude: that.latitude,
                longitude: that.longitude,
                // 左下角会出现 公司名称和公司具体位置
                name: that.marker[0].callout.content,
                address: that.marker[0].title,
                success: function(){
                    console.log("success");
                },
                fail:function(res){
                    console.log(res)
                }
            })
        }
    })
}