地图坐标转换

src/utils/index.js

@@ -52,3 +52,35 @@ export function formatTime(time, option) {
     return d.getMonth() + 1 + '月' + d.getDate() + '日' + d.getHours() + '时' + d.getMinutes() + '分'
   }
 }
+
+// 将百度地图经纬度转换为腾讯/高德地图经纬度
+export function bMapTransQQMap(lng, lat) {
+    let x_pi = 3.14159265358979324 * 3000.0 / 180.0;
+    let x = lng - 0.0065;
+    let y = lat - 0.006;
+    let z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * x_pi);
+    let theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * x_pi);
+    let lngs = z * Math.cos(theta);
+    let lats = z * Math.sin(theta);
+    
+    return {
+          lng: lngs,
+          lat: lats     
+    }  
+}
+
+// 将腾讯/高德地图经纬度转换为百度地图经纬度
+export function qqMapTransBMap(lng, lat) {
+    let x_pi = 3.14159265358979324 * 3000.0 / 180.0;
+    let x = lng;
+    let y = lat;
+    let z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * x_pi);
+    let theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * x_pi);
+    let lngs = z * Math.cos(theta) + 0.0065;
+    let lats = z * Math.sin(theta) + 0.006;
+   
+    return {
+          lng: lngs,
+          lat: lats 
+    } 
+}

src/views/pms/origin/components/originDetail.vue

@@ -64,10 +64,10 @@
       <el-form-item label="详细地址">
         <el-input v-model="origin.detailAddress"></el-input>
       </el-form-item>
-      <el-form-item label="经度（°）">
+      <el-form-item label="经度（°）" prop="longitude">
         <el-input v-model="origin.longitude"></el-input>
       </el-form-item>
-      <el-form-item label="维度（°）">
+      <el-form-item label="维度（°）" prop="latitude">
         <el-input v-model="origin.latitude"></el-input>
       </el-form-item>
       <el-form-item>
@@ -96,6 +96,7 @@
   import {createOrigin, getOrigin, updateOrigin} from '@/api/origin'
   import SingleUpload from '@/components/Upload/singleUpload'
   import MultiUpload from '@/components/Upload/multiUpload'
+  import {bMapTransQQMap,qqMapTransBMap} from '@/utils/index';
   import {BaiduMap,BmNavigation,BmView,BmGeolocation,BmCityList} from 'vue-baidu-map'
   const defaultorigin={
     altitude: null,
@@ -160,6 +161,12 @@
           sort: [
             {type: 'number', message: '排序必须为数字'}
           ],
+          longitude: [
+            {required: true, message: '请选择经纬度', trigger: 'blur'}
+          ],
+          latitude  : [
+            {required: true, message: '请选择经纬度', trigger: 'blur'}
+          ],
         },
         center: {lng: 106.632713, lat: 26.653157},
         zoom: 12,
@@ -282,7 +289,9 @@
             _this.center = {lng: r.longitude, lat: r.latitude};		// 设置center属性值
             console.log('_this.center',_this.origin);
             if(_this.origin.latitude&&_this.origin.longitude){
-              _this.center = {lng: _this.origin.longitude, lat: _this.origin.latitude};
+              let transqq = qqMapTransBMap(_this.origin.longitude,_this.origin.latitude);
+              console.log('transqq',transqq);
+              _this.center = {lng:transqq.lng, lat: transqq.lat};
             };
             let Icon_0 = new BMap.Icon("static/zuobiao.gif", new BMap.Size(64, 64), {anchor: new BMap.Size(18, 32),imageSize: new BMap.Size(36, 36)});
             let myMarker = new BMap.Marker(new BMap.Point(_this.origin.longitude, _this.origin.latitude),{icon: Icon_0});
@@ -310,17 +319,21 @@
             _this.origin.countyId = rs.addressComponents.district;
             _this.origin.detailAddress = rs.address;
           });
-            this.origin.longitude = e.point.lng;
-            this.origin.latitude = e.point.lat;
+          //转为高德坐标
+          let transGaode = bMapTransQQMap(e.point.lng,e.point.lat);
+          this.origin.longitude = transGaode.lng;
+          this.origin.latitude = transGaode.lat;
+          // this.origin.longitude = e.point.lng;
+          // this.origin.latitude = e.point.lat;
         },
         //定位成功回调
         getLoctionSuccess(point, AddressComponent, marker){
-          map.clearOverlays();
-          let Icon_0 = new BMap.Icon("/static/zuobiao.gif", new BMap.Size(64, 64), {anchor: new BMap.Size(18, 32),imageSize: new BMap.Size(36, 36)});
-          var myMarker = new BMap.Marker(new BMap.Point(point.point.lng, point.point.lat),{icon: Icon_0});
-          map.addOverlay(myMarker);
-          this.company.longitude = point.point.lng;
-          this.company.latitude = point.point.lat;
+          // map.clearOverlays();
+          // let Icon_0 = new BMap.Icon("/static/zuobiao.gif", new BMap.Size(64, 64), {anchor: new BMap.Size(18, 32),imageSize: new BMap.Size(36, 36)});
+          // var myMarker = new BMap.Marker(new BMap.Point(point.point.lng, point.point.lat),{icon: Icon_0});
+          // map.addOverlay(myMarker);
+          // this.company.longitude = point.point.lng;
+          // this.company.latitude = point.point.lat;
         },
         findlocation(){
           this.$emit("findlocdata",this.company)

src/views/ums/company/components/companyDetail.vue

@@ -84,10 +84,10 @@
       <el-form-item label="详细地址">
         <el-input v-model="company.detailAddress"></el-input>
       </el-form-item>
-      <el-form-item label="经度（°）">
+      <el-form-item label="经度（°）" prop="longitude">
         <el-input placeholder=""  style="width: 80%;" size="samll" v-model.number="company.longitude"></el-input>
       </el-form-item>
-      <el-form-item label="维度（°）">
+      <el-form-item label="维度（°）" prop="latitude">
         <el-input v-model="company.latitude"></el-input>
       </el-form-item>
       <el-form-item>
@@ -123,6 +123,7 @@
   import {createCompany, getCompany, updateCompany} from '@/api/company'
   import SingleUpload from '@/components/Upload/singleUpload'
   import MultiUpload from '@/components/Upload/multiUpload'
+  import {bMapTransQQMap,qqMapTransBMap} from '@/utils/index';
   import {BaiduMap,BmNavigation,BmView,BmGeolocation,BmCityList} from 'vue-baidu-map'
   const defaultCompany={
     cityId: "",
@@ -194,6 +195,12 @@
           sort: [
             {type: 'number', message: '排序必须为数字'}
           ],
+          longitude: [
+            {required: true, message: '请选择经纬度', trigger: 'blur'}
+          ],
+          latitude  : [
+            {required: true, message: '请选择经纬度', trigger: 'blur'}
+          ],
         },
         center: {lng: 106.632713, lat: 26.653157},
         zoom: 12,
@@ -335,6 +342,14 @@
           geolocation.getCurrentPosition(function(r){
             // console.log(r);
             _this.center = {lng: r.longitude, lat: r.latitude};		// 设置center属性值
+            if(_this.company.latitude&&_this.company.longitude){
+              let transqq = qqMapTransBMap(_this.company.longitude,_this.company.latitude);
+              console.log('transqq',transqq);
+              _this.center = {lng:transqq.lng, lat: transqq.lat};
+            };
+            let Icon_0 = new BMap.Icon("static/zuobiao.gif", new BMap.Size(64, 64), {anchor: new BMap.Size(18, 32),imageSize: new BMap.Size(36, 36)});
+            let myMarker = new BMap.Marker(new BMap.Point(_this.company.longitude, _this.company.latitude),{icon: Icon_0});
+            map.addOverlay(myMarker);
             _this.autoLocationPoint = {lng: r.longitude, lat: r.latitude};		// 自定义覆盖物
             _this.initLocation = true;
           },{enableHighAccuracy: true})
@@ -358,17 +373,23 @@
             _this.company.countyId = rs.addressComponents.district;
             _this.company.detailAddress = rs.address;
           });
-            this.company.longitude = e.point.lng;
-            this.company.latitude = e.point.lat;
+           //转为高德坐标
+          let transGaode = bMapTransQQMap(e.point.lng,e.point.lat);
+          this.company.longitude = transGaode.lng;
+          this.company.latitude = transGaode.lat;
+            // this.company.longitude = e.point.lng;
+            // this.company.latitude = e.point.lat;
         },
         //定位成功回调
         getLoctionSuccess(point, AddressComponent, marker){
-          map.clearOverlays();
-          let Icon_0 = new BMap.Icon("/static/zuobiao.gif", new BMap.Size(64, 64), {anchor: new BMap.Size(18, 32),imageSize: new BMap.Size(36, 36)});
-          var myMarker = new BMap.Marker(new BMap.Point(point.point.lng, point.point.lat),{icon: Icon_0});
-          map.addOverlay(myMarker);
-          this.company.longitude = point.point.lng;
-          this.company.latitude = point.point.lat;
+          // map.clearOverlays();
+          // let transqq = qqMapTransBMap(point.point.lng,point.point.lat);
+          // let Icon_0 = new BMap.Icon("/static/zuobiao.gif", new BMap.Size(64, 64), {anchor: new BMap.Size(18, 32),imageSize: new BMap.Size(36, 36)});
+          // var myMarker = new BMap.Marker(new BMap.Point(transqq.lng, transqq.lat),{icon: Icon_0});
+          // console.log('transqq',transqq);
+          // map.addOverlay(myMarker);
+          // this.company.longitude = point.point.lng;
+          // this.company.latitude = point.point.lat;
         },
         findlocation(){
           this.$emit("findlocdata",this.company)