优化导航，优化商户列表

css/style.css

@@ -351,6 +351,12 @@
 	margin-top: .1rem;
 }
 
+.business-tips{
+	text-align: center;
+	margin-top: 20px;
+}
+
+
 .navigation-btn {
 	justify-content: center;
 	align-items: center;
@@ -665,4 +671,30 @@
 	top: 50%;
 	z-index: 9;
 	transform: translate(-50%,-50%);
+}
+
+/* 导航弹窗 */
+.navigation-box{
+	width: 7.5rem;
+	height: 0;
+	border-radius: .3rem .3rem 0 0;
+	box-shadow: 0 0 .5rem rgba(0, 0, 0, .3);
+	position: fixed;
+	left: 50%;
+	bottom: 0;
+	z-index: 9999;
+	transform: translateX(-50%);
+	overflow: hidden;
+	transition: all .6s;
+}
+.navigation-box.show{
+	height: 3rem;
+}
+.navigation-box .item{
+	line-height: 1rem;
+	text-align: center;
+	border-bottom: .02rem solid #e1e1e1;
+}
+.navigation-box .item:last-child{
+	border: 0;
 }

js/script.js

@@ -41,6 +41,7 @@ jQuery(function($){
 				$('.result-tips').addClass('show');
 			},3000)
 		});
+		
 		// 关闭弹窗
 		$('.tips-btn').click(function(){
 			turntableFlag = true;
@@ -53,21 +54,36 @@ jQuery(function($){
 		});
 	}
 	
-	// 立即导航
+	// 打开导航弹窗
 	if($('.navigation-btn').length){
 		// 打开弹窗
 		$('.navigation-btn').click(function(){
-			// 百度地图(纬度，经度)
+			$('.pull-bg').addClass('show');
-			window.open('http://api.map.baidu.com/marker?location=30.763954,104.098515&title=万圣家园B区&content=居民小区&output=html')
+			$('.navigation-box').addClass('show');
 		});
 	}
 	
-	// 详情页导航
+	// 开始导航
-	if($('.addr-item-btn').length){
+	if($('.navigation-box').length){
-		// 打开弹窗
+		// 腾讯地图
-		$('.addr-item-btn').click(function(){
+		$('.tx-navigation').click(function(){ // (lng,lat)
-			// 百度地图(纬度，经度)
+			window.open('https://apis.map.qq.com/uri/v1/marker?marker=coord:30.763954,104.098515;addr:万圣家园B区;&referer=webtest')
-			window.open('http://api.map.baidu.com/marker?location=30.763954,104.098515&title=万圣家园B区&content=居民小区&output=html')
+		});
+		// 百度地图
+		$('.bd-navigation').click(function(){ // (lng,lat)
+			window.open('http://api.map.baidu.com/marker?location=30.763954,104.098515&title=万圣家园B区&output=html')
+		});
+		// 高德地图
+		$('.gd-navigation').click(function(){ // (lat,lng)
+			window.open('https://uri.amap.com/marker?position=104.098515,30.763954&name=万圣家园B区')
+		});
+	}
+
+	// 关闭导航弹窗
+	if($('.pull-bg-navigation').length){
+		$('.pull-bg-navigation').click(function(){
+			$('.pull-bg').removeClass('show');
+			$('.navigation-box').removeClass('show');
 		});
 	}
 	

user/business.html

@@ -97,6 +97,15 @@
 					<div class="navigation-btn font24 color-ff background-f35 radius25 flex">立即导航</div>
 				</div>
 			</div>
+			<div class="business-tips font24 color-99">~ <span>下拉显示更多</span> ~</div>
+		</div>
+		<!-- 弹窗背景 -->
+		<div class="pull-bg pull-bg-navigation"></div>
+		<!-- 导航弹窗 -->
+		<div class="navigation-box background-ff font32">
+			<div class="item tx-navigation border-box">腾讯地图</div>
+			<div class="item bd-navigation border-box">百度地图</div>
+			<div class="item gd-navigation border-box">高德地图</div>
 		</div>
 		<!-- 尾部 -->
 		<div class="footer background-ff border-box">

user/detail.html

@@ -41,7 +41,7 @@
 		<div class="address border-box">
 			<div class="addr-map" id="addr-map"></div>
 			<div class="addr-txt">
-				<div class="item addr-item-btn flex">
+				<div class="item navigation-btn flex">
 					<p class="font24"><strong>地址：四川省成都市天府新区华阳镇</strong></p>
 					<span class="radius100 background-f35 flex">
 						<img src="../images/icon/icon-addr.png" alt="导航" style="width: .26rem; height: .26rem;">
@@ -69,6 +69,14 @@
 				zoom:10
 			});
 		</script>
+		<!-- 弹窗背景 -->
+		<div class="pull-bg pull-bg-navigation"></div>
+		<!-- 导航弹窗 -->
+		<div class="navigation-box background-ff font32">
+			<div class="item bd-navigation border-box">百度地图</div>
+			<div class="item gd-navigation border-box">高德地图</div>
+			<div class="item tx-navigation border-box">腾讯地图</div>
+		</div>
 		<!-- 尾部 -->
 		<div class="footer background-ff border-box">
 			<div class="foot font24 flex">