vue中引用高德地图根据经纬度计算两地距离

vue中引用高德地图根据经纬度计算两地距离

一.示例图：

npm安装

 npm install vue-amap --save

在min.js文件中引入vue-amap

import VueAMap from 'vue-amap';
Vue.use(VueAMap);
 // 初始化高德地图的 key 和插件
VueAMap.initAMapApiLoader({
     
  key: '8f2cabe1725281788ba9de184184942f',
  plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor',"AMap.Geolocation" ],
  v: '1.4.15'
})
let AMap=VueAMap;
Vue.use(AMap);

源码

```c
//样式
 <P class="mist">距离{
     {
     getdiscount(ruleForm.lat,ruleForm.long,item.latitude,item.longitude)}}</P>
 <el-amap
      vid="amapDemo"
      :plugin="plugin"
      class="amap-demo"
      style="display:none"
    >
    </el-amap>
//----------------------
<script>
import axios from "axios";
import VueAMap from "vue-amap";
import Amap from "amap";
export default {
     
  name: "AmapPage",
  data() {
     
      	var self=this;
	    return {
     
	      ruleForm: {
     
	        addr: "",
	        long: "",
	        lat: "",
	      },      
      /*一些工具插件*/
      plugin: [
        {
     
          // 定位
          pName: "Geolocation",
          events: {
     
            init(o) {
     
              // o是高德地图定位插件实例
              o.getCurrentPosition((status, result) => {
     
                if (result && result.position) {
     
                  // 设置经度
                  self.ruleForm.long = result.position.lng;
                  // 设置维度
                  self.ruleForm.lat = result.position.lat;
                }
              });
            },
          },
        }
      ]
    };
  },
  created() {
     
    this.$axios.get("/ssfj",//数据接口
                    {
     
                      params:{
     
                          dis:10,
                          latitude:39.732408,//纬度
                          longitude:116.554932,  //经度
                      }
                    }
                  ).then((res)=>{
     
                        console.log(res)
                    })   
    },
    methods: {
     
    getdiscount(lat1,lng1,lat2,lng2){
     
      // console.log(paramObj)
      var lng1 = lng1
      var lat1 = lat1
      var lng2 = lng2
      var lat2 = lat2
      var radLat1 = lat1*Math.PI / 180.0;
      var radLat2 = lat2*Math.PI / 180.0;
      var a = radLat1 - radLat2;
      var  b = lng1*Math.PI / 180.0 - lng2*Math.PI / 180.0;
      var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a/2),2) +
      Math.cos(radLat1)*Math.cos(radLat2)*Math.pow(Math.sin(b/2),2)));
      s = s *6378.137 ;// EARTH_RADIUS;
      s = Math.round(s * 10000) / 10000;
      s = s * 1000
      if (isNaN(s)) {
       
          return 0+'m';  
      }  
      if (s > 1000) {
     
          //    大于1000米时
          s = Math.floor(s/1000 * 100) / 100;
          s = s + 'km'
      } else {
     
          //    小于1000米直接返回
          s = s + 'm'
      }
      return s;
    }
  },
};
</script>

有什么问题大家可以留言哦！