(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 = $(`
打开地图
取消
`); 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) + '
我的定位
'); 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(); })();