ulthon_admin/public/static/plugs/mapLocation/mapLocation.js

(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();
})();