一键救援-订单查询新增地图展示

config/dev.env.js

@@ -5,8 +5,8 @@ const prodEnv = require('./prod.env')
 module.exports = merge(prodEnv, {
   NODE_ENV: '"development"',
   ENV_CONFIG:'"dev"',
-  // BASE_URL: '"https://test.baoxianzhanggui.com/web-api"',//测试服务器
-  BASE_URL:'"https://sxzgkj.baoxianzhanggui.com/web-api"'//正式服务器
+  BASE_URL: '"https://test.baoxianzhanggui.com/web-api"',//测试服务器
+  // BASE_URL:'"https://sxzgkj.baoxianzhanggui.com/web-api"'//正式服务器
   // BASE_URL:'"https://sxzgkj.baoxianzhanggui.com/web-api"'//正式服务器
   // BASE_URL: '"http://192.168.0.115:8080/"' //凯森
   // BASE_URL: '"http:///192.168.0.106:8080/"',//屈晨

package-lock.json

@@ -4,6 +4,11 @@
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
+    "@amap/amap-jsapi-loader": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@amap/amap-jsapi-loader/-/amap-jsapi-loader-1.0.1.tgz",
+      "integrity": "sha512-nPyLKt7Ow/ThHLkSvn2etQlUzqxmTVgK7bIgwdBRTg2HK5668oN7xVxkaiRe3YZEzGzfV2XgH5Jmu2T73ljejw=="
+    },
     "@babel/code-frame": {
       "version": "7.12.11",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.12.11.tgz",

package.json

@@ -13,6 +13,7 @@
     "build--pre": "cross-env NODE_ENV=production env_config=pre node build/build.js"
   },
   "dependencies": {
+    "@amap/amap-jsapi-loader": "^1.0.1",
     "@riophae/vue-treeselect": "^0.4.0",
     "@tinymce/tinymce-vue": "^2.0.1",
     "@ztree/ztree_v3": "^3.5.46",

src/views/ServiceManagement/OneClickRescue/OrderInquiry.vue

@@ -28,16 +28,33 @@
   </el-row>
   <kt-common-table
     :tableHeights="700"
-    :showOperation="false"
     :SerialShow="false"
     :data="pageResult"
     :columns="columns"
+    button2Name="详情"
+    permsButton2="sys:orderInquiry1:detail"
+    @handleButton2="handleButton" 
     @findPage="findPage"
   ></kt-common-table>
+
+  <el-dialog
+  title="提示"
+  :visible.sync="dialogVisible"
+  width="50%"
+  :before-close="handleClose">
+    <div  style="width: 100%; height: 400px" id="map" ></div>
+  <span slot="footer" class="dialog-footer">
+    <el-button @click="dialogVisible = false">关闭</el-button>
+  </span>
+</el-dialog>
 </div>
 </template>
 <script>
 import KtCommonTable from "@/views/Core/KtCommonTable.vue"; //表格组件
+import AMapLoader from '@amap/amap-jsapi-loader';
+window._AMapSecurityConfig = {
+	securityJsCode: 'd62687dd438cfadd859bbab66d8e41a2',		//安全密钥
+}
 export default {
   components: {
     KtCommonTable
@@ -68,6 +85,9 @@ export default {
       ],
       oderStateoptions:[],
       rescueTypeoptions:[],
+      dialogVisible:false,
+      arrmap: [],
+      mapCenter:[]
     };
   },
   created() {
@@ -75,8 +95,67 @@ export default {
       this.getDictItems("oderState");
       this.getDictItems("rescueType");
     },
+    async mounted(){
+      
+      await AMapLoader.load({
+        key: '262c17c813cdaab1bf93bfeb9873a6c8',
+        version: '2.0',
+       plugins: ['AMap.Geolocation', 'AMap.Marker']
+      })
+    },
+    updated() {
+      if(this.dialogVisible){
+        this.initMap();
+      }
+    },
   methods: {
-    getDictItems: function(typeName) {
+    initMap(){
+      this. map = new AMap.Map('map', {
+        zoom: 13, // 缩放级别
+        viewMode: '3D',
+        // resizeEnable: true,
+        center:this.mapCenter, // 中心点坐标
+      });
+      this.addMarkers()
+    },
+    addMarkers(){
+      this.arrmap.forEach(marker => {
+        const [longitude, latitude]= marker.lnglat;
+        const markerObj= new window.AMap.Marker({position:[longitude,latitude],title: marker.title,
+          direction: 'right',
+            offset: new AMap.Pixel(10, 0),
+            map: this.map,
+          // icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
+          });
+          markerObj.setLabel({
+            direction: 'right',
+            offset: new AMap.Pixel(10, 0),  //设置文本标注偏移量
+            content: marker.title, //设置文本标注内容
+          });
+          markerObj.on('click',()=>{console.log(marker.title);});
+      });
+    },
+    handleButton({row,index}){
+      if(row.startingLatitude&& row.startingLongitude && row.positionLatitude && row.positionLongitude){
+        this.arrmap=[
+        {
+          lnglat:[row.startingLatitude,row.startingLongitude],
+          title:row.rescueStarting,
+        },{
+          lnglat:[row.positionLatitude,row.positionLongitude],
+          title:row.rescuePosition,
+        },
+      ]
+      let latitude= (row.startingLatitude+ row.positionLatitude) / 2
+      let longitude= (row.startingLongitude+ row.positionLongitude) / 2
+      this.mapCenter=[latitude,longitude]
+      }
+      this.dialogVisible = true
+    },
+    handleClose(){
+      this.dialogVisible = false
+    },
+       getDictItems: function(typeName) {
         let that = this;
         this.$api.insCompany.dicType(typeName)
           .then(function(res) {