| 
					
				 | 
			
			
				@@ -0,0 +1,211 @@ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+<!DOCTYPE html> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+<html> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+<head> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    <title>地址选择器</title> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    <link rel="stylesheet" href="__CDN__/assets/css/frontend.min.css"/> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    <link rel="stylesheet" href="__CDN__/assets/libs/font-awesome/css/font-awesome.min.css"/> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    <style type="text/css"> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        body { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            margin: 0; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            padding: 0; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        #container { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            position: absolute; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            left: 0; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            top: 0; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            right: 0; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            bottom: 0; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        .confirm { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            position: absolute; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            bottom: 30px; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            right: 4%; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            z-index: 99; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            height: 50px; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            width: 50px; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            line-height: 50px; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            font-size: 15px; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            text-align: center; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            background-color: white; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            background: #1ABC9C; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            color: white; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            border: none; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            cursor: pointer; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            border-radius: 50%; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        .search { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            position: absolute; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            width: 400px; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            top: 0; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            left: 50%; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            padding: 5px; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            margin-left: -200px; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    </style> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+</head> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+<body> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+<div class="search"> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    <div class="input-group"> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        <input type="text" id="place" name="q" class="form-control" placeholder="输入地点"/> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        <span class="input-group-btn"> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            <button type="submit" name="search" id="search-btn" class="btn btn-success"> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                <i class="fa fa-search"></i> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            </button> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        </span> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    </div> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+</div> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+<div class="confirm">确定</div> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+<div id="container"></div> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+<script charset="utf-8" src="//map.qq.com/api/js?v=2.exp&libraries=place&key={$config.tencentkey|default=''}"></script> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+<script src="__CDN__/assets/libs/jquery/dist/jquery.min.js"></script> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+<script type="text/javascript"> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    $(function () { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        var map, marker, geocoder, infoWin, searchService, address = null; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        var init = function () { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            var center = new qq.maps.LatLng({$lat}, {$lng}); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            map = new qq.maps.Map(document.getElementById('container'), { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                center: center, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                zoom: parseInt("{$config.zoom}") 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            }); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            //初始化marker 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            initmarker(center); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            //实例化信息窗口 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            infoWin = new qq.maps.InfoWindow({ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                map: map 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            }); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            geocoder = new qq.maps.Geocoder({ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                complete: function (result) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    infoWin.open(); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    address = result.detail.addressComponents.province + 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                        result.detail.addressComponents.city + 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                        result.detail.addressComponents.district; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    if (result.detail.addressComponents.streetNumber == '') { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                        address += result.detail.addressComponents.street; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    } else { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                        address += result.detail.addressComponents.streetNumber; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    infoWin.setContent(address); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    infoWin.setPosition(result.detail.location); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            }); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            //显示当前marker的位置信息窗口 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            geocoder.getAddress(center); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            var latlngBounds = new qq.maps.LatLngBounds(); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            //查询poi类信息 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            searchService = new qq.maps.SearchService({ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                complete: function (results) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    console.log(results); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    if (typeof results.detail.pois === 'undefined') { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                        alert("未搜索到相关信息"); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                        return; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    var pois = results.detail.pois; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    for (var i = 0, l = pois.length; i < l; i++) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                        var poi = pois[i]; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                        latlngBounds.extend(poi.latLng); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                        initmarker(poi.latLng); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                        //显示当前marker的位置信息窗口 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                        geocoder.getAddress(poi.latLng); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    map.fitBounds(latlngBounds); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            }); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            //实例化自动完成 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            var ap = new qq.maps.place.Autocomplete(document.getElementById('place')); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            //添加监听事件 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            qq.maps.event.addListener(ap, "confirm", function (res) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                searchKeyword.call(this, res.value); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            }); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            qq.maps.event.addListener( 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                map, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                'click', 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                function (event) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    try { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                        infoWin.setContent('<div style="text-align:center;white-space:nowrap;margin:10px;">加载中</div>'); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                        var latLng = event.latLng, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                            lat = latLng.getLat().toFixed(5), 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                            lng = latLng.getLng().toFixed(5); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                        var location = new qq.maps.LatLng(lat, lng); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                        //调用获取位置方法 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                        geocoder.getAddress(location); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                        infoWin.setPosition(location); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                        marker.setPosition(location); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    } catch (e) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                        console.log(e); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            ); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        }; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        //实例化marker和监听拖拽结束事件 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        var initmarker = function (latLng) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            marker = new qq.maps.Marker({ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                map: map, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                position: latLng, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                draggable: true, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                title: '拖动图标选择位置' 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            }); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            //监听拖拽结束 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            qq.maps.event.addListener(marker, 'dragend', function (event) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                var latLng = event.latLng, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    lat = latLng.getLat().toFixed(5), 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    lng = latLng.getLng().toFixed(5); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                var location = new qq.maps.LatLng(lat, lng); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                //调用获取位置方法 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                geocoder.getAddress(location); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            }); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        }; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        var close = function (data) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            var index = parent.Layer.getFrameIndex(window.name); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            var callback = parent.$("#layui-layer" + index).data("callback"); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            //再执行关闭 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            parent.Layer.close(index); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            //再调用回传函数 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            if (typeof callback === 'function') { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                callback.call(undefined, data); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        }; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        //执行搜索方法 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        var searchKeyword = function () { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            searchService.clear();//先清除 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            marker.setMap(null); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            infoWin.close(); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            var keyword = $("#place").val(); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            // searchService.setLocation("北京");//设置默认检索范围(默认为全国),类型可以是坐标或指定的城市名称。 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            searchService.setPageIndex(0);//设置检索的特定页数。 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            searchService.setPageCapacity(1);//设置每页返回的结果数量。 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            searchService.search(this.place.address + " " + keyword);//开始查询 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        }; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        //点击确定后执行回调赋值 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        $(document).on('click', '.confirm', function () { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            var as = marker.getPosition(); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            var x = as.getLat().toFixed(5); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            var y = as.getLng().toFixed(5); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            var zoom = map.getZoom(); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            var data = {lat: x, lng: y, zoom: zoom, address: address}; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            close(data); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        }); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        //点击搜索按钮 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        $(document).on('click', '#search-btn', function () { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            if ($("#place").val() == '') 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                return; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            searchKeyword(); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        }); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        init(); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    }); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+</script> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+</body> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+</html> 
			 |