feat: 新增地图选点组件

public/static/plugs/mapLocation/mapLocation.js

@@ -0,0 +1,182 @@
+(function () {
+    var mapLocation = function () {
+        $(function () { });
+    };
+
+    mapLocation.prototype.render = function (elem, data) {
+        var defaultOption = {
+            defaultLocationLongitude: 116.407466,
+            defaultLocationLatitude: 39.904989,
+            defaultZoom: 16,
+            height: '40vw',
+            width: '100%',
+            name: ua.randdomString(),
+            location: null,
+            locationLatitude: null,
+            locationLongitude: null
+        };
+
+        var options = $.extend(defaultOption, data);
+
+        if (!options.key) {
+            console.log('请提供天地图API Key');
+            return;
+        }
+        // console.log(options);
+
+        var mapId = options.name;
+        var mapContainer = $(`
+            <div class="ul-map-location">
+                <div class="option layui-btn-container">
+                    <div class="layui-btn layui-btn-sm init">打开地图</div>
+                    <div class="layui-btn layui-btn-sm cancel">取消</div>
+                </div>
+                <div id="${mapId}"></div>
+                <div class="location-message" style="display: none;"></div>
+                <div class="error-message" style="display: none;"></div>
+            </div>
+        `);
+        mapContainer.appendTo(elem);
+        var mapContent = $('#' + mapId);
+        mapContent.css('height', options.height);
+        mapContent.css('width', options.width);
+        mapContent.hide();
+
+        var map = null;
+        var oldMarker = null;
+        // 初始化地图的函数
+        function initMap() {
+            if (map) return; // 如果地图已经初始化，直接返回
+            var normalm = L.tileLayer.chinaProvider('TianDiTu.Normal.Map', {
+                key: options.key,
+            }),
+                normala = L.tileLayer.chinaProvider('TianDiTu.Normal.Annotion', {
+                    key: options.key,
+                }),
+                imgm = L.tileLayer.chinaProvider('TianDiTu.Satellite.Map', {
+                    key: options.key,
+                }),
+                imga = L.tileLayer.chinaProvider('TianDiTu.Satellite.Annotion', {
+                    key: options.key,
+                });
+
+            var normal = L.layerGroup([normalm, normala]),
+                image = L.layerGroup([imgm, imga]);
+
+            var baseLayers = {
+                "地图": normal,
+                "影像": image,
+            };
+
+            var overlayLayers = {};
+
+            map = L.map(mapId, {
+                center: [35.104, 118.3556],
+                layers: [normal],
+                zoom: 12
+            });
+
+            // 多图层切换有问题，需要换成不含form element的方式
+            // L.control
+            // .layers(baseLayers, overlayLayers)
+            // .addTo(map);
+
+            
+            map.on('click', function (e) {
+                if (oldMarker) {
+                    oldMarker.removeFrom(map);
+                }
+                var marker = L.marker(e.latlng);
+                marker.addTo(map);
+                oldMarker = marker;
+
+                $.get('http://api.tianditu.gov.cn/geocoder', {
+                    postStr: JSON.stringify({
+                        lon: e.latlng.lng,
+                        lat: e.latlng.lat,
+                        ver: 1,
+                    }),
+                    type: 'geocode',
+                    tk: options.key
+                }, function (response) {
+                    response = JSON.parse(response);
+                    if (response.status != 0) {
+                        mapContainer.find('.error-message').text('获取位置信息失败，请稍后重试');
+                        mapContainer.find('.error-message').show();
+                        return;
+                    }
+
+                    var address = response.result.formatted_address;
+                    var locationLongitude = e.latlng.lng;
+                    var locationLatitude = e.latlng.lat;
+
+                    if (options.location) {
+                        $(options.location).val(address);
+                    }
+                    if (options.locationLatitude) {
+                        $(options.locationLatitude).val(locationLatitude);
+                    }
+                    if (options.locationLongitude) {
+                        $(options.locationLongitude).val(locationLongitude);
+                    }
+                });
+            });
+        }
+
+        // 绑定初始化事件
+        mapContainer.find('.init').on('click', function () {
+            mapContent.show();
+            initMap();
+            $(this).hide();
+            mapContainer.find('.cancel').show();
+
+            map.on('locationfound', function (e) {
+                mapContainer.find('.location-message').html('您当前的位置：' + e.latlng.lat.toFixed(6) + ',' + e.latlng.lng.toFixed(6) + ' <div class="layui-btn layui-btn-xs location-me">我的定位</div>');
+                mapContainer.find('.location-me').data('latlng', e.latlng);
+                if (!options.locationLatitude || !options.locationLongitude || !$(options.locationLatitude).val() || !$(options.locationLongitude).val()) {
+                    map.flyTo(e.latlng, 16);
+                }
+            });
+            map.on('locationerror', function (e) {
+                console.error(e);
+
+                mapContainer.find('.location-message').text('获取您的位置失败，请检查您的网络或地理位置服务是否开启');
+            });
+
+            mapContainer.find('.location-message').text('正在获取定位...').show();
+
+            map.locate();
+
+            if (options.locationLatitude && options.locationLongitude && $(options.locationLatitude).val() && $(options.locationLongitude).val()) {
+                var lat = $(options.locationLatitude).val();
+                var lng = $(options.locationLongitude).val();
+                var oldMarker = L.marker([lat,lng]);
+                oldMarker.addTo(map);
+                map.flyTo([lat,lng], options.defaultZoom);
+            }
+        });
+        mapContainer.on('click', '.location-me', function () {
+            var latlng = $(this).data('latlng');
+            map.flyTo(latlng, 16);
+        });
+        // 绑定取消事件
+        mapContainer.find('.cancel').on('click', function () {
+            mapContent.hide();
+            $(this).hide();
+            mapContainer.find('.init').show();
+            mapContainer.find('.location-message').hide();
+            mapContainer.find('.error-message').hide();
+            // 如果需要销毁地图实例，可以在这里添加相关代码
+            // if (map) {
+            //     map.remove();
+            //     map = null;
+            // }
+        });
+
+        // 初始状态下隐藏取消按钮
+        mapContainer.find('.cancel').hide();
+        return elem;
+    };
+
+    window.mapLocation = new mapLocation();
+})();

public/static/plugs/ulthon-admin/ulthon-admin.js

@@ -1882,6 +1882,8 @@
 
             // 监听通用表格数据控件生成
             admin.api.tableData();
+            // 监听地图组件
+            admin.api.mapLocation();
 
             // 监听标签输入控件生成
             admin.api.tagInput();
@@ -2731,6 +2733,15 @@
                     tableData.render(v, data, admin);
                 });
 
+            },
+            mapLocation() {
+                var mapList = document.querySelectorAll('[data-toggle="map-location"]');
+
+                $.each(mapList, function (i, v) {
+                    var data = $(v).data();
+                    mapLocation.render(v, data, admin);
+                });
+
             },
             tagInput() {
                 var list = document.querySelectorAll('[data-toggle="tag-input"]');