表单地图组件新增高德地图支持

resources/views/form/map.blade.php

@@ -1,3 +1,10 @@
+<style>
+    .amap-icon img,
+    .amap-marker-content img{
+        width: 25px;
+        height: 34px;
+    }
+</style>
 <div class="{{$viewClass['form-group']}}">
 
     <label class="{{$viewClass['label']}} control-label">{!! $label !!}</label>
@@ -6,14 +13,16 @@
 
         @include('admin::form.error')
 
-        @if($type === 'baidu')
+        @if($type === 'baidu' || $type === 'amap')
             <div class="row mb-1">
                 <div class="col-md-5 col-md-offset-3">
                     <div class="input-group">
                         <input type="text" placeholder="{{ trans('admin.search') }}" class="form-control" id="{{ $searchId }}">
-                        <span class="input-group-btn">
-                        <button type="button" class="btn btn-primary btn-flat"><i class="fa fa-search"></i></button>
-                    </span>
+                        @if($type === 'baidu')
+                            <span class="input-group-btn">
+                                <button type="button" class="btn btn-primary btn-flat"><i class="fa fa-search"></i></button>
+                            </span>
+                        @endif
                     </div>
                 </div>
             </div>
@@ -199,4 +208,64 @@
 
     initBaiduMap();
     @endif
+    @if($type === 'amap')
+    function initAmap(){
+        var map = new AMap.Map(container[0], {
+            resizeEnable: true
+        });
+        var marker = new AMap.Marker({
+            position: new AMap.LngLat(lng.val(), lat.val()),
+            draggable: true,
+            map:map,
+            icon:'//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png'
+        });
+        if (!lng.val() || !lat.val()){
+            var geolocation = new AMap.Geolocation({
+                enableHighAccuracy: true,
+                zoomToAccuracy: true,
+                buttonPosition: 'RB'
+            })
+            geolocation.getCurrentPosition(function (status,result){
+                if (status === 'complete'){
+                    var point = new AMap.LngLat(result.position.lng, result.position.lat);
+                    map.setCenter(point);
+                    map.setZoom(15);
+                    marker.setPosition(point)
+                    lat.val(result.position.lat);
+                    lng.val(result.position.lng);
+                }
+            })
+        }
+        //输入提示
+        var auto = new AMap.Autocomplete({
+            input: "{{$searchId}}"
+        });
+        var placeSearch = new AMap.PlaceSearch({
+            map: map
+        });
+        AMap.event.addListener(auto, "select", function (e){
+            placeSearch.setCity(e.poi.adcode);
+            placeSearch.search(e.poi.name);
+        });
+        AMap.event.addListener(placeSearch, "markerClick", function (e){
+            let point = new AMap.LngLat(e.data.location.lng, e.data.location.lat);
+            marker.setPosition(point)
+            lat.val(e.data.location.lat);
+            lng.val(e.data.location.lng);
+        });
+        marker.on('dragend',function (e){
+            lat.val(e.lnglat.lat);
+            lng.val(e.lnglat.lng);
+        });
+        map.on('click',function (e){
+            if (e.type === 'click'){
+                let point = new AMap.LngLat(e.lnglat.lng, e.lnglat.lat);
+                marker.setPosition(point)
+                lat.val(e.lnglat.lat);
+                lng.val(e.lnglat.lng);
+            }
+        })
+    }
+    initAmap();
+    @endif
 </script>

src/Form/Field/Map.php

@@ -39,6 +39,9 @@ class Map extends Field
             case 'yandex':
                 $js = '//api-maps.yandex.ru/2.1/?lang=ru_RU';
                 break;
+            case 'amap':
+                $js = '//webapi.amap.com/maps?v=1.4.15&plugin=AMap.Autocomplete,AMap.PlaceSearch,AMap.Geolocation&key=' . ($keys['amap'] ?? env('AMAP_API_KEY'));;
+                break;
             case 'baidu':
             default:
                 $js = '//api.map.baidu.com/api?v=2.0&ak='.($keys['baidu'] ?? env('BAIDU_MAP_API_KEY'));
@@ -70,6 +73,9 @@ class Map extends Field
             case 'yandex':
                 $this->yandex();
                 break;
+            case 'amap':
+                $this->amap();
+                break;
             case 'baidu':
             default:
                 $this->baidu();
@@ -108,6 +114,11 @@ class Map extends Field
         return $this->addVariables(['type' => 'baidu', 'searchId' => 'bdmap'.Str::random()]);
     }
 
+    public function amap()
+    {
+        return $this->addVariables(['type' => 'amap', 'searchId' => 'amap' . Str::random()]);
+    }
+
     protected function getDefaultElementClass()
     {
         $class = $this->normalizeElementClass($this->column['lat']).$this->normalizeElementClass($this->column['lng']);