bug

resources/views/admin/layout.blade.php

@@ -26,6 +26,7 @@
     <link rel="stylesheet" href="/base/plugins/cropperjs/cropper.min.css">
 
    	<!-- 全局js -->
+    <script type="text/javascript" src="https://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js"></script>
     <script src="/base/js/jquery-2.1.1.min.js?v={{config("sys.version")}}" ></script>
     <script src="/base/js/bootstrap.min.js?v=3.4.0" ></script>
     <script src="/base/js/layer/layer.js?v={{config("sys.version")}}"></script>

resources/views/admin/map/landmark/edit.blade.php

@@ -11,6 +11,8 @@
         $data = session("_old_input");
     }
 ?>
+
+
 	<div class="row">
 		<div class="col-sm-12">
 			<div class="ibox float-e-margins">
@@ -109,7 +111,26 @@
                         {!!  widget('Tools.ImgUpload')->single2('/upload/cover','cover',"cover",  isset($data['cover'])? $data['cover'] : '',array("sizex"=>500,"sizey"=>500)) !!}
                     </div>
                 </div>--}}
-
+                                <div class="form-group">
+                                    <div class="col-sm-9" style="margin-left: 27%">
+                                    <div style="display: inline-block;vertical-align: top;width: 45%">
+                                        <div class="form-group row map">
+                                            <div class="offset-2 col-9">
+                                                <div class="input-group" style="margin-top: 20px;">
+                                                    <input class="form-control region" type="text" placeholder="城市">
+                                                    <span class="input-group-addon ">和</span>
+                                                    <input class="form-control keyword" type="text" placeholder="关键字">
+                                                    <a class="input-group-addon search" href="javascript:">搜索</a>
+                                                </div>
+                                                <div class="text-info">搜索时城市和关键字必填</div>
+                                                <div class="text-info">点击地图上的蓝色点，获取经纬度</div>
+                                                <div class="text-danger map-error mb-3" style="display: none">错误信息</div>
+                                                <div id="containersss" style="min-width:600px;min-height:600px;"></div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    </div>
+                                </div>
                 <div class="form-group">
 
                     <label class="control-label col-sm-3">地标轮播图(1920*1080)</label>
@@ -136,29 +157,14 @@
                         <!-- /.col-lg-10 -->
                     </div>
 
-                        <div style="display: inline-block;vertical-align: top;width: 45%">
-                            <div class="form-group row map">
-                                <div class="offset-2 col-9">
-                                    <div class="input-group" style="margin-top: 20px;">
-                                        <input class="form-control region" type="text" placeholder="城市">
-                                        <span class="input-group-addon ">和</span>
-                                        <input class="form-control keyword" type="text" placeholder="关键字">
-                                        <a class="input-group-addon search" href="javascript:">搜索</a>
-                                    </div>
-                                    <div class="text-info">搜索时城市和关键字必填</div>
-                                    <div class="text-info">点击地图上的蓝色点，获取经纬度</div>
-                                    <div class="text-danger map-error mb-3" style="display: none">错误信息</div>
-                                    <div id="container" style="min-width:600px;min-height:600px;"></div>
-                                </div>
-                            </div>
-                        </div>
+
                     <!-- /.row -->
 				</div>
 			</div>
 		</div>
 	</div>
-<script type="text/javascript" src="https://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js"></script>
-<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>
+
+<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=YGZBZ-QSKCU-7LGVI-2WWXU-E5YEJ-2WFBA" ></script>
 <script>
 
     var searchService, map, markers = [];
@@ -167,10 +173,11 @@
     //初始化地图函数  自定义函数名init
     function init() {
         //定义map变量 调用 qq.maps.Map() 构造函数   获取地图显示容器
-        var map = new qq.maps.Map(document.getElementById("container"), {
+        var map = new qq.maps.Map(document.getElementById("containersss"), {
             center: new qq.maps.LatLng(39.916527, 116.397128),      // 地图的中心地理坐标。
             zoom: 15                                                 // 地图的中心地理坐标。
         });
+        console.log(document.getElementById("container"));
         var latlngBounds = new qq.maps.LatLngBounds();
         //调用Poi检索类
         searchService = new qq.maps.SearchService({
@@ -196,9 +203,9 @@
                         //添加监听事件
                         qq.maps.event.addListener(marker, 'click', function (e) {
                             var address = poi.address;
-                            $("input[name='address']").val(address);
-                            $("input[name='longitude']").val(e.latLng.lng);
-                            $("input[name='latitude']").val(e.latLng.lat);
+                            $("input[name='data[address]']").val(address);
+                            $("input[name='data[lng]']").val(e.latLng.lng);
+                            $("input[name='data[lat]']").val(e.latLng.lat);
                         });
                     })(i);
                 }
@@ -227,4 +234,9 @@
 
     //        }
 </script>
+<script>
+    $(document).on('click', '.search', function () {
+        searchKeyword();
+    })
+</script>
 @endsection

resources/views/web/index/index.blade.php

@@ -9,41 +9,95 @@
     <script type="text/javascript" src="/js/plugins/jquery-2.1.1.min.js"></script>
 </head>
 <body>
-<div id="container" style="width: 100%;height: 500px;"></div>
-<div id="btn-area" style="display: none">
-    <button onClick="geolocation.getLocation(showPosition, console.log(1), options)" style="display: none" id="sss">获取精确定位信息</button>
+<div style="display: inline-block;vertical-align: top;width: 45%">
+    <div class="form-group row map">
+        <div class="offset-2 col-9">
+            <div class="input-group" style="margin-top: 20px;">
+                <input class="form-control region" type="text" placeholder="城市">
+                <span class="input-group-addon ">和</span>
+                <input class="form-control keyword" type="text" placeholder="关键字">
+                <a class="input-group-addon search" href="javascript:">搜索</a>
+            </div>
+            <div class="text-info">搜索时城市和关键字必填</div>
+            <div class="text-info">点击地图上的蓝色点，获取经纬度</div>
+            <div class="text-danger map-error mb-3" style="display: none">错误信息</div>
+            <div id="container" style="min-width:600px;min-height:600px;"></div>
+        </div>
+    </div>
 </div>
-<script type="text/JavaScript">
-    var geolocation = new qq.maps.Geolocation("YGZBZ-QSKCU-7LGVI-2WWXU-E5YEJ-2WFBA", "myapp");
-    var options = {timeout: 8000};
-</script>
+
 </body>
 <script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=YGZBZ-QSKCU-7LGVI-2WWXU-E5YEJ-2WFBA" ></script>
-<script type="text/javascript">
+<script>
+var searchService, map, markers = [];
+//        window.onload = function(){
+//直接加载地图
+//初始化地图函数  自定义函数名init
+function init() {
+//定义map变量 调用 qq.maps.Map() 构造函数   获取地图显示容器
+var map = new qq.maps.Map(document.getElementById("container"), {
+center: new qq.maps.LatLng(39.916527, 116.397128),      // 地图的中心地理坐标。
+zoom: 15                                                 // 地图的中心地理坐标。
+});
+var latlngBounds = new qq.maps.LatLngBounds();
+//调用Poi检索类
+searchService = new qq.maps.SearchService({
+complete: function (results) {
+var pois = results.detail.pois;
+$('.map-error').hide();
+if (!pois) {
+$('.map-error').show().html('关键字搜索不到，请重新输入');
+return;
+}
+for (var i = 0, l = pois.length; i < l; i++) {
+(function (n) {
+var poi = pois[n];
+latlngBounds.extend(poi.latLng);
+var marker = new qq.maps.Marker({
+map: map,
+position: poi.latLng,
+});
 
+marker.setTitle(n + 1);
 
-    function showPosition(position) {
-        window.lat = position.lat;
-        window.lng = position.lng;
-        var myLatlng = new qq.maps.LatLng(lat, lng);
-        var myOptions = {
-            zoom: 8,
-            center: myLatlng,
-            mapTypeId: qq.maps.MapTypeId.ROADMAP
-        }
-        var map = new qq.maps.Map(document.getElementById("container"), myOptions);
-    };
-    function init() {
-        $('#sss').click();
-    }
+markers.push(marker);
+//添加监听事件
+qq.maps.event.addListener(marker, 'click', function (e) {
+var address = poi.address;
+$("input[name='address']").val(address);
+$("input[name='longitude']").val(e.latLng.lng);
+$("input[name='latitude']").val(e.latLng.lat);
+});
+})(i);
+}
+map.fitBounds(latlngBounds);
+}
+});
+}
+//清除地图上的marker
+function clearOverlays(overlays) {
+var overlay;
+while (overlay = overlays.pop()) {
+overlay.setMap(null);
+}
+}
+function searchKeyword() {
+var keyword = $(".keyword").val();
+var region = $(".region").val();
+clearOverlays(markers);
+searchService.setLocation(region);
+searchService.search(keyword);
+}
 
-    function loadScript() {
-        var script = document.createElement("script");
-        script.type = "text/javascript";
-        script.src = "https://map.qq.com/api/js?v=2.exp&callback=init";
-        document.body.appendChild(script);
-    }
+//调用初始化函数地图
+init();
 
-    window.onload = loadScript;
+
+//        }
+</script>
+<script>
+$(document).on('click', '.search', function () {
+    searchKeyword();
+})
 </script>
 </html>