feat: optimize code

2025-09-06 17:33:18 +00:00 · 2025-01-09 16:28:50 +08:00
parent e8f261e0a9
commit e63fd15785
17 changed files with 124 additions and 130 deletions
--- a/frontend/src/metadata/components/popover/filter-popover/basic-filters/file-folder-filter.js
+++ b/frontend/src/metadata/components/popover/filter-popover/basic-filters/file-folder-filter.js
@@ -47,7 +47,7 @@ const FileOrFolderFilter = ({ readOnly, value = 'all', onChange: onChangeAPI })
  return (
    <CustomizeSelect
      readOnly={readOnly}
-      className="sf-metadata-basic-filters-select"
+      className="sf-metadata-basic-filters-select mr-4"
      value={displayValue}
      options={options}
      onSelectOption={onChange}
--- a/frontend/src/metadata/components/popover/filter-popover/basic-filters/gallery-file-type-filter.js
+++ b/frontend/src/metadata/components/popover/filter-popover/basic-filters/gallery-file-type-filter.js
@@ -47,7 +47,7 @@ const GalleryFileTypeFilter = ({ readOnly, value = 'picture', onChange: onChange
  return (
    <CustomizeSelect
      readOnly={readOnly}
-      className="sf-metadata-basic-filters-select sf-metadata-table-view-basic-filter-file-type-select ml-4"
+      className="sf-metadata-basic-filters-select sf-metadata-table-view-basic-filter-file-type-select mr-4"
      value={displayValue}
      options={options}
      onSelectOption={onChange}
--- a/frontend/src/metadata/components/popover/filter-popover/basic-filters/table-file-type-filter.js
+++ b/frontend/src/metadata/components/popover/filter-popover/basic-filters/table-file-type-filter.js
@@ -54,7 +54,7 @@ const TableFileTypeFilter = ({ readOnly, value, onChange: onChangeAPI }) => {
  return (
    <CustomizeSelect
      readOnly={readOnly}
-      className="sf-metadata-basic-filters-select sf-metadata-table-view-basic-filter-file-type-select ml-4"
+      className="sf-metadata-basic-filters-select sf-metadata-table-view-basic-filter-file-type-select mr-4"
      value={displayValue}
      options={options}
      onSelectOption={onChange}
--- a/frontend/src/metadata/components/popover/filter-popover/basic-filters/tags-filter.js
+++ b/frontend/src/metadata/components/popover/filter-popover/basic-filters/tags-filter.js
@@ -84,7 +84,7 @@ const TagsFilter = ({ readOnly, value: oldValue, onChange: onChangeAPI }) => {
      readOnly={readOnly}
      searchable={true}
      supportMultipleSelect={true}
-      className="sf-metadata-basic-filters-select sf-metadata-table-view-basic-filter-file-type-select ml-4"
+      className="sf-metadata-basic-filters-select sf-metadata-table-view-basic-filter-file-type-select mr-4"
      value={displayValue}
      options={options}
      onSelectOption={onChange}
--- a/frontend/src/metadata/components/view-toolbar/map-view-toolbar/index.js
+++ b/frontend/src/metadata/components/view-toolbar/map-view-toolbar/index.js
@@ -38,6 +38,7 @@ const MapViewToolBar = ({
  }, []);

  useEffect(() => {
+    setShowGalleryToolbar(false);
    const unsubscribeToggle = window.sfMetadataContext.eventBus.subscribe(EVENT_BUS_TYPE.TOGGLE_VIEW_TOOLBAR, onToggle);
    const unsubscribeView = window.sfMetadataContext.eventBus.subscribe(EVENT_BUS_TYPE.RESET_VIEW, resetView);
    return () => {
@@ -45,10 +46,6 @@ const MapViewToolBar = ({
      unsubscribeView && unsubscribeView();
    };
  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  useEffect(() => {
-    setShowGalleryToolbar(false);
  }, [viewID]);

  if (showGalleryToolbar) {
--- a/frontend/src/metadata/views/map/cluster-photos/index.js
+++ b/frontend/src/metadata/views/map/cluster-photos/index.js
@@ -85,12 +85,17 @@ const ClusterPhotos = ({ markerIds, onClose }) => {
  }, [metadata, repoID, viewID, store, loadData]);

  useEffect(() => {
-    const unsubscribeViewChange = window.sfMetadataContext.eventBus.subscribe(EVENT_BUS_TYPE.UPDATE_SERVER_VIEW, onViewChange);
    window.sfMetadataContext.eventBus.dispatch(EVENT_BUS_TYPE.TOGGLE_VIEW_TOOLBAR, true);
    return () => {
-      unsubscribeViewChange();
      window?.sfMetadataContext?.eventBus?.dispatch(EVENT_BUS_TYPE.TOGGLE_VIEW_TOOLBAR, false);
    };
+  }, []);
+
+  useEffect(() => {
+    const unsubscribeViewChange = window?.sfMetadataContext?.eventBus?.subscribe(EVENT_BUS_TYPE.UPDATE_SERVER_VIEW, onViewChange);
+    return () => {
+      unsubscribeViewChange && unsubscribeViewChange();
+    };
  }, [onViewChange]);

  useEffect(() => {
--- a/frontend/src/metadata/views/map/control/geolocation-control.js
+++ b/frontend/src/metadata/views/map/control/geolocation-control.js
@@ -1,12 +1,12 @@
 import { mediaUrl } from '../../../../utils/constants';
 import { Utils } from '../../../../utils/utils';

-export function createBMapGeolocationControl(BMap, callback) {
+export function createBMapGeolocationControl(BMapGL, callback) {
  function GeolocationControl() {
    this.defaultAnchor = window.BMAP_ANCHOR_BOTTOM_RIGHT;
-    this.defaultOffset = new BMap.Size(30, Utils.isDesktop() ? 30 : 90);
+    this.defaultOffset = new BMapGL.Size(30, Utils.isDesktop() ? 30 : 90);
  }
-  GeolocationControl.prototype = new window.BMap.Control();
+  GeolocationControl.prototype = new BMapGL.Control();
  GeolocationControl.prototype.initialize = function (map) {
    const div = document.createElement('div');
    div.className = 'sf-BMap-geolocation-control';
@@ -24,7 +24,7 @@ export function createBMapGeolocationControl(BMap, callback) {
    }
    div.onclick = (e) => {
      e.preventDefault();
-      const geolocation = new BMap.Geolocation();
+      const geolocation = new BMapGL.Geolocation();
      div.className = 'sf-BMap-geolocation-control sf-BMap-geolocation-control-loading';
      geolocation.getCurrentPosition((result) => {
        div.className = 'sf-BMap-geolocation-control';
--- a/frontend/src/metadata/views/map/control/zoom-control.js
+++ b/frontend/src/metadata/views/map/control/zoom-control.js
@@ -1,11 +1,14 @@
 import { Utils } from '../../../../utils/utils';

-export function createBMapZoomControl(BMap, callback) {
+const maxZoom = 18;
+const minZoom = 3;
+
+export function createBMapZoomControl(BMapGL, callback) {
  function ZoomControl() {
    this.defaultAnchor = window.BMAP_ANCHOR_BOTTOM_RIGHT;
-    this.defaultOffset = new BMap.Size(80, Utils.isDesktop() ? 30 : 90);
+    this.defaultOffset = new BMapGL.Size(80, Utils.isDesktop() ? 30 : 90);
  }
-  ZoomControl.prototype = new window.BMap.Control();
+  ZoomControl.prototype = new BMapGL.Control();
  ZoomControl.prototype.initialize = function (map) {
    const div = document.createElement('div');
    div.className = 'sf-BMap-zoom-control';
@@ -35,21 +38,21 @@ export function createBMapZoomControl(BMap, callback) {

    const updateButtonStates = () => {
      const zoomLevel = map.getZoom();
-      const maxZoom = map.getMapType().getMaxZoom();
-      const minZoom = map.getMapType().getMinZoom();
-
      zoomInButton.disabled = zoomLevel >= maxZoom;
      zoomOutButton.disabled = zoomLevel <= minZoom;
+      callback && callback(zoomLevel);
    };

    zoomInButton.onclick = (e) => {
      e.preventDefault();
-      map.zoomTo(map.getZoom() + 2);
+      const nextZoom = map.getZoom() + 2;
+      map.zoomTo(Math.min(nextZoom, maxZoom));
    };

    zoomOutButton.onclick = (e) => {
      e.preventDefault();
-      map.zoomTo(map.getZoom() - 2);
+      const nextZoom = map.getZoom() - 2;
+      map.zoomTo(Math.max(nextZoom, minZoom));
    };

    map.addEventListener('zoomend', updateButtonStates);
--- a/frontend/src/metadata/views/map/index.css
+++ b/frontend/src/metadata/views/map/index.css
@@ -28,7 +28,7 @@

 .sf-metadata-view-map .custom-image-number {
  position: absolute;
-  right: -15px;
+  right: -16px;
  top: -16px;
  width: 32px;
  height: 32px;
@@ -39,6 +39,7 @@
  text-align: center;
  font-size: 16px;
  line-height: 20px;
+  font-weight: 400;
 }

 .sf-metadata-view-map .custom-image-container:active::before,
--- a/frontend/src/metadata/views/map/index.js
+++ b/frontend/src/metadata/views/map/index.js
@@ -45,6 +45,7 @@ const Map = () => {
    clusterRef.current = clusterIds;
    updateCurrentPath(`/${PRIVATE_FILE_TYPE.FILE_EXTENDED_PROPERTIES}/${viewID}/${gettext('Location')}`);
    setShowCluster(true);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [viewID, updateCurrentPath]);

  const closeCluster = useCallback(() => {
@@ -56,7 +57,7 @@ const Map = () => {
  useEffect(() => {
    updateCurrentPath(`/${PRIVATE_FILE_TYPE.FILE_EXTENDED_PROPERTIES}/${viewID}`);
    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [viewID]);
+  }, []);

  if (showCluster) {
    return (<ClusterPhotos markerIds={clusterRef.current} onClose={closeCluster} />);
--- a/frontend/src/metadata/views/map/map.js
+++ b/frontend/src/metadata/views/map/map.js
@@ -1,30 +1,37 @@
 import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import PropTypes from 'prop-types';
 import loadBMap, { initMapInfo } from '../../../utils/map-utils';
-import { appAvatarURL, baiduMapKey, gettext, googleMapKey, mediaUrl } from '../../../utils/constants';
+import { appAvatarURL, baiduMapKey, googleMapKey, mediaUrl } from '../../../utils/constants';
 import { isValidPosition } from '../../utils/validate';
 import { wgs84_to_gcj02, gcj02_to_bd09 } from '../../../utils/coord-transform';
 import { MAP_TYPE as MAP_PROVIDER } from '../../../constants';
 import { EVENT_BUS_TYPE, MAP_TYPE, STORAGE_MAP_CENTER_KEY, STORAGE_MAP_TYPE_KEY, STORAGE_MAP_ZOOM_KEY } from '../../constants';
 import { createBMapGeolocationControl, createBMapZoomControl } from './control';
 import { customAvatarOverlay, customImageOverlay } from './overlay';
-import toaster from '../../../components/toast';

 const DEFAULT_POSITION = { lng: 104.195, lat: 35.861 };
 const DEFAULT_ZOOM = 4;
 const BATCH_SIZE = 500;

-const Main = ({ images, onOpenCluster }) => {
+const Map = ({ images, onOpenCluster }) => {
  const mapInfo = useMemo(() => initMapInfo({ baiduMapKey, googleMapKey }), []);

  const mapRef = useRef(null);
  const clusterRef = useRef(null);
  const batchIndexRef = useRef(0);

+  const saveMapState = useCallback(() => {
+    if (!mapRef.current) return;
+    const point = mapRef.current.getCenter && mapRef.current.getCenter();
+    const zoom = mapRef.current.getZoom && mapRef.current.getZoom();
+    window.sfMetadataContext.localStorage.setItem(STORAGE_MAP_CENTER_KEY, point);
+    window.sfMetadataContext.localStorage.setItem(STORAGE_MAP_ZOOM_KEY, zoom);
+  }, []);
+
  const addMapController = useCallback(() => {
-    const ZoomControl = createBMapZoomControl(window.BMap);
+    const ZoomControl = createBMapZoomControl(window.BMapGL, saveMapState);
    const zoomControl = new ZoomControl();
-    const GeolocationControl = createBMapGeolocationControl(window.BMap, (err, point) => {
+    const GeolocationControl = createBMapGeolocationControl(window.BMapGL, (err, point) => {
      if (!err && point) {
        mapRef.current.setCenter({ lng: point.lng, lat: point.lat });
      }
@@ -34,37 +41,20 @@ const Main = ({ images, onOpenCluster }) => {

    mapRef.current.addControl(zoomControl);
    mapRef.current.addControl(geolocationControl);
-  }, []);
+  }, [saveMapState]);

-  const initializeUserMarker = useCallback(() => {
-    if (!window.BMap) return;
-
-    const imageUrl = `${mediaUrl}/img/marker.png`;
-    const addMarker = (lng, lat) => {
-      const gcPosition = wgs84_to_gcj02(lng, lat);
-      const bdPosition = gcj02_to_bd09(gcPosition.lng, gcPosition.lat);
-      const point = new window.BMap.Point(bdPosition.lng, bdPosition.lat);
-      const avatarMarker = customAvatarOverlay(point, appAvatarURL, imageUrl);
-      mapRef.current && mapRef.current.addOverlay(avatarMarker);
-    };
-
-    if (!navigator.geolocation) {
-      addMarker(DEFAULT_POSITION.lng, DEFAULT_POSITION.lat);
-      return;
-    }
-    navigator.geolocation.getCurrentPosition(
-      position => addMarker(position.coords.longitude, position.coords.latitude),
-      () => {
-        addMarker(DEFAULT_POSITION.lng, DEFAULT_POSITION.lat);
-        toaster.danger(gettext('Failed to get user location'));
-      }
-    );
+  const initializeUserMarker = useCallback((centerPoint) => {
+    if (!window.BMapGL || !mapRef.current) return;
+    const imageUrl = `${mediaUrl}img/marker.png`;
+    const avatarMarker = customAvatarOverlay(centerPoint, appAvatarURL, imageUrl);
+    mapRef.current.addOverlay(avatarMarker);
+    setTimeout(() => mapRef.current.showOverlayContainer(), 3000);
  }, []);

  const getBMapType = useCallback((type) => {
    switch (type) {
      case MAP_TYPE.SATELLITE: {
-        return window.BMAP_SATELLITE_MAP;
+        return window.BMAP_EARTH_MAP;
      }
      default: {
        return window.BMAP_NORMAL_MAP;
@@ -72,14 +62,6 @@ const Main = ({ images, onOpenCluster }) => {
    }
  }, []);

-  const saveMapState = useCallback(() => {
-    if (!mapRef.current) return;
-    const point = mapRef.current.getCenter && mapRef.current.getCenter();
-    const zoom = mapRef.current.getZoom && mapRef.current.getZoom();
-    window.sfMetadataContext.localStorage.setItem(STORAGE_MAP_CENTER_KEY, point);
-    window.sfMetadataContext.localStorage.setItem(STORAGE_MAP_ZOOM_KEY, zoom);
-  }, []);
-
  const loadMapState = useCallback(() => {
    const savedCenter = window.sfMetadataContext.localStorage.getItem(STORAGE_MAP_CENTER_KEY) || DEFAULT_POSITION;
    const savedZoom = window.sfMetadataContext.localStorage.getItem(STORAGE_MAP_ZOOM_KEY) || DEFAULT_ZOOM;
@@ -88,8 +70,7 @@ const Main = ({ images, onOpenCluster }) => {

  const onClickMarker = useCallback((e, markers) => {
    saveMapState();
-
-    const imageIds = markers.map(marker => marker._imageId);
+    const imageIds = markers.map(marker => marker._id);
    onOpenCluster(imageIds);
  }, [onOpenCluster, saveMapState]);

@@ -103,7 +84,7 @@ const Main = ({ images, onOpenCluster }) => {
    for (let i = startIndex; i < endIndex; i++) {
      const image = images[i];
      const { lng, lat } = image;
-      const point = new window.BMap.Point(lng, lat);
+      const point = new window.BMapGL.Point(lng, lat);
      const marker = customImageOverlay(point, image, {
        callback: (e, markers) => onClickMarker(e, markers)
      });
@@ -126,42 +107,45 @@ const Main = ({ images, onOpenCluster }) => {
  }, [onClickMarker]);

  const renderBaiduMap = useCallback(() => {
-    if (!mapRef.current || !window.BMap.Map) return;
+    if (!mapRef.current || !window.BMapGL.Map) return;
    let { center, zoom } = loadMapState();
    // ask for user location
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition((userInfo) => {
        center = { lng: userInfo.coords.longitude, lat: userInfo.coords.latitude };
-        window.sfMetadataContext.localStorage.setItem(STORAGE_MAP_CENTER_KEY, center);
-      });
-    }
-    if (!isValidPosition(center?.lng, center?.lat)) return;
-
        const gcPosition = wgs84_to_gcj02(center.lng, center.lat);
        const bdPosition = gcj02_to_bd09(gcPosition.lng, gcPosition.lat);
        const { lng, lat } = bdPosition;
+        center = new window.BMapGL.Point(lng, lat);
+        window.sfMetadataContext.localStorage.setItem(STORAGE_MAP_CENTER_KEY, center);
+      });
+    }
+    const mapTypeValue = window.sfMetadataContext.localStorage.getItem(STORAGE_MAP_TYPE_KEY);
+    mapRef.current = new window.BMapGL.Map('sf-metadata-map-container', {
+      enableMapClick: false,
+      mapType: getBMapType(mapTypeValue)
+    });
+
+    if (isValidPosition(center?.lng, center?.lat)) {
+      mapRef.current.centerAndZoom(center, zoom);
+    }

-    mapRef.current = new window.BMap.Map('sf-metadata-map-container', { enableMapClick: false });
-    const point = new window.BMap.Point(lng, lat);
-    mapRef.current.centerAndZoom(point, zoom);
    mapRef.current.enableScrollWheelZoom(true);

-
-    const savedValue = window.sfMetadataContext.localStorage.getItem(STORAGE_MAP_TYPE_KEY);
-    mapRef.current && mapRef.current.setMapType(getBMapType(savedValue));
-
-    addMapController();
-    initializeUserMarker();
+    initializeUserMarker(center);
    initializeCluster();

    batchIndexRef.current = 0;
    renderMarkersBatch();
+
+    addMapController();
  }, [addMapController, initializeCluster, initializeUserMarker, renderMarkersBatch, getBMapType, loadMapState]);

  useEffect(() => {
    const modifyMapTypeSubscribe = window.sfMetadataContext.eventBus.subscribe(EVENT_BUS_TYPE.MODIFY_MAP_TYPE, (newType) => {
      window.sfMetadataContext.localStorage.setItem(STORAGE_MAP_TYPE_KEY, newType);
-      mapRef.current && mapRef.current.setMapType(getBMapType(newType));
+      const mapType = getBMapType(newType);
+      mapRef.current && mapRef.current.setMapType(mapType);
    });

    return () => {
@@ -179,7 +163,8 @@ const Main = ({ images, onOpenCluster }) => {
      };
    }
    return;
-  }, [mapInfo, renderBaiduMap]);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);

  return (
    <div className="sf-metadata-view-map">
@@ -188,9 +173,9 @@ const Main = ({ images, onOpenCluster }) => {
  );
 };

-Main.propTypes = {
+Map.propTypes = {
  images: PropTypes.array,
  onOpenCluster: PropTypes.func,
 };

-export default Main;
+export default Map;
--- a/frontend/src/metadata/views/map/overlay/custom-avatar-overlay.js
+++ b/frontend/src/metadata/views/map/overlay/custom-avatar-overlay.js
@@ -1,5 +1,5 @@
 const customAvatarOverlay = (point, avatarUrl, bgUrl, width = 20, height = 25) => {
-  class AvatarOverlay extends window.BMap.Overlay {
+  class AvatarOverlay extends window.BMapGL.Overlay {
    constructor(point, avatarUrl, bgUrl, width, height) {
      super();
      this._point = point;
--- a/frontend/src/metadata/views/map/overlay/custom-image-overlay.js
+++ b/frontend/src/metadata/views/map/overlay/custom-image-overlay.js
@@ -5,8 +5,8 @@ const customImageOverlay = (center, image, callback) => {
    constructor(center, image, { callback } = {}) {
      super(center, '', { styles: [] });
      this._center = center;
-      this._imageUrl = image.src;
-      this._imageId = image.id;
+      this._URL = image.src;
+      this._id = image.id;
      this._callback = callback;
    }

@@ -18,11 +18,11 @@ const customImageOverlay = (center, image, callback) => {
      map.getPanes().markerPane.appendChild(div);
      this._div = div;

-      const imageElement = `<img src=${this._imageUrl} />`;
+      const imageElement = `<img src=${this._URL} />`;
      const htmlString =
        `
          <div class="custom-image-container">
-            ${this._imageUrl ? imageElement : '<div class="empty-custom-image-wrapper"></div>'}
+            ${this._URL ? imageElement : '<div class="empty-custom-image-wrapper"></div>'}
          </div>
        `;
      const labelDocument = new DOMParser().parseFromString(htmlString, 'text/html');
@@ -31,7 +31,7 @@ const customImageOverlay = (center, image, callback) => {

      const eventHandler = (event) => {
        event.preventDefault();
-        this._callback && this._callback(event, [{ _imageId: this._imageId }]);
+        this._callback && this._callback(event, [{ _id: this._id }]);
      };

      if (Utils.isDesktop()) {
--- a/frontend/src/pages/lib-content-view/lib-content-view.js
+++ b/frontend/src/pages/lib-content-view/lib-content-view.js
@@ -2141,6 +2141,7 @@ class LibContentView extends React.Component {
  };

  updatePath = (path) => {
+    if (this.state.path === path) return;
    this.setState({ path });
  };

--- a/frontend/src/utils/map-utils.js
+++ b/frontend/src/utils/map-utils.js
@@ -39,16 +39,16 @@ export default function loadBMap(ak) {

 export function asyncLoadBaiduJs(ak) {
  return new Promise((resolve, reject) => {
-    if (typeof window.BMap !== 'undefined') {
-      resolve(window.BMap);
+    if (typeof window.BMapGL !== 'undefined') {
+      resolve(window.BMapGL);
      return;
    }
    window.renderMap = function () {
-      resolve(window.BMap);
+      resolve(window.BMapGL);
    };
    let script = document.createElement('script');
    script.type = 'text/javascript';
-    script.src = `https://api.map.baidu.com/api?v=3.0&ak=${ak}&callback=renderMap`;
+    script.src = `https://api.map.baidu.com/api?type=webgl&v=1.0&ak=${ak}&callback=renderMap`;
    script.onerror = reject;
    document.body.appendChild(script);
  });
--- a/media/js/map/marker-clusterer.js
+++ b/media/js/map/marker-clusterer.js
@@ -15,11 +15,11 @@ var BMapLib = window.BMapLib = BMapLib || {};

    /**
     * 获取一个扩展的视图范围，把上下左右都扩大一样的像素值。
-     * @param {Map} map BMap.Map的实例化对象
-     * @param {BMap.Bounds} bounds BMap.Bounds的实例化对象
+     * @param {Map} map BMapGL.Map的实例化对象
+     * @param {BMapGL.Bounds} bounds BMapGL.Bounds的实例化对象
     * @param {Number} gridSize 要扩大的像素值
     *
-     * @return {BMap.Bounds} 返回扩大后的视图范围。
+     * @return {BMapGL.Bounds} 返回扩大后的视图范围。
     */
    var getExtendedBounds = function(map, bounds, gridSize){
        bounds = cutBoundsInRange(bounds);
@@ -31,21 +31,22 @@ var BMapLib = window.BMapLib = BMapLib || {};
        pixelSW.y += gridSize;
        var newNE = map.pixelToPoint(pixelNE);
        var newSW = map.pixelToPoint(pixelSW);
-        return new BMap.Bounds(newSW, newNE);
+        return new BMapGL.Bounds(newSW, newNE);
    };

    /**
     * 按照百度地图支持的世界范围对bounds进行边界处理
-     * @param {BMap.Bounds} bounds BMap.Bounds的实例化对象
+     * @param {BMapGL.Bounds} bounds BMapGL.Bounds的实例化对象
     *
-     * @return {BMap.Bounds} 返回不越界的视图范围
+     * @return {BMapGL.Bounds} 返回不越界的视图范围
     */
    var cutBoundsInRange = function (bounds) {
+        console.log(bounds);
        var maxX = getRange(bounds.getNorthEast().lng, -180, 180);
        var minX = getRange(bounds.getSouthWest().lng, -180, 180);
-        var maxY = getRange(bounds.getNorthEast().lat, -74, 74);
-        var minY = getRange(bounds.getSouthWest().lat, -74, 74);
-        return new BMap.Bounds(new BMap.Point(minX, minY), new BMap.Point(maxX, maxY));
+        var maxY = getRange(bounds.getNorthEast().lat, -90, 90);
+        var minY = getRange(bounds.getSouthWest().lat, -90, 90);
+        return new BMapGL.Bounds(new BMapGL.Point(minX, minY), new BMapGL.Point(maxX, maxY));
    };

    /**
@@ -137,9 +138,9 @@ var BMapLib = window.BMapLib = BMapLib || {};
                that._redraw();
            });

-            // this._map.addEventListener("moveend",function(){
-            //      that._redraw();
-            // });
+            this._map.addEventListener("moveend",function(){
+                 that._redraw();
+            });

            var mkrs = opts["markers"];
            isArray(mkrs) && this.addMarkers(mkrs);
@@ -160,7 +161,7 @@ var BMapLib = window.BMapLib = BMapLib || {};

    /**
     * 把一个标记添加到要聚合的标记数组中
-     * @param {BMap.Marker} marker 要添加的标记
+     * @param {BMapGL.Marker} marker 要添加的标记
     *
     * @return 无返回值。
     */
@@ -174,7 +175,7 @@ var BMapLib = window.BMapLib = BMapLib || {};

    /**
     * 添加一个聚合的标记。
-     * @param {BMap.Marker} marker 要聚合的单个标记。
+     * @param {BMapGL.Marker} marker 要聚合的单个标记。
     * @return 无返回值。
     */
    MarkerCluster.prototype.addMarker = function(marker) {
@@ -190,7 +191,7 @@ var BMapLib = window.BMapLib = BMapLib || {};
        var mapBounds = this._map.getBounds();
        var extendedBounds = getExtendedBounds(this._map, mapBounds, this._gridSize);
        for(var i = 0, marker; marker = this._markers[i]; i++){
-            if(!marker.isInCluster && extendedBounds.containsPoint(marker.getPosition()) ){
+            if(!marker.isInCluster && extendedBounds.containsPoint(marker._position) ){
                this._addToClosestCluster(marker);
            }
        }
@@ -205,7 +206,7 @@ var BMapLib = window.BMapLib = BMapLib || {};

    /**
     * 根据标记的位置，把它添加到最近的聚合中
-     * @param {BMap.Marker} marker 要进行聚合的单个标记
+     * @param {BMapGL.Marker} marker 要进行聚合的单个标记
     *
     * @return 无返回值。
     */
@@ -268,7 +269,7 @@ var BMapLib = window.BMapLib = BMapLib || {};

    /**
     * 删除单个标记
-     * @param {BMap.Marker} marker 需要被删除的marker
+     * @param {BMapGL.Marker} marker 需要被删除的marker
     *
     * @return {Boolean} 删除成功返回true，否则返回false
     */
@@ -284,7 +285,7 @@ var BMapLib = window.BMapLib = BMapLib || {};

    /**
     * 删除单个标记
-     * @param {BMap.Marker} marker 需要被删除的marker
+     * @param {BMapGL.Marker} marker 需要被删除的marker
     *
     * @return {Boolean} 删除成功返回true，否则返回false
     */
@@ -299,7 +300,7 @@ var BMapLib = window.BMapLib = BMapLib || {};

    /**
     * 删除一组标记
-     * @param {Array<BMap.Marker>} markers 需要被删除的marker数组
+     * @param {Array<BMapGL.Marker>} markers 需要被删除的marker数组
     *
     * @return {Boolean} 删除成功返回true，否则返回false
     */
@@ -487,7 +488,7 @@ var BMapLib = window.BMapLib = BMapLib || {};
                var l = this._markers.length + 1;
                var lat = (this._center.lat * (l - 1) + marker.getPosition().lat) / l;
                var lng = (this._center.lng * (l - 1) + marker.getPosition().lng) / l;
-                this._center = new BMap.Point(lng, lat);
+                this._center = new BMapGL.Point(lng, lat);
                this.updateGridBounds();
            }//计算新的Center
        }
@@ -550,7 +551,7 @@ var BMapLib = window.BMapLib = BMapLib || {};
     * @return 无返回值。
     */
    Cluster.prototype.updateGridBounds = function() {
-        var bounds = new BMap.Bounds(this._center, this._center);
+        var bounds = new BMapGL.Bounds(this._center, this._center);
        this._gridBounds = getExtendedBounds(this._map, bounds, this._markerClusterer.getGridSize());
    };

@@ -620,10 +621,10 @@ var BMapLib = window.BMapLib = BMapLib || {};

    /**
     * 获取该聚合所包含的所有标记的最小外接矩形的范围。
-     * @return {BMap.Bounds} 计算出的范围。
+     * @return {BMapGL.Bounds} 计算出的范围。
     */
    Cluster.prototype.getBounds = function() {
-        var bounds = new BMap.Bounds(this._center,this._center);
+        var bounds = new BMapGL.Bounds(this._center,this._center);
        for (var i = 0, marker; marker = this._markers[i]; i++) {
            bounds.extend(marker.getPosition());
        }
@@ -632,7 +633,7 @@ var BMapLib = window.BMapLib = BMapLib || {};

    /**
     * 获取该聚合的落脚点。
-     * @return {BMap.Point} 该聚合的落脚点。
+     * @return {BMapGL.Point} 该聚合的落脚点。
     */
    Cluster.prototype.getCenter = function() {
        return this._center;
--- a/media/js/map/text-icon-overlay.js
+++ b/media/js/map/text-icon-overlay.js
@@ -754,21 +754,21 @@ var BMapLib = window.BMapLib = BMapLib || {};
            (!this._styles.length) && this._setupDefaultStyles();                  
        };

-    T.lang.inherits(TextIconOverlay, BMap.Overlay, "TextIconOverlay");
+    T.lang.inherits(TextIconOverlay, BMapGL.Overlay, "TextIconOverlay");

    TextIconOverlay.prototype._setupDefaultStyles = function(){  
        var sizes = [53, 56, 66, 78, 90];
        for(var i = 0, size; size = sizes[i]; i++){
            this._styles.push({
                url:_IMAGE_PATH + i + '.' + _IMAGE_EXTENSION,
-                size: new BMap.Size(size, size)
+                size: new BMapGL.Size(size, size)
            });
        }//for循环的简洁写法
    };

    /**
    *继承Overlay的intialize方法，自定义覆盖物时必须。
-    *@param {Map} map BMap.Map的实例化对象。
+    *@param {Map} map BMapGL.Map的实例化对象。
    *@return {HTMLElement} 返回覆盖物对应的HTML元素。
    */
    TextIconOverlay.prototype.initialize = function(map){
@@ -944,12 +944,12 @@ var BMapLib = window.BMapLib = BMapLib || {};
        } else {
            csstext.push('background-image:url(' + url + ');');
            var backgroundPosition = '0 0';
-            (offset instanceof BMap.Size) && (backgroundPosition = offset.width + 'px' + ' ' + offset.height + 'px');          
+            (offset instanceof BMapGL.Size) && (backgroundPosition = offset.width + 'px' + ' ' + offset.height + 'px');          
            csstext.push('background-position:' + backgroundPosition + ';');
        }

-        if (size instanceof BMap.Size){
-            if (anchor instanceof BMap.Size) {
+        if (size instanceof BMapGL.Size){
+            if (anchor instanceof BMapGL.Size) {
                if (anchor.height > 0 && anchor.height < size.height) {
                      csstext.push('height:' + (size.height - anchor.height) + 'px; padding-top:' + anchor.height + 'px;');
                }
@@ -999,9 +999,9 @@ var BMapLib = window.BMapLib = BMapLib || {};

     * <br />"<b>target</b>：{BMapLib.TextIconOverlay} 事件目标

-     * <br />"<b>point</b> : {BMap.Point} 最新添加上的节点BMap.Point对象
+     * <br />"<b>point</b> : {BMapGL.Point} 最新添加上的节点BMap.Point对象

-     * <br />"<b>pixel</b>：{BMap.pixel} 最新添加上的节点BMap.Pixel对象
+     * <br />"<b>pixel</b>：{BMapGL.pixel} 最新添加上的节点BMap.Pixel对象

     *

@@ -1025,9 +1025,9 @@ var BMapLib = window.BMapLib = BMapLib || {};

     * <br />"<b>target</b>：{BMapLib.TextIconOverlay} 事件目标

-     * <br />"<b>point</b> : {BMap.Point} 最新添加上的节点BMap.Point对象
+     * <br />"<b>point</b> : {BMapGL.Point} 最新添加上的节点BMap.Point对象

-     * <br />"<b>pixel</b>：{BMap.pixel} 最新添加上的节点BMap.Pixel对象
+     * <br />"<b>pixel</b>：{BMapGL.pixel} 最新添加上的节点BMap.Pixel对象

     *

@@ -1058,7 +1058,7 @@ var BMapLib = window.BMapLib = BMapLib || {};
            var y = e.clientY || e.pageY;
            if (e && be && x && y && elem){
                var offset = T.dom.getPosition(map.getContainer());
-                be.pixel = new BMap.Pixel(x - offset.left, y - offset.top);
+                be.pixel = new BMapGL.Pixel(x - offset.left, y - offset.top);
                be.point = map.pixelToPoint(be.pixel);
            }
            return be;