fix marker position (#8265)

Co-authored-by: zhouwenxuan <aries@Mac.local>

frontend/src/metadata/components/metadata-details/location/index.js

@@ -17,6 +17,7 @@ import { eventBus } from '../../../../components/common/event-bus';
 import { createZoomControl } from '../../map-controller/zoom';
 import ClickOutside from '../../../../components/click-outside';
 import GeolocationEditor from '../../cell-editors/geolocation-editor';
+import { bd09_to_gcj02, gcj02_to_bd09, gcj02_to_wgs84, wgs84_to_gcj02 } from '../../../../utils/coord-transform';
 
 import './index.css';
 
@@ -84,12 +85,13 @@ class Location extends React.Component {
     if (!isValidPosition(latLng?.lng, latLng?.lat)) return;
 
     if (prevState.latLng?.lat !== latLng.lat || prevState.latLng?.lng !== latLng.lng) {
+      const position = this.convertToMapCoords(latLng);
       if (this.mapType === MAP_TYPE.B_MAP) {
-        this.marker.setPosition(latLng);
+        this.marker.setPosition(position);
-        this.map.panTo(latLng);
+        this.map.panTo(position);
       } else if (this.mapType === MAP_TYPE.G_MAP) {
-        this.marker.position = latLng;
+        this.marker.position = position;
-        this.map.panTo(latLng);
+        this.map.panTo(position);
       }
     }
   }
@@ -98,12 +100,36 @@ class Location extends React.Component {
     this.unsubscribeClearMapInstance();
     this.map = null;
   }
+  // Converts WGS84 coordinates to the map's native coordinate system
+  convertToMapCoords = (position) => {
+    if (!isValidPosition(position?.lng, position?.lat)) {
+      return null;
+    }
+    if (this.mapType === MAP_TYPE.B_MAP) {
+      const gcjPos = wgs84_to_gcj02(position.lng, position.lat);
+      const bdPos = gcj02_to_bd09(gcjPos.lng, gcjPos.lat);
+      return bdPos;
+    }
+    return position;
+  };
+
+  // Converts coordinates from the map's native system to WGS84
+  convertFromMapCoords = (position) => {
+    if (!isValidPosition(position?.lng, position?.lat)) {
+      return null;
+    }
+    if (this.mapType === MAP_TYPE.B_MAP) {
+      const gcjPos = bd09_to_gcj02(position.lng, position.lat);
+      const wgsPos = gcj02_to_wgs84(gcjPos.lng, gcjPos.lat);
+      return wgsPos;
+    }
+    return position;
+  };
 
   initMap = () => {
     const { record } = this.props;
     const { latLng } = this.state;
     if (!isValidPosition(latLng?.lng, latLng?.lat) || typeof record !== 'object') return;
-
     this.setState({ isLoading: true }, () => {
       if (this.mapType === MAP_TYPE.B_MAP) {
         if (!window.BMapGL) {
@@ -123,8 +149,7 @@ class Location extends React.Component {
     });
   };
 
-  addMarker = () => {
+  addMarker = (latLng) => {
-    const { latLng } = this.state;
     if (this.mapType === MAP_TYPE.B_MAP) {
       this.marker = new window.BMapGL.Marker(latLng);
       this.map.addOverlay(this.marker);
@@ -141,15 +166,17 @@ class Location extends React.Component {
       if (!window.BMapGL.Map) return;
 
       const { latLng } = this.state;
+      const gcPos = wgs84_to_gcj02(latLng.lng, latLng.lat);
+      const bdPos = gcj02_to_bd09(gcPos.lng, gcPos.lat);
       this.map = new window.BMapGL.Map('sf-geolocation-map-container');
       this.map.disableScrollWheelZoom(true);
-      this.map.centerAndZoom(latLng, 16);
+      this.map.centerAndZoom(bdPos, 16);
 
       const offset = { x: 10, y: Utils.isDesktop() ? 16 : 40 };
       const ZoomControl = createBMapZoomControl(window.BMapGL, { maxZoom: 21, minZoom: 3, offset });
       const zoomControl = new ZoomControl();
       this.map.addControl(zoomControl);
-      this.addMarker();
+      this.addMarker(bdPos);
     });
   };
 
@@ -157,7 +184,6 @@ class Location extends React.Component {
     const { latLng } = this.state;
     this.setState({ isLoading: false }, () => {
       if (!window.google.maps.Map) return;
-
       this.map = new window.google.maps.Map(this.ref, {
         zoom: 16,
         center: latLng,
@@ -172,7 +198,7 @@ class Location extends React.Component {
         gestureHandling: 'cooperative',
       });
 
-      this.addMarker();
+      this.addMarker(latLng);
       const zoomControl = createZoomControl({ map: this.map });
       this.map.controls[window.google.maps.ControlPosition.RIGHT_BOTTOM].push(zoomControl);
       this.map.panTo(latLng);
@@ -193,8 +219,9 @@ class Location extends React.Component {
 
   onSubmit = (value) => {
     const { position, location_translated } = value;
+    const latLng = this.convertFromMapCoords(position);
     this.props.onChange(PRIVATE_COLUMN_KEY.LOCATION_TRANSLATED, location_translated);
-    this.props.onChange(PRIVATE_COLUMN_KEY.LOCATION, position);
+    this.props.onChange(PRIVATE_COLUMN_KEY.LOCATION, latLng);
     this.setState({
       latLng: position,
       address: location_translated?.address,
@@ -271,7 +298,7 @@ class Location extends React.Component {
                 }}
               >
                 <GeolocationEditor
-                  position={latLng}
+                  position={this.convertToMapCoords(latLng)}
                   locationTranslated={this.props.record?._location_translated}
                   onSubmit={this.onSubmit}
                   onFullScreen={this.onFullScreen}
@@ -287,7 +314,7 @@ class Location extends React.Component {
               zIndex={1052}
             >
               <GeolocationEditor
-                position={latLng}
+                position={this.convertToMapCoords(latLng)}
                 locationTranslated={this.props.record?._location_translated}
                 isFullScreen={isFullScreen}
                 onSubmit={this.onSubmit}