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",
@@ -127,4 +127,4 @@
 		"scripts/**/*.js"
 	],
 	"author": "congmin.hao"
-}
\ No newline at end of file
+}

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;
+    }
+
+    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])
         }
-      },
-      addrInfo.provice || '北京市',
-    );
+      });
+    });
   };
 
   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>
-    <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"
-    />
-    <title>量星球商户管理系统</title>
-    <script
-      type="text/javascript"
-      src="https://api.map.baidu.com/api?v=3.0&ak=5gZyih0oAhiNdbbdPKTc9ZGYOwel8bYN&type=webgl"
-    ></script>
-    <link rel="icon" href="/favicon.png" type="image/x-icon" />
-  </head>
-  <body>
-    <noscript>Out-of-the-box mid-stage front/design solution!</noscript>
-    <div id="root">
-      <style>
-        .page-loading-warp {
-          padding: 120px;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-        }
-        .ant-spin {
-          -webkit-box-sizing: border-box;
-          box-sizing: border-box;
-          margin: 0;
-          padding: 0;
-          color: rgba(0, 0, 0, 0.65);
-          font-size: 14px;
-          font-variant: tabular-nums;
-          line-height: 1.5;
-          list-style: none;
-          -webkit-font-feature-settings: 'tnum';
-          font-feature-settings: 'tnum';
-          position: absolute;
-          display: none;
-          color: #1890ff;
-          text-align: center;
-          vertical-align: middle;
-          opacity: 0;
-          -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
-          transition: -webkit-transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
-          transition: transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
-          transition: transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86),
-            -webkit-transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
-        }
 
-        .ant-spin-spinning {
-          position: static;
-          display: inline-block;
-          opacity: 1;
-        }
+<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" />
+  <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">
+    window._AMapSecurityConfig = {
+      securityJsCode: '99349c5c13106863571748b3e7756499'
+    }
+  </script>
+  <link rel="icon" href="/favicon.png" type="image/x-icon" />
+</head>
 
-        .ant-spin-dot {
-          position: relative;
-          display: inline-block;
-          font-size: 20px;
-          width: 20px;
-          height: 20px;
-        }
+<body>
+  <noscript>Out-of-the-box mid-stage front/design solution!</noscript>
+  <div id="root">
+    <style>
+      .page-loading-warp {
+        padding: 120px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
 
-        .ant-spin-dot-item {
-          position: absolute;
-          display: block;
-          width: 9px;
-          height: 9px;
-          background-color: #1890ff;
-          border-radius: 100%;
-          -webkit-transform: scale(0.75);
-          -ms-transform: scale(0.75);
-          transform: scale(0.75);
-          -webkit-transform-origin: 50% 50%;
-          -ms-transform-origin: 50% 50%;
-          transform-origin: 50% 50%;
-          opacity: 0.3;
-          -webkit-animation: antSpinMove 1s infinite linear alternate;
-          animation: antSpinMove 1s infinite linear alternate;
-        }
+      .ant-spin {
+        -webkit-box-sizing: border-box;
+        box-sizing: border-box;
+        margin: 0;
+        padding: 0;
+        color: rgba(0, 0, 0, 0.65);
+        font-size: 14px;
+        font-variant: tabular-nums;
+        line-height: 1.5;
+        list-style: none;
+        -webkit-font-feature-settings: 'tnum';
+        font-feature-settings: 'tnum';
+        position: absolute;
+        display: none;
+        color: #1890ff;
+        text-align: center;
+        vertical-align: middle;
+        opacity: 0;
+        -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
+        transition: -webkit-transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
+        transition: transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
+        transition: transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86),
+          -webkit-transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
+      }
 
-        .ant-spin-dot-item:nth-child(1) {
-          top: 0;
-          left: 0;
-        }
+      .ant-spin-spinning {
+        position: static;
+        display: inline-block;
+        opacity: 1;
+      }
 
-        .ant-spin-dot-item:nth-child(2) {
-          top: 0;
-          right: 0;
-          -webkit-animation-delay: 0.4s;
-          animation-delay: 0.4s;
-        }
+      .ant-spin-dot {
+        position: relative;
+        display: inline-block;
+        font-size: 20px;
+        width: 20px;
+        height: 20px;
+      }
 
-        .ant-spin-dot-item:nth-child(3) {
-          right: 0;
-          bottom: 0;
-          -webkit-animation-delay: 0.8s;
-          animation-delay: 0.8s;
-        }
+      .ant-spin-dot-item {
+        position: absolute;
+        display: block;
+        width: 9px;
+        height: 9px;
+        background-color: #1890ff;
+        border-radius: 100%;
+        -webkit-transform: scale(0.75);
+        -ms-transform: scale(0.75);
+        transform: scale(0.75);
+        -webkit-transform-origin: 50% 50%;
+        -ms-transform-origin: 50% 50%;
+        transform-origin: 50% 50%;
+        opacity: 0.3;
+        -webkit-animation: antSpinMove 1s infinite linear alternate;
+        animation: antSpinMove 1s infinite linear alternate;
+      }
 
-        .ant-spin-dot-item:nth-child(4) {
-          bottom: 0;
-          left: 0;
-          -webkit-animation-delay: 1.2s;
-          animation-delay: 1.2s;
-        }
+      .ant-spin-dot-item:nth-child(1) {
+        top: 0;
+        left: 0;
+      }
 
-        .ant-spin-dot-spin {
-          -webkit-transform: rotate(45deg);
-          -ms-transform: rotate(45deg);
-          transform: rotate(45deg);
-          -webkit-animation: antRotate 1.2s infinite linear;
-          animation: antRotate 1.2s infinite linear;
-        }
+      .ant-spin-dot-item:nth-child(2) {
+        top: 0;
+        right: 0;
+        -webkit-animation-delay: 0.4s;
+        animation-delay: 0.4s;
+      }
 
-        .ant-spin-lg .ant-spin-dot {
-          font-size: 32px;
-          width: 32px;
-          height: 32px;
-        }
+      .ant-spin-dot-item:nth-child(3) {
+        right: 0;
+        bottom: 0;
+        -webkit-animation-delay: 0.8s;
+        animation-delay: 0.8s;
+      }
 
-        .ant-spin-lg .ant-spin-dot i {
-          width: 14px;
-          height: 14px;
-        }
+      .ant-spin-dot-item:nth-child(4) {
+        bottom: 0;
+        left: 0;
+        -webkit-animation-delay: 1.2s;
+        animation-delay: 1.2s;
+      }
 
-        @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
-          .ant-spin-blur {
-            background: #fff;
-            opacity: 0.5;
-          }
-        }
+      .ant-spin-dot-spin {
+        -webkit-transform: rotate(45deg);
+        -ms-transform: rotate(45deg);
+        transform: rotate(45deg);
+        -webkit-animation: antRotate 1.2s infinite linear;
+        animation: antRotate 1.2s infinite linear;
+      }
+
+      .ant-spin-lg .ant-spin-dot {
+        font-size: 32px;
+        width: 32px;
+        height: 32px;
+      }
 
-        @-webkit-keyframes antSpinMove {
-          to {
-            opacity: 1;
-          }
+      .ant-spin-lg .ant-spin-dot i {
+        width: 14px;
+        height: 14px;
+      }
+
+      @media all and (-ms-high-contrast: none),
+      (-ms-high-contrast: active) {
+        .ant-spin-blur {
+          background: #fff;
+          opacity: 0.5;
         }
+      }
 
-        @keyframes antSpinMove {
-          to {
-            opacity: 1;
-          }
+      @-webkit-keyframes antSpinMove {
+        to {
+          opacity: 1;
         }
+      }
 
-        @-webkit-keyframes antRotate {
-          to {
-            -webkit-transform: rotate(405deg);
-            transform: rotate(405deg);
-          }
+      @keyframes antSpinMove {
+        to {
+          opacity: 1;
         }
+      }
 
-        @keyframes antRotate {
-          to {
-            -webkit-transform: rotate(405deg);
-            transform: rotate(405deg);
-          }
+      @-webkit-keyframes antRotate {
+        to {
+          -webkit-transform: rotate(405deg);
+          transform: rotate(405deg);
         }
-      </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>
-        </div>
+      }
+
+      @keyframes antRotate {
+        to {
+          -webkit-transform: rotate(405deg);
+          transform: rotate(405deg);
+        }
+      }
+    </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>
       </div>
     </div>
-  </body>
+  </div>
+</body>
+
 </html>