javascript - vue 怎么通过经纬度来测算公里数？

Question

怎么通过经纬度 测算出公里数然后显示费用 每公里2.5元 求大神帮忙改进改进

<!-- @click="getLocation" -->
<template>
  <div>
      <baidu-map
        style="display:flex;flex-direction: column-reverse;" 
        id="allmap"
        @ready="mapReady"
        @click="getLocation"
        :scroll-wheel-zoom="true"
      >
  <div style="display:flex;justify-content:center;margin:15px">

出发：<bm-auto-complete v-model="searchJingwei" :sugStyle="{zIndex: 999999}">
<el-input  v-model="searchJingwei" style="width:300px;margin-right:15px" placeholder="输入地址"></el-input>
</bm-auto-complete>

目的地：<bm-auto-complete v-model="mdd" :sugStyle="{zIndex: 999999}">
<el-input  v-model="mdd" style="width:300px;margin-right:15px" placeholder="输入地址"></el-input>
</bm-auto-complete>
          <el-button type="primary" @click="getBaiduMapPoint">搜索</el-button>
        </div>
        <p>开始纬度:{{this.latitude}},{{this.longitude}}</p>
          <p>结束纬度:{{this.jslatitude}},{{this.jslongitude}}</p>
          <p>预计费用：</p>
           

        <bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']" anchor="BMAP_ANCHOR_TOP_LEFT"></bm-map-type>
        <bm-marker v-if="infoWindowShow" :position="{lng: longitude, lat: latitude}">
          <bm-label content="" :labelStyle="{color: 'red', fontSize : '24px'}" :offset="{width: -35, height: 30}"/>
        </bm-marker>
        <bm-info-window :position="{lng: longitude, lat: latitude}" :show="infoWindowShow" @clickclose="infoWindowClose">
          <p>纬度:{{this.latitude}}</p>
          <p>经度:{{this.longitude}}</p>
        </bm-info-window>
      </baidu-map>
  </div>
</template>

<script>
export default {
  data () {
    return {
      searchJingwei:'',
      mdd:'',
      infoWindowShow:false,
      longitude:'',
      latitude:'',
      jslongitude:'',
      jslatitude:'',
      feiyong:'',
      point:''
    }
  },

  methods: {
    //地图初始化
    mapReady({ BMap, map }) {
      // 选择一个经纬度作为中心点
      this.point = new BMap.Point(113.27, 23.13);
      map.centerAndZoom("九江", 15);
      this.BMap=BMap
      this.map=map
    },
    //点击获取经纬度
    getLocation(e){
      this.longitude=e.point.lng
      this.latitude=e.point.lat
      this.jslongitude=e.point.lng
      this.jslatitude=e.point.lat
      this.infoWindowShow=true
      
      //console.log(this.latitude,this.latitude);
    },
    getBaiduMapPoint(){
      let that=this
      let myGeo = new this.BMap.Geocoder()
      myGeo.getPoint(this.searchJingwei,function(point){
        if(point){
          that.map.centerAndZoom(point,15)
          that.latitude=point.lat
          that.longitude=point.lng
          that.infoWindowShow=true
          
        }
        //console.log(that.latitude,that.longitude)
      }),
      myGeo.getPoint(this.mdd,function(point){
        if(point){
          that.map.centerAndZoom(point,15)
          that.jslatitude=point.lat
          that.jslongitude=point.lng
          that.infoWindowShow=true
        }

      })
      
      // let a = (map.getDistance(pointB.value, pointA.value) / 1000).toFixed(2)
      
    },
    //信息窗口关闭
    infoWindowClose(){
      this.latitude=''
      this.longitude=''
      this.infoWindowShow=false
    },
  },
}
</script>

<style  >
#allmap{
  height: 450px;
  width: 100%;
  margin: 10px 0;
}
</style>

Answer 1

百度地图经纬度获取详细地址以及经纬度计算距离

https://blog.csdn.net/qq_42396791/article/details/87801234

/*  
             * Lat1 Lung1 表示A点经纬度，Lat2 Lung2 表示B点经纬度； a=Lat1 – Lat2 为两点纬度之差 b=Lung1 
             * -Lung2 为两点经度之差； 6378.137为地球半径，单位为千米；  计算出来的结果单位为千米。
             * 通过经纬度获取距离(单位：千米)   
             * @param lat1   
             * @param lng1   
             * @param lat2   
             * @param lng2
             * @return
             */
            getDistance(lat1,lng1,lat2,lng2) {
                let EARTH_RADIUS = 6378.137;
                let radLat1 = this.rad(lat1);    
                let radLat2 = this.rad(lat2);  
                let a = radLat1 - radLat2;
                let b = this.rad(lng1) - this.rad(lng2);    
                let 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 * EARTH_RADIUS;
                //s = Math.round(s * 10000d) / 10000d;
                s = Math.round(s * 10000) / 10000;
                s = s*1000;    //乘以1000是换算成米
                return s;
            },
            rad(d){
                return d * Math.PI / 180.0;    
            }

Answer 2

百度地图:
通过官方提供的方法获取点的经纬度：

new BMap.Point(poi.point.lng, poi.point.lat)

/**
     * 计算两点间的距离
     * pt1 {lng:"12.34",lat:"3423"}第一个点的经纬度
     * pt2 {lng:"12.34",lat:"3423"}第二个点的经纬度
     * */
    getDistance:function(pt1,pt2){
        var map = new BMap.Map("container");
        var point1 = new BMap.Point(pt1.lng,pt1.lat);
        var point2 = new BMap.Point(pt2.lng,pt2.lat);
        var distance = map.getDistance(point1,point2);
        return distance;
    },

https://blog.csdn.net/forze_cq/article/details/97767972

用他人开发的库:

https://juejin.cn/post/7025435587557457950

Answer 3

从高德地图或者腾讯地图找找API吧，这个单纯经纬度是没法过去路线的。