Open
Description
-
天地图初始化
const map = new T.Map('map') map.enableScrollWheelZoom(); map.setMinZoom(MINZOOM); map.setMaxZoom(MAXZOOM); // MapType 类 map.setMapType(TMAP_NORMAL_MAP) // 设置中心点 const point = new T.LngLat(lng, lat); map.centerAndZoom(point, 16);
-
自定义overlay
// 创建自定义marker const marker = new definedOverlay(options) map.addOverLay(marker); marker.addEventListener('click', () => { console.log('marker click event'); });
// 自定义 overlay类 // 调用该类时,要确保 地图已初始化成功 const definedOverlay = T.Overlay.extend({ initialize: function (lnglat, options) { this.lnglat = lnglat; this.options = options; }, onAdd: function (map) { this.map = map; const div = (this._div = document.createElement('div')); div.style.position = 'absolute'; div.style.transform = 'translate3d(-50%, -50%, 0)'; div.style.height = '44px'; div.style.padding = '2px'; div.setAttribute('title', '点击可查看详情'); div.innerHTML = `自定义内容`; map.getPanes().overlayPane.appendChild(div); this.update(this.lnglat); return div; }, onRemove: function () { const parent = this._div.parentNode; if (parent) { parent.removeChild(this._div); this.map = null; this.div = null; } }, setLnglat: function (lnglat) { this.lnglat = lnglat; this.update(); }, getLnglat: function () { return this.lnglat; }, setPos: function (pos) { this.lnglat = this.map.layerPointToLngLat(pos); this.update(); }, update: function () { var pos = this.map.lngLatToLayerPoint(this.lnglat); this._div.style.top = pos.y + 'px'; this._div.style.left = pos.x + 'px'; }, // 隐藏overlay hide: function () { this._div.style.display = 'none'; }, // 显示overlay show: function () { this._div.style.display = 'block'; }, // overlay添加事件 addEventListener: function (type, callback) { if (this._div) { this._div['on' + type] = typeof callback === 'function' ? callback : function () {}; } }, // overlay 打开infowindow openInfoWindow: function (infoWindow) { this.map.openInfoWindow(infoWindow, this.lnglat); }, }); export default definedOverlay;
-
移除全部overlay
const overlays = map.getOverlays(); for (let i = 0; i < overlays.length; i++) { map.removeOverLay(overlays[i]); }
-
创建infoWindow
const infoWindow = new T.InfoWindow(); const sContent = document.createElement('div'); sContent.innerHTML= `自定义内容`; infoWindow.setContent(sContent); const x = 0; // 横向偏移 const y = -20; // 纵向偏移 infoWindow.setOffset(new T.Point(x, y)); marker.openInfoWindow(infoWindow);
-
创建marker,并添加拖拽事件
const point = new T.LngLat(lng, lat); const marker = new T.Marker(point, { draggable: true, // 开启拖拽 }); const width = 20; // 图标宽 const height = 20; // 图标高 new T.Icon({ iconUrl: '图片地址', iconSize: new T.Point(width, height), }); marker.setIcon(iconObj); marker.addEventListener('dragging', (e) => { console.log('拖拽事件对象:', e); console.log('经度:', e.lnglat.lng); console.log('纬度:', e.lnglat.lat); }); map.addOverLay(marker)