feat: 新建/编辑门店经纬度信息替换为高德地图

.eslintrc.js

@@ -12,5 +12,6 @@ module.exports = {
     'no-plusplus': ['off'],
     '@typescript-eslint/camelcase': ['off'],
     '@typescript-eslint/no-unused-vars': ['off'],
+    'import/extensions': 0,
   },
 };

config/env.config.js

@@ -2,7 +2,7 @@ const isProduction = process.env.NODE_ENV === 'production';
 const isPre = process.env.PRE_ENV === 'pre';
 
 const envAPi = {
-  api: 'https://security.q-gp.com', //'https://security-xyqb.liangkebang.net',
+  api: 'https://security-xyqb.liangkebang.net', //'https://security-xyqb.liangkebang.net',
   kdspOpApi: 'https://sc-merchant-api-xyqb.liangkebang.net',
   kdspApi: 'https://sc-merchant-api-xyqb.liangkebang.net',
   goodsApi: 'https://sc-merchant-api-xyqb.liangkebang.net',

package.json

@@ -67,7 +67,7 @@
 		"path-to-regexp": "^3.1.0",
 		"qs": "^6.9.0",
 		"react": "^16.8.6",
-		"react-bmapgl": "^0.2.7",
+		"react-amap": "^1.2.8",
 		"react-copy-to-clipboard": "^5.0.1",
 		"react-dom": "^16.8.6",
 		"react-helmet": "^5.2.1",

src/components/BaiduMap/index.jsx → src/components/GaoDeMap/index.jsx

 import React, { useState, useEffect } from 'react';
-import { Map, Marker, ZoomControl, CityListControl } from 'react-bmapgl';
+import { Map, Marker } from 'react-amap';
 import { Modal, Input } from 'antd';
 
+const MAP_KEY = '82ae49bca6834ad0d5c9fb173e57f88a';
+
 export default props => {
-  const { visible, onSetPoint, onCancel, lngLat, addrInfo } = props;
-  let defaultLnglat = { lng: 116.404449, lat: 39.914889 };
-  if (lngLat) {
-    defaultLnglat = lngLat;
+  const { visible, onSetPoint, onCancel, lngLat: propsLngLat, addrInfo } = props;
+  let defaultLnglat = [116.404449, 39.914889];
+  if (propsLngLat) {
+    defaultLnglat = [propsLngLat.lng, propsLngLat.lat];
   }
 
   const [lnglat, setLnglat] = useState(defaultLnglat);
-  const [lnglatText, setLnglatText] = useState(`${defaultLnglat.lng},${defaultLnglat.lat}`);
+  const [lnglatText, setLnglatText] = useState(`${defaultLnglat[0]},${defaultLnglat[1]}`);
 
   const handleOk = () => {
     onSetPoint(lnglatText);
     onCancel(true);
   };
 
-  const handleCancle = () => onCancel(true);
-
   const onGetPoint = e => {
-    setLnglat({
-      lng: e.latlng.lng,
-      lat: e.latlng.lat,
-    });
-    setLnglatText(`${e.latlng.lng},${e.latlng.lat}`);
+    setLnglat([e.lnglat.lng, e.lnglat.lat]);
+    setLnglatText(`${e.lnglat.lng},${e.lnglat.lat}`);
   };
 
-  // const translateCallback = obj => {
-  //   console.log('obj :>> ', obj);
-  //   setLnglat(obj.points[0]);
-  // };
-
   const getPoint = () => {
-    // const convertor = new window.BMapGL.Convertor();
-    const myGeo = new window.BMapGL.Geocoder();
-    // 将地址解析结果显示在地图上，并调整地图视野
-    myGeo.getPoint(
-      addrInfo.address || '',
-      point => {
-        if (point) {
-          // convertor.translate([point], 1, 5, translateCallback);
-          setLnglat(point);
+    if (!window.AMap) {
+      return;
     }
-      },
-      addrInfo.provice || '北京市',
-    );
+
+    window.AMap.plugin(['AMap.Geocoder'], () => {
+      const city = addrInfo.provice || '北京市';
+      const geocoder = new window.AMap.Geocoder({
+        city,
+      });
+
+      geocoder.getLocation(addrInfo.address, (status, result) => {
+        if (status === 'complete' && result.geocodes.length) {
+          const { lng, lat } = result.geocodes[0].location;
+          setLnglat([lng, lat]);
+        } else {
+          console.error('根据地址查询位置失败');
+          // setLnglat([116.397561,39.909063])
+        }
+      });
+    });
   };
 
   useEffect(() => {
@@ -58,31 +57,23 @@ export default props => {
       visible={visible}
       width="800px"
       onOk={() => handleOk()}
-      onCancel={() => handleCancle()}
+      onCancel={() => onCancel(true)}
     >
       <div style={{ marginBottom: '20px' }}>
         <Input value={lnglatText} placeholder="点击地图选择经纬度" />
       </div>
       <div style={{ width: '100%', height: '360px' }}>
         <Map
+          plugins={['ToolBar']}
           center={lnglat}
-          enableScrollWheelZoom
-          enableDoubleClickZoom
-          coordType="gcj02"
-          onClick={e => onGetPoint(e)}
+          amapkey={MAP_KEY}
+          events={{
+            created: getPoint,
+            click: onGetPoint,
+          }}
           zoom={15}
         >
-          <Marker
-            position={lnglat}
-            Icon
-            coordType="gcj02"
-            autoViewport
-            viewportOptions={{
-              zoomFactor: -12,
-            }}
-          />
-          <CityListControl />
-          <ZoomControl />
+          <Marker position={lnglat}></Marker>
         </Map>
       </div>
     </Modal>

src/pages/chainStoreManage/components/storeModal.jsx

@@ -2,19 +2,10 @@ import React, { useState, useEffect, useRef } from 'react';
 import { Form } from '@ant-design/compatible';
 import moment from 'moment';
 import { PlusSquareFilled, MinusSquareFilled } from '@ant-design/icons';
-import {
-  Modal,
-  Input,
-  DatePicker,
-  TimePicker,
-  Checkbox,
-  Cascader,
-  Radio,
-  notification,
-} from 'antd';
+import { Modal, Input, TimePicker, Checkbox, Cascader, Radio, notification } from 'antd';
 import { apiAddrArea, apiCreatStore, apiEditStore } from '../services';
 import { weekOptions, weekDefault, layout } from '../data';
-import MapModal from '@/components/BaiduMap';
+import MapModal from '@/components/GaoDeMap';
 import style from './style.less';
 import { isCheckNumberLine } from '@/utils/validator';
 
@@ -89,6 +80,9 @@ const StoreModal = props => {
   const openMap = v => {
     const values = getFieldsValue();
     let provice = '北京市';
+    if (!values.addr) {
+      return;
+    }
     if (values.addr.length > 0) {
       areaAddr.forEach(item => {
         if (item.value === values.addr[0]) {

src/pages/document.ejs

 <!DOCTYPE html>
 <html lang="en">
-  <head>
+
+<head>
   <meta charset="UTF-8" />
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
-    />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
   <title>量星球商户管理系统</title>
-    <script
-      type="text/javascript"
-      src="https://api.map.baidu.com/api?v=3.0&ak=5gZyih0oAhiNdbbdPKTc9ZGYOwel8bYN&type=webgl"
-    ></script>
+  <!-- <script type="text/javascript"
+    src="https://api.map.baidu.com/api?v=3.0&ak=5gZyih0oAhiNdbbdPKTc9ZGYOwel8bYN&type=webgl"></script> -->
+  <script type="text/javascript">
+    window._AMapSecurityConfig = {
+      securityJsCode: '99349c5c13106863571748b3e7756499'
+    }
+  </script>
   <link rel="icon" href="/favicon.png" type="image/x-icon" />
-  </head>
-  <body>
+</head>
+
+<body>
   <noscript>Out-of-the-box mid-stage front/design solution!</noscript>
   <div id="root">
     <style>
@@ -24,6 +26,7 @@
         justify-content: center;
         align-items: center;
       }
+
       .ant-spin {
         -webkit-box-sizing: border-box;
         box-sizing: border-box;
@@ -126,7 +129,8 @@
         height: 14px;
       }
 
-        @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+      @media all and (-ms-high-contrast: none),
+      (-ms-high-contrast: active) {
         .ant-spin-blur {
           background: #fff;
           opacity: 0.5;
@@ -161,12 +165,11 @@
     </style>
     <div class="page-loading-warp">
       <div class="ant-spin ant-spin-lg ant-spin-spinning">
-          <span class="ant-spin-dot ant-spin-dot-spin"
-            ><i class="ant-spin-dot-item"></i><i class="ant-spin-dot-item"></i
-            ><i class="ant-spin-dot-item"></i><i class="ant-spin-dot-item"></i
-          ></span>
+        <span class="ant-spin-dot ant-spin-dot-spin"><i class="ant-spin-dot-item"></i><i
+            class="ant-spin-dot-item"></i><i class="ant-spin-dot-item"></i><i class="ant-spin-dot-item"></i></span>
       </div>
     </div>
   </div>
-  </body>
+</body>
+
 </html>