接入百度地图经纬度查询接口

Author: HuangXiZhou

package.json

@@ -23,11 +23,13 @@
   "dependencies": {
     "axios": "^0.16.1",
     "iview": "^2.4.0",
+    "jsonp": "^0.2.1",
     "left-pad": "1.1.3",
     "less": "^2.7.2",
     "less-loader": "^4.0.5",
     "lodash": "^4.17.4",
     "particles.js": "^2.0.0",
+    "qs": "^6.5.1",
     "store": "^2.0.12",
     "vue": "^2.3.3",
     "vue-echarts": "^2.4.1",

src/renderer/components/Ui/AddPointModal.vue

@@ -11,9 +11,11 @@
       <span>添加地点</span>
     </p>
     <div style="text-align:center">
-      <Input class="addPointModal-input" v-model="model[0]" placeholder="地点名称" style="width: 300px"></Input><br>
-      <Input class="addPointModal-input" v-model="model[1]" placeholder="经度" style="width: 300px"></Input><br>
-      <Input class="addPointModal-input" v-model="model[2]" placeholder="纬度" style="width: 300px"></Input><br>
+      <Input class="addPointModal-input" v-model="model[0]" placeholder="地点名称" style="width: 300px" @on-blur="getLocation"></Input><br>
+      <Input v-if="!hasGetLocation" class="addPointModal-input" v-model="model[1]" placeholder="经度" style="margin-top:18px;width: 300px"></Input><br>
+      <Input v-if="hasGetLocation" class="addPointModal-input" :value="model[1]" style="width: 300px"></Input><br>      
+      <Input v-if="!hasGetLocation" class="addPointModal-input" v-model="model[2]" placeholder="纬度" style="width: 300px"></Input><br>
+      <Input v-if="hasGetLocation" class="addPointModal-input" :value="model[2]" style="margin-bottom:18px;width: 300px"></Input><br>      
       <DatePicker class="addPointModal-input" @on-change="getDate($event)" type="date" placeholder="选择日期" style="width: 300px"></DatePicker>
     </div>
   </Modal>
@@ -44,20 +46,43 @@ export default {
         '',
         ''
       ],
-      showModal: false
+      showModal: false,
+      hasGetLocation: false
     }
   },
-  computed: mapState({
-    excelData: state => state.excel.excelData,
-    countAlias: 'excelData',
-    userId: state => state.userInfo.userInfo.objectId || storage.get('userId'),
-    countAlias: 'userId'
-  }),
+  computed: {
+    ...mapState({
+      excelData: state => state.excel.excelData,
+      countAlias: 'excelData',
+      userId: state => state.userInfo.userInfo.objectId || storage.get('userId'),
+      countAlias: 'userId'
+    }),
+  },
   methods: {
     ...mapActions({
       addExcelData: 'addExcelData',
       setExcelData: 'setExcelData'
     }),
+    getLocation() {
+      if(this.model[0] !== '') {
+        this.$Spin.show()
+        ajax.get({
+          url: url.GETLOCATION_CHINA,
+          data: {
+            address: this.model[0],
+            output: 'json',
+            ak: 'O9WWqYCWQ0d0N1KI85Blg7X2fSBsxOAs',
+            callback: 'showLocation'
+          }
+        }).then(data => {
+          console.log(data)
+          this.model[1] = data.result.location.lng
+          this.model[2] = data.result.location.lat
+          this.hasGetLocation = true
+          this.$Spin.hide()
+        })
+      }
+    },
     addPoint() {
       if(this.model[0] === '' || this.model[1] === '' || this.model[2] === '' || this.model[3] === '')
         this.$Message.error('输入不能为空')
@@ -74,6 +99,8 @@ export default {
         }
         else
           this.addExcelData(this.model)
+        this.model = ['', '', '', '']  
+        this.hasGetLocation = false      
         let updateMapDate = new Date(_.now()).toLocaleString()
         ajax.post({
           url: url.ASYNC_UPLOAD,
@@ -113,7 +140,7 @@ export default {
 
 <style lang="less" scoped>
 @import '../../assets/my-theme/custom.less';
-  .addPointModal-input {
-    margin-bottom: 12px;
+  .addPointModal-input_1 {
+    margin-bottom: 18px;
   }
 </style>

src/renderer/server/ajax.js

@@ -1,15 +1,17 @@
 import axios from 'axios'
 import { Message } from 'iview'
+import jsonp from 'jsonp'
+import qs from 'qs'
 axios.defaults.timeout = 1000000; //响应时间
 axios.defaults.headers.post['Content-Type'] = 'application/json' //通信格式
-// axios.defaults.baseURL = 'http://localhost:3000/' //配置接口地址
-axios.defaults.baseURL = 'https://imap.leanapp.cn' //配置接口地址
+axios.defaults.baseURL = 'http://localhost:3000/' //配置接口地址
+// axios.defaults.baseURL = 'https://imap.leanapp.cn' //配置接口地址
 
 export default {
   // POST请求
   post({...obj}) {
     return new Promise((resolve,reject) => {
-      axios.post(obj.url, obj.data).then((data) => {
+      axios.post(obj.url, obj.data).then(data => {
         if(data.data.code === 0){
           Message.success(data.data.msg)
           resolve(data.data)
@@ -23,8 +25,22 @@ export default {
           Message.error(data.data.msg)
           resolve(data.data)
         }
-      }).catch((data) => {
-        reject(data);
+      }).catch(data => {
+        reject(data)
+      })
+    })
+  },
+  // GET请求
+  get({...obj}) {
+    return new Promise((resolve, reject) => {
+      jsonp(obj.url + '?' + qs.stringify(obj.data) , null,  (err, data) => {
+        if (err) {
+          Message.error('请求错误')          
+        } else {
+          if(data.status === 0) {
+            resolve(data)            
+          }
+        }
       })
     })
   }

src/renderer/server/url.js

@@ -1,11 +1,12 @@
 export default {
-  REGISTER       : '/api/v1/auth/register',
-  EMAILLOGIN     : '/api/v1/auth/login',
-  ASKCODE        : '/api/v1/auth/login/askCode',
-  PHONELOGIN     : '/api/v1/auth/login/phone',
-  FORGETPASSWORD : '/api/v1/auth/forgetPassword',
-  RESOLVEEXCEL   : '/api/v1/resolveExcel',
-  ASYNC_UPLOAD   : '/api/v1/async/upload',
-  ASYNC_DOWNLOAD : '/api/v1/async/download',
-  DELMAPDATA     : '/api/v1/delMapData'
+  REGISTER         : '/api/v1/auth/register',
+  EMAILLOGIN       : '/api/v1/auth/login',
+  ASKCODE          : '/api/v1/auth/login/askCode',
+  PHONELOGIN       : '/api/v1/auth/login/phone',
+  FORGETPASSWORD   : '/api/v1/auth/forgetPassword',
+  RESOLVEEXCEL     : '/api/v1/resolveExcel',
+  ASYNC_UPLOAD     : '/api/v1/async/upload',
+  ASYNC_DOWNLOAD   : '/api/v1/async/download',
+  DELMAPDATA       : '/api/v1/delMapData',
+  GETLOCATION_CHINA: 'https://api.map.baidu.com/geocoder/v2/'
 }

yarn.lock

@@ -3504,6 +3504,12 @@ jsonify@~0.0.0:
   version "0.0.0"
   resolved "http://registry.npm.taobao.org/jsonify/download/jsonify-0.0.0.tgz#2c74b6ee41d93ca51b7b5aaee8f503631d252a73"
 
+jsonp@^0.2.1:
+  version "0.2.1"
+  resolved "http://registry.npm.taobao.org/jsonp/download/jsonp-0.2.1.tgz#a65b4fa0f10bda719a05441ea7b94c55f3e15bae"
+  dependencies:
+    debug "^2.1.3"
+
 jsprim@^1.2.2:
   version "1.4.1"
   resolved "http://registry.npm.taobao.org/jsprim/download/jsprim-1.4.1.tgz#313e66bc1e5cc06e438bc1b7499c2e5c56acb6a2"
@@ -4864,7 +4870,7 @@ q@^1.1.2:
   version "1.5.0"
   resolved "http://registry.npm.taobao.org/q/download/q-1.5.0.tgz#dd01bac9d06d30e6f219aecb8253ee9ebdc308f1"
 
-qs@6.5.1, qs@~6.5.1:
+qs@6.5.1, qs@^6.5.1, qs@~6.5.1:
   version "6.5.1"
   resolved "http://registry.npm.taobao.org/qs/download/qs-6.5.1.tgz#349cdf6eef89ec45c12d7d5eb3fc0c870343a6d8"