@antv/l7-component 2.21.1 → 2.21.2

package/es/marker.js

@@ -1,514 +1,462 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
-import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
-import _inherits from "@babel/runtime/helpers/esm/inherits";
-import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 import { DOM, anchorTranslate, anchorType, applyAnchorClass, bindAll, isPC } from '@antv/l7-utils';
 import { EventEmitter } from 'eventemitter3';
 
 //  marker 支持 dragger 未完成
-var Marker = /*#__PURE__*/function (_EventEmitter) {
-  _inherits(Marker, _EventEmitter);
-  var _super = _createSuper(Marker);
-  function Marker(option) {
-    var _this;
-    _classCallCheck(this, Marker);
-    _this = _super.call(this);
-    _defineProperty(_assertThisInitialized(_this), "added", false);
-    _defineProperty(_assertThisInitialized(_this), "preLngLat", {
+export default class Marker extends EventEmitter {
+  // tslint:disable-next-line: no-empty
+  getMarkerLayerContainerSize() {}
+  constructor(option) {
+    super();
+    _defineProperty(this, "markerOption", void 0);
+    _defineProperty(this, "popup", void 0);
+    _defineProperty(this, "mapsService", void 0);
+    _defineProperty(this, "lngLat", void 0);
+    _defineProperty(this, "scene", void 0);
+    _defineProperty(this, "added", false);
+    _defineProperty(this, "preLngLat", {
       lng: 0,
       lat: 0
     });
-    _defineProperty(_assertThisInitialized(_this), "onMarkerDragStart", function (e) {
-      var mapContainer = _this.mapsService.getContainer();
+    _defineProperty(this, "onMarkerDragStart", e => {
+      const mapContainer = this.mapsService.getContainer();
       if (!mapContainer) {
         return;
       }
-      _this.mapsService.setMapStatus({
+      this.mapsService.setMapStatus({
         dragEnable: false,
         zoomEnable: false
       });
-      var _ref = mapContainer.getClientRects()[0],
-        containerX = _ref.left,
-        containerY = _ref.top;
-      var clickX = e.x,
-        clickY = e.y;
-      _this.preLngLat = _this.mapsService.containerToLngLat([clickX - containerX, clickY - containerY]);
-      _this.mapsService.on('mousemove', _this.onMarkerDragMove);
-      document.addEventListener('mouseup', _this.onMarkerDragEnd);
-      _this.emit('dragstart', _this.lngLat);
+      const {
+        left: containerX,
+        top: containerY
+      } = mapContainer.getClientRects()[0];
+      const {
+        x: clickX,
+        y: clickY
+      } = e;
+      this.preLngLat = this.mapsService.containerToLngLat([clickX - containerX, clickY - containerY]);
+      this.mapsService.on('mousemove', this.onMarkerDragMove);
+      document.addEventListener('mouseup', this.onMarkerDragEnd);
+      this.emit('dragstart', this.lngLat);
     });
-    _defineProperty(_assertThisInitialized(_this), "onMarkerDragMove", function (e) {
-      var _this$preLngLat = _this.preLngLat,
-        preLng = _this$preLngLat.lng,
-        preLat = _this$preLngLat.lat;
-      var _e$lnglat = e.lnglat,
-        curLng = _e$lnglat.lng,
-        curLat = _e$lnglat.lat;
-      var newLngLat = {
-        lng: _this.lngLat.lng + curLng - preLng,
-        lat: _this.lngLat.lat + curLat - preLat
+    _defineProperty(this, "onMarkerDragMove", e => {
+      const {
+        lng: preLng,
+        lat: preLat
+      } = this.preLngLat;
+      const {
+        lng: curLng,
+        lat: curLat
+      } = e.lnglat;
+      const newLngLat = {
+        lng: this.lngLat.lng + curLng - preLng,
+        lat: this.lngLat.lat + curLat - preLat
       };
-      _this.setLnglat(newLngLat);
-      _this.preLngLat = e.lnglat;
-      _this.emit('dragging', newLngLat);
+      this.setLnglat(newLngLat);
+      this.preLngLat = e.lnglat;
+      this.emit('dragging', newLngLat);
     });
-    _defineProperty(_assertThisInitialized(_this), "onMarkerDragEnd", function () {
-      _this.mapsService.setMapStatus({
+    _defineProperty(this, "onMarkerDragEnd", () => {
+      this.mapsService.setMapStatus({
         dragEnable: true,
         zoomEnable: true
       });
-      _this.mapsService.off('mousemove', _this.onMarkerDragMove);
-      document.removeEventListener('mouseup', _this.onMarkerDragEnd);
-      _this.emit('dragend', _this.lngLat);
+      this.mapsService.off('mousemove', this.onMarkerDragMove);
+      document.removeEventListener('mouseup', this.onMarkerDragEnd);
+      this.emit('dragend', this.lngLat);
     });
-    _defineProperty(_assertThisInitialized(_this), "eventHandle", function (e) {
-      _this.polyfillEvent(e);
-      _this.emit(e.type, {
+    _defineProperty(this, "eventHandle", e => {
+      this.polyfillEvent(e);
+      this.emit(e.type, {
         target: e,
-        data: _this.markerOption.extData,
-        lngLat: _this.lngLat
+        data: this.markerOption.extData,
+        lngLat: this.lngLat
       });
     });
-    _this.markerOption = _objectSpread(_objectSpread({}, _this.getDefault()), option);
-    bindAll(['update', 'onMove', 'onMapClick', 'updatePositionWhenZoom'], _assertThisInitialized(_this));
-    _this.init();
-    return _this;
+    /**
+     * 高德 2.x 使用了 fastClick.js 避免延迟，导致 IOS 移动端的 click 事件不会正常触发，需要手动触发
+     * @param e
+     */
+    _defineProperty(this, "touchStartTime", void 0);
+    this.markerOption = _objectSpread(_objectSpread({}, this.getDefault()), option);
+    bindAll(['update', 'onMove', 'onMapClick', 'updatePositionWhenZoom'], this);
+    this.init();
   }
-  _createClass(Marker, [{
-    key: "getMarkerLayerContainerSize",
-    value:
-    // tslint:disable-next-line: no-empty
-    function getMarkerLayerContainerSize() {}
-  }, {
-    key: "getDefault",
-    value: function getDefault() {
-      return {
-        element: undefined,
-        // DOM element
-        anchor: anchorType.BOTTOM,
-        offsets: [0, 0],
-        color: '#5B8FF9',
-        draggable: false
-      };
-    }
-  }, {
-    key: "addTo",
-    value: function addTo(scene) {
-      this.scene = scene;
-      this.mapsService = scene.mapService;
-      var element = this.markerOption.element;
-      this.mapsService.getMarkerContainer().appendChild(element);
-      this.registerMarkerEvent(element);
-      this.mapsService.on('camerachange', this.update); // 注册高德1.x 的地图事件监听
-      this.update();
-      this.updateDraggable();
-      this.added = true;
-      this.emit('added');
-      return this;
-    }
-  }, {
-    key: "remove",
-    value: function remove() {
-      if (this.mapsService) {
-        this.mapsService.off('click', this.onMapClick);
-        this.mapsService.off('move', this.update);
-        this.mapsService.off('moveend', this.update);
-        this.mapsService.off('camerachange', this.update);
-      }
-      this.unRegisterMarkerEvent();
-      this.removeAllListeners();
-      var element = this.markerOption.element;
-      if (element) {
-        DOM.remove(element);
-      }
-      if (this.popup) {
-        this.popup.remove();
-      }
-      return this;
+  getDefault() {
+    return {
+      element: undefined,
+      // DOM element
+      anchor: anchorType.BOTTOM,
+      offsets: [0, 0],
+      color: '#5B8FF9',
+      draggable: false
+    };
+  }
+  addTo(scene) {
+    this.scene = scene;
+    this.mapsService = scene.mapService;
+    const {
+      element
+    } = this.markerOption;
+    this.mapsService.getMarkerContainer().appendChild(element);
+    this.registerMarkerEvent(element);
+    this.mapsService.on('camerachange', this.update); // 注册高德1.x 的地图事件监听
+    this.update();
+    this.updateDraggable();
+    this.added = true;
+    this.emit('added');
+    return this;
+  }
+  remove() {
+    if (this.mapsService) {
+      this.mapsService.off('click', this.onMapClick);
+      this.mapsService.off('move', this.update);
+      this.mapsService.off('moveend', this.update);
+      this.mapsService.off('camerachange', this.update);
     }
-  }, {
-    key: "setLnglat",
-    value: function setLnglat(lngLat) {
-      this.lngLat = lngLat;
-      if (Array.isArray(lngLat)) {
-        this.lngLat = {
-          lng: lngLat[0],
-          lat: lngLat[1]
-        };
-      }
-      if (this.popup) {
-        this.popup.setLnglat(this.lngLat);
-      }
-      this.update();
-      return this;
+    this.unRegisterMarkerEvent();
+    this.removeAllListeners();
+    const {
+      element
+    } = this.markerOption;
+    if (element) {
+      DOM.remove(element);
     }
-  }, {
-    key: "getLnglat",
-    value: function getLnglat() {
-      return this.lngLat;
+    if (this.popup) {
+      this.popup.remove();
     }
-  }, {
-    key: "getElement",
-    value: function getElement() {
-      return this.markerOption.element;
+    return this;
+  }
+  setLnglat(lngLat) {
+    this.lngLat = lngLat;
+    if (Array.isArray(lngLat)) {
+      this.lngLat = {
+        lng: lngLat[0],
+        lat: lngLat[1]
+      };
     }
-  }, {
-    key: "setElement",
-    value: function setElement(el) {
-      var _this2 = this;
-      if (!this.added) {
-        this.once('added', function () {
-          _this2.setElement(el);
-        });
-        return this;
-      }
-      var element = this.markerOption.element;
-      if (element) {
-        DOM.remove(element);
-      }
-      this.markerOption.element = el;
-      this.init();
-      this.mapsService.getMarkerContainer().appendChild(el);
-      this.registerMarkerEvent(el);
-      this.updateDraggable();
-      this.update();
-      return this;
+    if (this.popup) {
+      this.popup.setLnglat(this.lngLat);
     }
-  }, {
-    key: "openPopup",
-    value: function openPopup() {
-      var _this3 = this;
-      if (!this.added) {
-        this.once('added', function () {
-          _this3.openPopup();
-        });
-        return this;
-      }
-      var popup = this.popup;
-      if (!popup) {
-        return this;
-      }
-      if (!popup.isOpen()) {
-        popup.addTo(this.scene);
-      }
+    this.update();
+    return this;
+  }
+  getLnglat() {
+    return this.lngLat;
+  }
+  getElement() {
+    return this.markerOption.element;
+  }
+  setElement(el) {
+    if (!this.added) {
+      this.once('added', () => {
+        this.setElement(el);
+      });
       return this;
     }
-  }, {
-    key: "closePopup",
-    value: function closePopup() {
-      var _this4 = this;
-      if (!this.added) {
-        this.once('added', function () {
-          _this4.closePopup();
-        });
-      }
-      var popup = this.popup;
-      if (popup) {
-        popup.remove();
-      }
-      return this;
+    const {
+      element
+    } = this.markerOption;
+    if (element) {
+      DOM.remove(element);
     }
-  }, {
-    key: "setPopup",
-    value: function setPopup(popup) {
-      this.popup = popup;
-      if (this.lngLat) {
-        this.popup.setLnglat(this.lngLat);
-      }
+    this.markerOption.element = el;
+    this.init();
+    this.mapsService.getMarkerContainer().appendChild(el);
+    this.registerMarkerEvent(el);
+    this.updateDraggable();
+    this.update();
+    return this;
+  }
+  openPopup() {
+    if (!this.added) {
+      this.once('added', () => {
+        this.openPopup();
+      });
       return this;
     }
-  }, {
-    key: "togglePopup",
-    value: function togglePopup() {
-      var popup = this.popup;
-      if (!popup) {
-        return this;
-      } else if (popup.isOpen()) {
-        popup.remove();
-      } else {
-        popup.addTo(this.scene);
-      }
+    const popup = this.popup;
+    if (!popup) {
       return this;
     }
-  }, {
-    key: "getPopup",
-    value: function getPopup() {
-      return this.popup;
+    if (!popup.isOpen()) {
+      popup.addTo(this.scene);
     }
-  }, {
-    key: "getOffset",
-    value: function getOffset() {
-      return this.markerOption.offsets;
+    return this;
+  }
+  closePopup() {
+    if (!this.added) {
+      this.once('added', () => {
+        this.closePopup();
+      });
     }
-  }, {
-    key: "setDraggable",
-    value: function setDraggable(draggable) {
-      this.markerOption.draggable = draggable;
-      this.updateDraggable();
+    const popup = this.popup;
+    if (popup) {
+      popup.remove();
     }
-  }, {
-    key: "getDraggable",
-    value: function getDraggable() {
-      return this.markerOption.draggable;
+    return this;
+  }
+  setPopup(popup) {
+    this.popup = popup;
+    if (this.lngLat) {
+      this.popup.setLnglat(this.lngLat);
     }
-  }, {
-    key: "getExtData",
-    value: function getExtData() {
-      return this.markerOption.extData;
+    return this;
+  }
+  togglePopup() {
+    const popup = this.popup;
+    if (!popup) {
+      return this;
+    } else if (popup.isOpen()) {
+      popup.remove();
+    } else {
+      popup.addTo(this.scene);
     }
-  }, {
-    key: "setExtData",
-    value: function setExtData(data) {
-      this.markerOption.extData = data;
+    return this;
+  }
+  getPopup() {
+    return this.popup;
+  }
+  getOffset() {
+    return this.markerOption.offsets;
+  }
+  setDraggable(draggable) {
+    this.markerOption.draggable = draggable;
+    this.updateDraggable();
+  }
+  getDraggable() {
+    return this.markerOption.draggable;
+  }
+  getExtData() {
+    return this.markerOption.extData;
+  }
+  setExtData(data) {
+    this.markerOption.extData = data;
+  }
+  update() {
+    if (!this.mapsService) {
+      return;
     }
-  }, {
-    key: "update",
-    value: function update() {
-      if (!this.mapsService) {
-        return;
-      }
-      var _this$markerOption = this.markerOption,
-        element = _this$markerOption.element,
-        anchor = _this$markerOption.anchor;
-      this.updatePosition();
-      DOM.setTransform(element, "".concat(anchorTranslate[anchor]));
+    const {
+      element,
+      anchor
+    } = this.markerOption;
+    this.updatePosition();
+    DOM.setTransform(element, `${anchorTranslate[anchor]}`);
+  }
+  //天地图在开始缩放时触发 更新目标位置时添加过渡效果
+  updatePositionWhenZoom(ev) {
+    if (!this.mapsService) {
+      return;
     }
-    //天地图在开始缩放时触发 更新目标位置时添加过渡效果
-  }, {
-    key: "updatePositionWhenZoom",
-    value: function updatePositionWhenZoom(ev) {
-      if (!this.mapsService) {
+    const {
+      element,
+      offsets
+    } = this.markerOption;
+    const {
+      lng,
+      lat
+    } = this.lngLat;
+    if (element) {
+      element.style.display = 'block';
+      element.style.whiteSpace = 'nowrap';
+      const {
+        containerHeight,
+        containerWidth,
+        bounds
+      } = this.getMarkerLayerContainerSize() || this.getCurrentContainerSize();
+      if (!bounds) {
         return;
       }
-      var _this$markerOption2 = this.markerOption,
-        element = _this$markerOption2.element,
-        offsets = _this$markerOption2.offsets;
-      var _this$lngLat = this.lngLat,
-        lng = _this$lngLat.lng,
-        lat = _this$lngLat.lat;
-      if (element) {
-        element.style.display = 'block';
-        element.style.whiteSpace = 'nowrap';
-        var _ref2 = this.getMarkerLayerContainerSize() || this.getCurrentContainerSize(),
-          containerHeight = _ref2.containerHeight,
-          containerWidth = _ref2.containerWidth,
-          bounds = _ref2.bounds;
-        if (!bounds) {
-          return;
-        }
-        var map = ev.map;
-        var center = ev.center;
-        var zoom = ev.zoom;
-        var projectedCenter = map.DE(this.lngLat, zoom, center);
-        projectedCenter.x = Math.round(projectedCenter.x + offsets[0]);
-        projectedCenter.y = Math.round(projectedCenter.y - offsets[1]);
-        // 当前可视区域包含跨日界线
-        if (Math.abs(bounds[0][0]) > 180 || Math.abs(bounds[1][0]) > 180) {
-          if (projectedCenter.x > containerWidth) {
-            // 日界线右侧点左移
-            var newPos = this.mapsService.lngLatToContainer([lng - 360, lat]);
-            projectedCenter.x = newPos.x;
-          }
-          if (projectedCenter.x < 0) {
-            // 日界线左侧点右移
-            var _newPos = this.mapsService.lngLatToContainer([lng + 360, lat]);
-            projectedCenter.x = _newPos.x;
-          }
+      const map = ev.map;
+      const center = ev.center;
+      const zoom = ev.zoom;
+      const projectedCenter = map.DE(this.lngLat, zoom, center);
+      projectedCenter.x = Math.round(projectedCenter.x + offsets[0]);
+      projectedCenter.y = Math.round(projectedCenter.y - offsets[1]);
+      // 当前可视区域包含跨日界线
+      if (Math.abs(bounds[0][0]) > 180 || Math.abs(bounds[1][0]) > 180) {
+        if (projectedCenter.x > containerWidth) {
+          // 日界线右侧点左移
+          const newPos = this.mapsService.lngLatToContainer([lng - 360, lat]);
+          projectedCenter.x = newPos.x;
         }
-        if (projectedCenter.x > containerWidth || projectedCenter.x < 0 || projectedCenter.y > containerHeight || projectedCenter.y < 0) {
-          element.style.display = 'none';
+        if (projectedCenter.x < 0) {
+          // 日界线左侧点右移
+          const newPos = this.mapsService.lngLatToContainer([lng + 360, lat]);
+          projectedCenter.x = newPos.x;
         }
-        element.style.left = projectedCenter.x + 'px';
-        element.style.top = projectedCenter.y + 'px';
-        element.style.transition = 'left 0.25s cubic-bezier(0,0,0.25,1), top 0.25s cubic-bezier(0,0,0.25,1)';
       }
-    }
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  }, {
-    key: "onMapClick",
-    value: function onMapClick(e) {
-      var element = this.markerOption.element;
-      if (this.popup && element) {
-        this.togglePopup();
+      if (projectedCenter.x > containerWidth || projectedCenter.x < 0 || projectedCenter.y > containerHeight || projectedCenter.y < 0) {
+        element.style.display = 'none';
       }
+      element.style.left = projectedCenter.x + 'px';
+      element.style.top = projectedCenter.y + 'px';
+      element.style.transition = 'left 0.25s cubic-bezier(0,0,0.25,1), top 0.25s cubic-bezier(0,0,0.25,1)';
     }
-  }, {
-    key: "getCurrentContainerSize",
-    value: function getCurrentContainerSize() {
-      var container = this.mapsService.getContainer();
-      return {
-        containerHeight: (container === null || container === void 0 ? void 0 : container.scrollHeight) || 0,
-        containerWidth: (container === null || container === void 0 ? void 0 : container.scrollWidth) || 0,
-        bounds: this.mapsService.getBounds()
-      };
+  }
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  onMapClick(e) {
+    const {
+      element
+    } = this.markerOption;
+    if (this.popup && element) {
+      this.togglePopup();
     }
-  }, {
-    key: "updateDraggable",
-    value: function updateDraggable() {
-      var element = this.markerOption.element;
-      element === null || element === void 0 || element.removeEventListener('mousedown', this.onMarkerDragStart);
-      this.mapsService.off('mousemove', this.onMarkerDragMove);
-      document.removeEventListener('mouseup', this.onMarkerDragEnd);
-      if (this.markerOption.draggable) {
-        element === null || element === void 0 || element.addEventListener('mousedown', this.onMarkerDragStart);
-      }
+  }
+  getCurrentContainerSize() {
+    const container = this.mapsService.getContainer();
+    return {
+      containerHeight: (container === null || container === void 0 ? void 0 : container.scrollHeight) || 0,
+      containerWidth: (container === null || container === void 0 ? void 0 : container.scrollWidth) || 0,
+      bounds: this.mapsService.getBounds()
+    };
+  }
+  updateDraggable() {
+    const {
+      element
+    } = this.markerOption;
+    element === null || element === void 0 || element.removeEventListener('mousedown', this.onMarkerDragStart);
+    this.mapsService.off('mousemove', this.onMarkerDragMove);
+    document.removeEventListener('mouseup', this.onMarkerDragEnd);
+    if (this.markerOption.draggable) {
+      element === null || element === void 0 || element.addEventListener('mousedown', this.onMarkerDragStart);
+    }
+  }
+  updatePosition() {
+    if (!this.mapsService) {
+      return;
     }
-  }, {
-    key: "updatePosition",
-    value: function updatePosition() {
-      if (!this.mapsService) {
+    const {
+      element,
+      offsets
+    } = this.markerOption;
+    const {
+      lng,
+      lat
+    } = this.lngLat;
+    const pos = this.mapsService.lngLatToContainer([lng, lat]);
+    if (element) {
+      element.style.display = 'block';
+      element.style.whiteSpace = 'nowrap';
+      const {
+        containerHeight,
+        containerWidth,
+        bounds
+      } = this.getMarkerLayerContainerSize() || this.getCurrentContainerSize();
+      if (!bounds) {
         return;
       }
-      var _this$markerOption3 = this.markerOption,
-        element = _this$markerOption3.element,
-        offsets = _this$markerOption3.offsets;
-      var _this$lngLat2 = this.lngLat,
-        lng = _this$lngLat2.lng,
-        lat = _this$lngLat2.lat;
-      var pos = this.mapsService.lngLatToContainer([lng, lat]);
-      if (element) {
-        element.style.display = 'block';
-        element.style.whiteSpace = 'nowrap';
-        var _ref3 = this.getMarkerLayerContainerSize() || this.getCurrentContainerSize(),
-          containerHeight = _ref3.containerHeight,
-          containerWidth = _ref3.containerWidth,
-          bounds = _ref3.bounds;
-        if (!bounds) {
-          return;
-        }
-        // 当前可视区域包含跨日界线
-        if (Math.abs(bounds[0][0]) > 180 || Math.abs(bounds[1][0]) > 180) {
-          if (pos.x > containerWidth) {
-            // 日界线右侧点左移
-            var newPos = this.mapsService.lngLatToContainer([lng - 360, lat]);
-            pos.x = newPos.x;
-          }
-          if (pos.x < 0) {
-            // 日界线左侧点右移
-            var _newPos2 = this.mapsService.lngLatToContainer([lng + 360, lat]);
-            pos.x = _newPos2.x;
-          }
+      // 当前可视区域包含跨日界线
+      if (Math.abs(bounds[0][0]) > 180 || Math.abs(bounds[1][0]) > 180) {
+        if (pos.x > containerWidth) {
+          // 日界线右侧点左移
+          const newPos = this.mapsService.lngLatToContainer([lng - 360, lat]);
+          pos.x = newPos.x;
         }
-        // 不在当前可视区域内隐藏点
-        if (pos.x > containerWidth || pos.x < 0 || pos.y > containerHeight || pos.y < 0) {
-          element.style.display = 'none';
+        if (pos.x < 0) {
+          // 日界线左侧点右移
+          const newPos = this.mapsService.lngLatToContainer([lng + 360, lat]);
+          pos.x = newPos.x;
         }
-        element.style.left = pos.x + offsets[0] + 'px';
-        element.style.top = pos.y - offsets[1] + 'px';
       }
-    }
-  }, {
-    key: "init",
-    value: function init() {
-      var _this5 = this;
-      var element = this.markerOption.element;
-      var _this$markerOption4 = this.markerOption,
-        color = _this$markerOption4.color,
-        anchor = _this$markerOption4.anchor;
-      if (!element) {
-        element = DOM.create('div');
-        this.markerOption.element = element;
-        var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-        svg.setAttributeNS(null, 'display', 'block');
-        svg.setAttributeNS(null, 'height', '48px');
-        svg.setAttributeNS(null, 'width', '48px');
-        svg.setAttributeNS(null, 'viewBox', '0 0 1024 1024');
-        var path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
-        path.setAttributeNS(null, 'd', 'M512 490.666667C453.12 490.666667 405.333333 442.88 405.333333 384 405.333333 325.12 453.12 277.333333 512 277.333333 570.88 277.333333 618.666667 325.12 618.666667 384 618.666667 442.88 570.88 490.666667 512 490.666667M512 85.333333C346.88 85.333333 213.333333 218.88 213.333333 384 213.333333 608 512 938.666667 512 938.666667 512 938.666667 810.666667 608 810.666667 384 810.666667 218.88 677.12 85.333333 512 85.333333Z');
-        path.setAttributeNS(null, 'fill', color);
-        svg.appendChild(path);
-        element.appendChild(svg);
+      // 不在当前可视区域内隐藏点
+      if (pos.x > containerWidth || pos.x < 0 || pos.y > containerHeight || pos.y < 0) {
+        element.style.display = 'none';
       }
-      DOM.addClass(element, 'l7-marker');
-      Object.keys(this.markerOption.style || {}).forEach(
-      // @ts-ignore
-      function (key) {
-        var _this5$markerOption, _this5$markerOption2;
-        var value = ((_this5$markerOption = _this5.markerOption) === null || _this5$markerOption === void 0 ? void 0 : _this5$markerOption.style) && ((_this5$markerOption2 = _this5.markerOption) === null || _this5$markerOption2 === void 0 ? void 0 : _this5$markerOption2.style[key]);
-        if (element) {
-          // @ts-ignore
-          element.style[key] = value;
-        }
-      });
-      applyAnchorClass(element, anchor, 'marker');
+      element.style.left = pos.x + offsets[0] + 'px';
+      element.style.top = pos.y - offsets[1] + 'px';
     }
-  }, {
-    key: "registerMarkerEvent",
-    value: function registerMarkerEvent(element) {
-      element.addEventListener('click', this.onMapClick);
-      element.addEventListener('mousemove', this.eventHandle);
-      element.addEventListener('click', this.eventHandle);
-      element.addEventListener('mousedown', this.eventHandle);
-      element.addEventListener('mouseup', this.eventHandle);
-      element.addEventListener('dblclick', this.eventHandle);
-      element.addEventListener('contextmenu', this.eventHandle);
-      element.addEventListener('mouseover', this.eventHandle);
-      element.addEventListener('mouseout', this.eventHandle);
-      element.addEventListener('touchstart', this.eventHandle);
-      element.addEventListener('touchend', this.eventHandle);
+  }
+  init() {
+    let {
+      element
+    } = this.markerOption;
+    const {
+      color,
+      anchor
+    } = this.markerOption;
+    if (!element) {
+      element = DOM.create('div');
+      this.markerOption.element = element;
+      const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+      svg.setAttributeNS(null, 'display', 'block');
+      svg.setAttributeNS(null, 'height', '48px');
+      svg.setAttributeNS(null, 'width', '48px');
+      svg.setAttributeNS(null, 'viewBox', '0 0 1024 1024');
+      const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+      path.setAttributeNS(null, 'd', 'M512 490.666667C453.12 490.666667 405.333333 442.88 405.333333 384 405.333333 325.12 453.12 277.333333 512 277.333333 570.88 277.333333 618.666667 325.12 618.666667 384 618.666667 442.88 570.88 490.666667 512 490.666667M512 85.333333C346.88 85.333333 213.333333 218.88 213.333333 384 213.333333 608 512 938.666667 512 938.666667 512 938.666667 810.666667 608 810.666667 384 810.666667 218.88 677.12 85.333333 512 85.333333Z');
+      path.setAttributeNS(null, 'fill', color);
+      svg.appendChild(path);
+      element.appendChild(svg);
     }
-  }, {
-    key: "unRegisterMarkerEvent",
-    value: function unRegisterMarkerEvent() {
-      var element = this.getElement();
-      element.removeEventListener('click', this.onMapClick);
-      element.removeEventListener('mousemove', this.eventHandle);
-      element.removeEventListener('click', this.eventHandle);
-      element.removeEventListener('mousedown', this.eventHandle);
-      element.removeEventListener('mouseup', this.eventHandle);
-      element.removeEventListener('dblclick', this.eventHandle);
-      element.removeEventListener('contextmenu', this.eventHandle);
-      element.removeEventListener('mouseover', this.eventHandle);
-      element.removeEventListener('mouseout', this.eventHandle);
-      element.removeEventListener('touchstart', this.eventHandle);
-      element.removeEventListener('touchend', this.eventHandle);
+    DOM.addClass(element, 'l7-marker');
+    Object.keys(this.markerOption.style || {}).forEach(
+    // @ts-ignore
+    key => {
+      var _this$markerOption, _this$markerOption2;
+      const value = ((_this$markerOption = this.markerOption) === null || _this$markerOption === void 0 ? void 0 : _this$markerOption.style) && ((_this$markerOption2 = this.markerOption) === null || _this$markerOption2 === void 0 ? void 0 : _this$markerOption2.style[key]);
+      if (element) {
+        // @ts-ignore
+        element.style[key] = value;
+      }
+    });
+    applyAnchorClass(element, anchor, 'marker');
+  }
+  registerMarkerEvent(element) {
+    element.addEventListener('click', this.onMapClick);
+    element.addEventListener('mousemove', this.eventHandle);
+    element.addEventListener('click', this.eventHandle);
+    element.addEventListener('mousedown', this.eventHandle);
+    element.addEventListener('mouseup', this.eventHandle);
+    element.addEventListener('dblclick', this.eventHandle);
+    element.addEventListener('contextmenu', this.eventHandle);
+    element.addEventListener('mouseover', this.eventHandle);
+    element.addEventListener('mouseout', this.eventHandle);
+    element.addEventListener('touchstart', this.eventHandle);
+    element.addEventListener('touchend', this.eventHandle);
+  }
+  unRegisterMarkerEvent() {
+    const element = this.getElement();
+    element.removeEventListener('click', this.onMapClick);
+    element.removeEventListener('mousemove', this.eventHandle);
+    element.removeEventListener('click', this.eventHandle);
+    element.removeEventListener('mousedown', this.eventHandle);
+    element.removeEventListener('mouseup', this.eventHandle);
+    element.removeEventListener('dblclick', this.eventHandle);
+    element.removeEventListener('contextmenu', this.eventHandle);
+    element.removeEventListener('mouseover', this.eventHandle);
+    element.removeEventListener('mouseout', this.eventHandle);
+    element.removeEventListener('touchstart', this.eventHandle);
+    element.removeEventListener('touchend', this.eventHandle);
+  }
+  polyfillEvent(e) {
+    if (!this.mapsService || this.mapsService.version !== 'GAODE2.x') {
+      return;
     }
-  }, {
-    key: "polyfillEvent",
-    value:
-    /**
-     * 高德 2.x 使用了 fastClick.js 避免延迟，导致 IOS 移动端的 click 事件不会正常触发，需要手动触发
-     * @param e
-     */
-
-    function polyfillEvent(e) {
-      if (!this.mapsService || this.mapsService.version !== 'GAODE2.x') {
-        return;
+    if (!isPC()) {
+      if (e.type === 'touchstart') {
+        this.touchStartTime = Date.now();
       }
-      if (!isPC()) {
-        if (e.type === 'touchstart') {
-          this.touchStartTime = Date.now();
-        }
-        if (e.type === 'touchend' && Date.now() - this.touchStartTime < 300) {
-          this.emit('click', {
-            target: e,
-            data: this.markerOption.extData,
-            lngLat: this.lngLat
-          });
-        }
+      if (e.type === 'touchend' && Date.now() - this.touchStartTime < 300) {
+        this.emit('click', {
+          target: e,
+          data: this.markerOption.extData,
+          lngLat: this.lngLat
+        });
       }
     }
+  }
 
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  }, {
-    key: "addDragHandler",
-    value: function addDragHandler(e) {
-      return null;
-    }
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  addDragHandler(e) {
+    return null;
+  }
 
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  }, {
-    key: "onUp",
-    value: function onUp(e) {
-      throw new Error('Method not implemented.');
-    }
-  }]);
-  return Marker;
-}(EventEmitter);
-export { Marker as default };
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  onUp(e) {
+    throw new Error('Method not implemented.');
+  }
+}