下单自提模式查看地图

application/index/view/default/buy/index.html

@@ -171,6 +171,7 @@
                                             <span>{{$address.city_name}}</span>
                                             <span>{{$address.county_name}}</span>
                                             <span>{{$address.address}}</span>
+                                            <a class="am-badge am-radius extraction-address-map-submit am-icon-map-marker am-margin-left-sm" data-lng="{{$address.lng}}" data-lat="{{$address.lat}}"> 查看地图</a>
                                         </p>
                                         {{if !isset($params['address_id']) or $params['address_id'] neq $key}}
                                             <button type="button" class="am-btn am-btn-default am-radius" data-value="{{$key}}">选择</button>
@@ -178,6 +179,14 @@
                                     </li>
                                 {{/foreach}}
                             </ul>
+                            <!-- 地图 -->
+                            <div class="extraction-address-map-container">
+                                <div class="am-text-center map-inner">
+                                    <span class="map-title">地图位置</span>
+                                    <button type="button" class="am-close am-fr am-close-spin">&times;</button>
+                                </div>
+                                <div id="map"></div>
+                            </div>
                         </div>
                       </div>
                     </div>
@@ -474,6 +483,9 @@
     {{/foreach}}
 {{/if}}
 
+<!-- map -->
+<script type="text/javascript" src="{{$Think.__MY_HTTP__}}://api.map.baidu.com/api?v=2.0&ak={{:MyC('common_baidu_map_ak')}}"></script>
+
 <!-- footer start -->
 {{include file="public/footer" /}}
 <!-- footer end -->

public/static/index/default/css/buy.css

@@ -248,3 +248,35 @@ strong.total-price-content { color: #d2364c; font-size: 16px; }
   top: 15px;
   right: 5px;
 }
+/**
+ * 自提地址-弹层-查看地图
+ */
+.extraction-address-map-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  background: rgba(0, 0, 0, 0.3);
+  z-index: 1001;
+  padding: 10%;
+  width: 100%;
+  height: 100%;
+  display: none;
+}
+.extraction-address-map-container .map-title {
+  font-weight: bold;
+  font-size: 16px;
+  color: #333;
+}
+.extraction-address-map-container .map-inner {
+  height: 43px;
+  line-height: 43px;
+  background: #fff;
+  border-bottom: 1px solid #dedede;
+}
+.extraction-address-map-container .map-inner .am-close {
+  margin: 9px 9px 0 0;
+}
+#map {
+  width: 100%;
+  height: calc(100% - 43px);
+}

public/static/index/default/js/buy.js

@@ -133,5 +133,24 @@ $(function()
             $extraction_popup.modal();
         }
     });
-    
+
+    // 自提点地址 - 查看地图/关闭地图
+    var $extraction_map_container = $('.extraction-address-map-container');
+    $extraction_popup.find('.extraction-address-map-submit').on('click', function()
+    {
+        var lng = $(this).data('lng') || null;
+        var lat = $(this).data('lat') || null;
+        if(lng == null || lat == null)
+        {
+            Prompt('坐标有误');
+            return false;
+        }
+
+        $extraction_map_container.show();
+        MapInit(lng, lat, null, null, false);
+    });
+    $extraction_map_container.find('.map-inner .am-close').on('click', function()
+    {
+        $('.extraction-address-map-container').hide();
+    });
 });