fix #764

resources/views/form/map.blade.php

@@ -6,11 +6,11 @@
 
         @include('admin::form.error')
 
-        @if(config('admin.map.provider') == 'baidu')
+        @if($type === 'baidu')
             <div class="row">
                 <div class="col-md-6 col-md-offset-3">
                     <div class="input-group">
-                        <input type="text" class="form-control" id="search-{{$id['lat'].$id['lng']}}">
+                        <input type="text" class="form-control" id="{{ $searchId }}">
                         <span class="input-group-btn">
                         <button type="button" class="btn btn-info btn-flat"><i class="fa fa-search"></i></button>
                     </span>
@@ -19,11 +19,184 @@
             </div>
         @endif
 
-        <div id="map_{{$id['lat'].$id['lng']}}" style="width: 100%;height: 300px"></div>
-        <input type="hidden" id="{{$id['lat']}}" name="{{$name['lat']}}" value="{{ $value['lat'] ?? null }}" {!! $attributes !!} />
-        <input type="hidden" id="{{$id['lng']}}" name="{{$name['lng']}}" value="{{ $value['lng'] ?? null }}" {!! $attributes !!} />
+        <div class="{{ $class }}">
+            <div class="form-map"></div>
+            <input type="hidden" class="form-lat" name="{{ $name['lat'] }}" value="{{ $value['lat'] ?? null }}" {!! $attributes !!} />
+            <input type="hidden" class="form-lng" name="{{$name['lng']}}" value="{{ $value['lng'] ?? null }}" {!! $attributes !!} />
+        </div>
 
         @include('admin::form.help-block')
 
     </div>
 </div>
+<script init="{!! $selector !!}">
+    var lat = $this.find('.form-lat'),
+        lng = $this.find('.form-lng'),
+        container = $this.find('.form-map'),
+        mapId = "_" + Dcat.helpers.random();
+
+    container.attr('id', mapId);
+
+    @if($type === 'google')
+    function initGoogleMap() {
+        var LatLng = new google.maps.LatLng(lat.val(), lng.val());
+
+        var options = {
+            zoom: 13,
+            center: LatLng,
+            panControl: false,
+            zoomControl: true,
+            scaleControl: true,
+            mapTypeId: google.maps.MapTypeId.ROADMAP
+        }
+
+        var map = new google.maps.Map(container[0], options);
+
+        var marker = new google.maps.Marker({
+            position: LatLng,
+            map: map,
+            title: 'Drag Me!',
+            draggable: true
+        });
+
+        google.maps.event.addListener(marker, 'dragend', function (event) {
+            lat.val(event.latLng.lat());
+            lng.val(event.latLng.lng());
+        });
+    }
+
+    initGoogleMap();
+    @endif
+
+    @if($type === 'tencent')
+    function initTencentMap() {
+        var center = new qq.maps.LatLng(lat.val(), lng.val());
+
+        var map = new qq.maps.Map(container[0], {
+            center: center,
+            zoom: 13
+        });
+
+        var marker = new qq.maps.Marker({
+            position: center,
+            draggable: true,
+            map: map
+        });
+
+        if( ! lat.val() || ! lng.val()) {
+            var citylocation = new qq.maps.CityService({
+                complete : function(result){
+                    map.setCenter(result.detail.latLng);
+                    marker.setPosition(result.detail.latLng);
+                }
+            });
+
+            citylocation.searchLocalCity();
+        }
+
+        qq.maps.event.addListener(map, 'click', function(event) {
+            marker.setPosition(event.latLng);
+        });
+
+        qq.maps.event.addListener(marker, 'position_changed', function(event) {
+            var position = marker.getPosition();
+            lat.val(position.getLat());
+            lng.val(position.getLng());
+        });
+    }
+
+    initTencentMap();
+    @endif
+
+
+    @if($type === 'yandex')
+    function initYandexMap() {
+        ymaps.ready(function(){
+            var myMap = new ymaps.Map(mapId, {
+                center: [lat.val(), lng.val()],
+                zoom: 18
+            });
+
+            var myPlacemark = new ymaps.Placemark([lat.val(), lng.val()], {
+            }, {
+                preset: 'islands#redDotIcon',
+                draggable: true
+            });
+
+            myPlacemark.events.add(['dragend'], function (e) {
+                lat.val(myPlacemark.geometry.getCoordinates()[0]);
+                lng.val(myPlacemark.geometry.getCoordinates()[1]);
+            });
+
+            myMap.geoObjects.add(myPlacemark);
+        });
+    }
+
+    initYandexMap();
+    @endif
+
+    @if($type === 'baidu')
+    function initBaiduMap() {
+        var map = new BMap.Map(mapId);
+        var point = new BMap.Point(lng.val(), lat.val());
+        map.centerAndZoom(point, 15);
+        map.enableScrollWheelZoom(true);
+
+        var marker = new BMap.Marker(point);
+        map.addOverlay(marker);
+        marker.enableDragging();
+
+        if( ! lat.val() || ! lng.val()) {
+            var geolocation = new BMap.Geolocation();
+            geolocation.getCurrentPosition(function(e){
+                if(this.getStatus() == BMAP_STATUS_SUCCESS){
+                    map.panTo(e.point);
+                    marker.setPosition(e.point);
+
+                    lat.val(e.point.lat);
+                    lng.val(e.point.lng);
+
+                } else {
+                    console.log('failed'+this.getStatus());
+                }
+            },{enableHighAccuracy: true})
+        }
+
+        map.addEventListener("click", function(e){
+            marker.setPosition(e.point);
+            lat.val(e.point.lat);
+            lng.val(e.point.lng);
+        });
+
+        marker.addEventListener("dragend", function(e){
+            lat.val(e.point.lat);
+            lng.val(e.point.lng);
+        });
+        var ac = new BMap.Autocomplete(
+            {"input" : "{{ $searchId }}"
+                ,"location" : map
+            });
+        var address;
+        ac.addEventListener("onconfirm", function(e) {    //鼠标点击下拉列表后的事件
+            var _value = e.item.value;
+            address = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
+            setPlace();
+        });
+        function setPlace(){
+            function myFun(){
+                var pp = local.getResults().getPoi(0).point;
+                map.centerAndZoom(pp, 15);
+                marker.setPosition(pp);
+                lat.val(pp.lat);
+                lng.val(pp.lng);
+            }
+            var local = new BMap.LocalSearch(map, {
+                onSearchComplete: myFun
+            });
+            local.search(address);
+        }
+    }
+
+    initBaiduMap();
+    @endif
+</script>

src/Form/Field/Map.php

@@ -4,6 +4,7 @@ namespace Dcat\Admin\Form\Field;
 
 use Dcat\Admin\Admin;
 use Dcat\Admin\Form\Field;
+use Illuminate\Support\Str;
 
 class Map extends Field
 {
@@ -58,19 +59,17 @@ class Map extends Field
          */
         switch (static::getUsingMap()) {
             case 'tencent':
-                $this->useTencentMap();
+                $this->tencent();
                 break;
             case 'google':
-                $this->useGoogleMap();
+                $this->google();
                 break;
             case 'yandex':
-                $this->useYandexMap();
+                $this->yandex();
                 break;
             case 'baidu':
-                $this->useBaiduMap();
-                break;
             default:
-                $this->useBaiduMap();
+                $this->baidu();
         }
     }
 
@@ -79,201 +78,23 @@ class Map extends Field
         return config('admin.map.provider') ?: config('admin.map_provider');
     }
 
-    public function useGoogleMap()
+    public function google()
     {
-        $this->script = <<<JS
-        (function() {
-            function initGoogleMap(name) {
-                var lat = $('#{$this->id['lat']}');
-                var lng = $('#{$this->id['lng']}');
-    
-                var LatLng = new google.maps.LatLng(lat.val(), lng.val());
-    
-                var options = {
-                    zoom: 13,
-                    center: LatLng,
-                    panControl: false,
-                    zoomControl: true,
-                    scaleControl: true,
-                    mapTypeId: google.maps.MapTypeId.ROADMAP
-                }
-    
-                var container = document.getElementById("map_"+name);
-                var map = new google.maps.Map(container, options);
-    
-                var marker = new google.maps.Marker({
-                    position: LatLng,
-                    map: map,
-                    title: 'Drag Me!',
-                    draggable: true
-                });
-    
-                google.maps.event.addListener(marker, 'dragend', function (event) {
-                    lat.val(event.latLng.lat());
-                    lng.val(event.latLng.lng());
-                });
-            }
-    
-            initGoogleMap('{$this->id['lat']}{$this->id['lng']}');
-        })();
-JS;
+        return $this->addVariables(['type' => 'google']);
     }
 
-    public function useTencentMap()
+    public function tencent()
     {
-        $this->script = <<<JS
-        (function() {
-            function initTencentMap(name) {
-                var lat = $('#{$this->id['lat']}');
-                var lng = $('#{$this->id['lng']}');
-    
-                var center = new qq.maps.LatLng(lat.val(), lng.val());
-    
-                var container = document.getElementById("map_"+name);
-                var map = new qq.maps.Map(container, {
-                    center: center,
-                    zoom: 13
-                });
-    
-                var marker = new qq.maps.Marker({
-                    position: center,
-                    draggable: true,
-                    map: map
-                });
-    
-                if( ! lat.val() || ! lng.val()) {
-                    var citylocation = new qq.maps.CityService({
-                        complete : function(result){
-                            map.setCenter(result.detail.latLng);
-                            marker.setPosition(result.detail.latLng);
-                        }
-                    });
-    
-                    citylocation.searchLocalCity();
-                }
-    
-                qq.maps.event.addListener(map, 'click', function(event) {
-                    marker.setPosition(event.latLng);
-                });
-    
-                qq.maps.event.addListener(marker, 'position_changed', function(event) {
-                    var position = marker.getPosition();
-                    lat.val(position.getLat());
-                    lng.val(position.getLng());
-                });
-            }
-    
-            initTencentMap('{$this->id['lat']}{$this->id['lng']}');
-        })();
-JS;
+        return $this->addVariables(['type' => 'tencent']);
     }
 
-    public function useYandexMap()
+    public function yandex()
     {
-        $this->script = <<<JS
-        (function() {
-            function initYandexMap(name) {
-                ymaps.ready(function(){
-        
-                    var lat = $('#{$this->id['lat']}');
-                    var lng = $('#{$this->id['lng']}');
-        
-                    var myMap = new ymaps.Map("map_"+name, {
-                        center: [lat.val(), lng.val()],
-                        zoom: 18
-                    }); 
-    
-                    var myPlacemark = new ymaps.Placemark([lat.val(), lng.val()], {
-                    }, {
-                        preset: 'islands#redDotIcon',
-                        draggable: true
-                    });
-    
-                    myPlacemark.events.add(['dragend'], function (e) {
-                        lat.val(myPlacemark.geometry.getCoordinates()[0]);
-                        lng.val(myPlacemark.geometry.getCoordinates()[1]);
-                    });                
-    
-                    myMap.geoObjects.add(myPlacemark);
-                });
-    
-            }
-            
-            initYandexMap('{$this->id['lat']}{$this->id['lng']}');
-        })();
-JS;
+        return $this->addVariables(['type' => 'yandex']);
     }
 
-    public function useBaiduMap()
+    public function baidu()
     {
-        $this->script = <<<JS
-        (function() {
-            function initBaiduMap(name) {
-                var lat = $('#{$this->id['lat']}');
-                var lng = $('#{$this->id['lng']}');
-
-                var map = new BMap.Map("map_"+name);
-                var point = new BMap.Point(lng.val(), lat.val());
-                map.centerAndZoom(point, 15);
-                map.enableScrollWheelZoom(true);
-
-                var marker = new BMap.Marker(point);
-                map.addOverlay(marker);
-                marker.enableDragging();
-
-                if( ! lat.val() || ! lng.val()) {
-                    var geolocation = new BMap.Geolocation();
-                    geolocation.getCurrentPosition(function(e){
-                        if(this.getStatus() == BMAP_STATUS_SUCCESS){
-                            map.panTo(e.point);
-                            marker.setPosition(e.point);
-
-                            lat.val(e.point.lat);
-                            lng.val(e.point.lng);
-
-                        } else {
-                            console.log('failed'+this.getStatus());
-                        }
-                    },{enableHighAccuracy: true})
-                }
-
-                map.addEventListener("click", function(e){
-                    marker.setPosition(e.point);
-                    lat.val(e.point.lat);
-                    lng.val(e.point.lng);
-                });
-
-                marker.addEventListener("dragend", function(e){
-                    lat.val(e.point.lat);
-                    lng.val(e.point.lng);
-                });
-                var ac = new BMap.Autocomplete(
-                    {"input" : "search-{$this->id['lat']}{$this->id['lng']}"
-                    ,"location" : map
-                });
-                var address;
-                ac.addEventListener("onconfirm", function(e) {    //鼠标点击下拉列表后的事件
-                    var _value = e.item.value;
-                    address = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
-                    setPlace();
-                });
-                function setPlace(){
-                    function myFun(){
-                        var pp = local.getResults().getPoi(0).point;
-                        map.centerAndZoom(pp, 15);
-                        marker.setPosition(pp);
-                        lat.val(pp.lat);
-                        lng.val(pp.lng);
-                    }
-                    var local = new BMap.LocalSearch(map, {
-                        onSearchComplete: myFun
-                    });
-                    local.search(address);
-                }
-            }
-
-            initBaiduMap('{$this->id['lat']}{$this->id['lng']}');
-        })()
-JS;
+        return $this->addVariables(['type' => 'baidu', 'searchId' => 'bdmap'.Str::random()]);
     }
 }