Преглед на файлове

新增地图导航方法

zhuxiuping преди 4 години
родител
ревизия
6a47a6a6c5
променени са 4 файла, в които са добавени 1284 реда и са изтрити 28 реда
  1. 1122 0
      lib/qqmap-wx-jssdk.js
  2. 13 4
      manifest.json
  3. 9 3
      pages/gongyuxiangqing/gongyuxiangqing.vue
  4. 140 21
      pages/index/index.vue

Файловите разлики са ограничени, защото са твърде много
+ 1122 - 0
lib/qqmap-wx-jssdk.js


+ 13 - 4
manifest.json

@@ -58,9 +58,18 @@
         },
         "usingComponents" : true,
         "permission" : {
-			"scope.userLocation" : {
-				"desc" : "需要获取您的地理位置,请确认授权,否则地图功能将无法使用"
-			}
-		}
+            "scope.userLocation" : {
+                "desc" : "需要获取您的地理位置,请确认授权,否则地图功能将无法使用"
+            }
+        }
+    },
+    "h5" : {
+        "sdkConfigs" : {
+            "maps" : {
+                "qqmap" : {
+                    "key" : "BJUBZ-4V3CD-G7Q4K-HFQBZ-AJI6K-WLFAF"
+                }
+            }
+        }
     }
 }

+ 9 - 3
pages/gongyuxiangqing/gongyuxiangqing.vue

@@ -7,7 +7,7 @@
 				<text style="display: block;text-indent: 56rpx;">所以监听用户的截图操作,提示用户进行分享,既缩短了以前分享截图的操作路径,避免了在之前长路径中的行为流失(比如截图完成后忘记分享或觉得麻烦放弃分享等等),也让用户觉得更加贴心。</text>
 				         <text style="display: block;text-indent: 56rpx;">用户分享内容到社交媒体或好友,不应该是一种粗暴的强制行为,我们应该在保证产品本身内容有吸引力的核心前提下,仔细揣摩用户心理,结合产品本身的特色,在不同情境下提供给用户最合适的分享平台及方式,让用户分享成为一种水到渠。</text>
 				        <text style="display: block;text-indent: 56rpx;">营业时间:24小时</text>
-				         <text style="display: block;text-indent: 56rpx;">联系电话:<text style="color:rgba(41, 109, 227, 1);">0791-256987</text></text>
+				         <text style="display: block;text-indent: 56rpx;">联系电话:<text @click="telphone(phone)" style="color:rgba(41, 109, 227, 1);">0791-256987</text></text>
 			</view>
 		</view>
 		<!-- 第二部分,公寓设施 -->
@@ -44,14 +44,20 @@
 					{id:4,list:'拖鞋'},
 					{id:5,list:'电水壶'},
 					{id:6,list:'免费瓶装水'},
-				]
+				],
+				phone:'15079248859'
 			}
 		},
 		onLoad() {
 			
 		},
 		methods: {
-			
+			//拨打电话
+			telphone(phone){
+				uni.makePhoneCall({ 
+					phoneNumber: phone ,
+				}) // 传参带入号码即可
+			},
 		}
 	}
 </script>

+ 140 - 21
pages/index/index.vue

@@ -11,14 +11,14 @@
 			<text class="uni-extra" @click="navigateToXiangqing">设施/详情></text>
 			<text class="uni-body">宜春市靖安县北高速路口什么路899号</text>
 			<image class="uni-phone" @click="telphone(phone)" src="../../static/index/index_phone.svg"></image>
-			<image class="uni-map" @click="mapDaohang" src="../../static/index/index_map.svg"></image>
+			<image class="uni-map" @click="mapDaohang('115.387261','28.788671')" src="../../static/index/index_map.svg"></image>
 			<br><text class="uni-body2">距离我520km</text>
 		</view>
 		<!-- 第二层工具 -->
 		<view class="item-list">
 		  <view class="item-list-one" @click="navigateToXuzhi">
 		    <image src="../../static/index/index_xuzhi.svg" class="img-btn"></image>
-		    <text class="list-txt">入住须知</text>
+			<text class="list-txt">入住须知</text>
 		  </view>
 		  <view class="item-list-one" @click="navigateToDairuzhu">
 		    <image src="../../static/index/index_ruzhu.svg" class="img-btn"></image>
@@ -157,6 +157,7 @@
 	// 导入图片
 	import room1 from '../../static/index/swiper_img1.svg'
 	import room2 from '../../static/index/swiper_img1.svg'
+	import AMap from "../../lib/qqmap-wx-jssdk.js"
 	export default {
 		data() {
 			return {
@@ -190,6 +191,11 @@
 					},
 				],
 				phone:'15079248859',//电话
+				latitude: '', // 默认定在首都
+				longitude:'',
+				scale: 12, // 默认16
+				markers: [],
+				markerHeight: 30,
 			}
 		},
 		onLoad() {
@@ -225,7 +231,25 @@
 					}
 				]
 			}, 2000)
+			
+			//   wx请求获取位置权限
+			this.getAuthorize()
+				.then(() => {
+					//   同意后获取
+					this.getLocationInfo();
+				})
+				.catch(() => {
+					//   不同意给出弹框,再次确认
+					this.openConfirm()
+						.then(() => {
+							this.getLocationInfo();
+						})
+						.catch(() => {
+							this.rejectGetLocation();
+						});
+				});
 		},
+			
 		methods: {
 			// 跳转到入住须知
 			navigateToXuzhi(){
@@ -313,27 +337,122 @@
 					phoneNumber: phone ,
 				}) // 传参带入号码即可
 			},
-			//地图导航
-			mapDaohang(){
+			
+			//   初次位置授权
+			getAuthorize() {
+				return new Promise((resolve, reject) => {
+					uni.authorize({
+						scope: "scope.userLocation",
+						success: () => {
+							resolve(); // 允许授权
+						},
+						fail: () => {
+							reject(); // 拒绝授权
+						},
+					});
+				});
+			},
+			// 确认授权后,获取用户位置
+			getLocationInfo() {
+				const that = this;
 				uni.getLocation({
-				    type: 'wgs84',
-				    success: function (res) {
-				        console.log('当前位置的经度:' + res.longitude);
-				        console.log('当前位置的纬度:' + res.latitude);
-				        let longitude=res.longitude
-				         let latitude=res.latitude
-				         let name=res.name//
-				          let address=res.address//地址
-				         wx.openLocation({
-								latitude,
-								longitude,
-								name,
-								address,
-								scale:18//缩放比例
-							})
-				    }
+					type: "gcj02",
+					success: function(res) {
+						// 暂时
+						that.longitude = res.longitude; //118.787575;
+						that.latitude = res.latitude; //32.05024;
+						console.log("获取当前的用户经度", that.longitude);
+						console.log("获取当前的用户纬度", that.latitude);
+						var long = 0;
+						var lat = 0;
+						//小数点保留六位  经度
+						if (that.longitude.toString().indexOf('.') > 0) {
+							const longlatsplit = that.longitude.toString().split('.');
+							if (longlatsplit.length >= 2) {
+								long = parseFloat(longlatsplit[0] === "" ? 0 : longlatsplit[0]) + parseFloat("." + longlatsplit[1].slice(0,6));
+							}
+						}
+						if (that.latitude.toString().indexOf('.') > 0) {
+							const longlatsplit1 = that.latitude.toString().split('.');
+							if (longlatsplit1.length >= 2) {
+								lat = parseFloat(longlatsplit1[0] === "" ? 0 : longlatsplit1[0]) + parseFloat("." + longlatsplit1[1].slice(0,6));
+							}
+						}
+						// cookie.set("longitude", long);
+						// cookie.set("latitude", lat);
+						console.log("纬度", lat);
+						// this.distance(that.latitude,that.longitude);
+						that.markers = [{
+							id: "",
+							latitude: res.latitude,
+							longitude: res.longitude,
+							iconPath: "../../static/img/phone.png",
+							width: that.markerHeight, //宽
+							height: that.markerHeight, //高
+						}, ];
+						that.getList();
+					},
 				});
-			}
+			},
+			// 拒绝授权后,弹框提示是否手动打开位置授权
+			openConfirm() {
+				return new Promise((resolve, reject) => {
+					uni.showModal({
+						title: "请求授权当前位置",
+						content: "我们需要获取地理位置信息,为您推荐附近的美食",
+						success: (res) => {
+							if (res.confirm) {
+								uni.openSetting().then((res) => {
+									if (res[1].authSetting["scope.userLocation"] === true) {
+										resolve(); // 打开地图权限设置
+									} else {
+										reject();
+									}
+								});
+							} else if (res.cancel) {
+								reject();
+							}
+						},
+					});
+				});
+			},
+			
+			// 彻底拒绝位置获取
+			rejectGetLocation() {
+				uni.showToast({
+					title: "你拒绝了授权,无法获得周边信息",
+					icon: "none",
+					duration: 2000,
+				});
+			},
+			//打开地图导航
+			mapDaohang(lon,lat){
+				console.log("获取经纬度ssssfff", lon, lat);
+					//打开地图,并将门店位置传入
+					uni.getLocation({
+						success: res => {
+							// res.latitude=lat;
+							// res.longitude=lon;
+							console.log('location success', parseFloat(lat), parseFloat(lon))
+							uni.openLocation({
+								latitude: parseFloat(lat),
+								longitude: parseFloat(lon),
+								scale: 18
+							})
+						}
+						
+					})
+				//  uni.chooseLocation({
+				// 	success: (res) => {
+				// 		console.log('位置名称:' + res.name);
+				// 		console.log('详细地址:' + res.address);
+				// 		console.log('纬度:' + res.latitude);
+				// 		console.log('经度:' + res.longitude);
+				// 		this.positionName = res.name
+				// 	}
+				// })
+			},
+			
 		}
 	}
 </script>