uniapp項目--實現微信小程序定位

一、獲取對方(企業)位置

地圖組件用於展示地圖，而定位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)
                }
            })
        }
    })
}

查看位置OVER！ uniapp位置API

有其他需要了解的可以查看 官方demo文檔 建議手機版瀏覽。