SOURCE

var app = new Vue({
  el: '#app',
  data: {
    zoom: 1,
    zb:{},
    error:'',
    target:{
      latitude:31.49358 ,
      longitude:120.369591
    }
  },
  computed:{
    currentPosition:function(){
      if(JSON.stringify(this.zb) != '{}') {
        return {
        	latitude:this.zb.coords.latitude,
        	longitude:this.zb.coords.longitude
      	} 
      }else {
          return  {
            latitude:0,
        		longitude:0
          }
        
      }
      
    },
    
    targetPosition:function(){
      return {
        latitude:this.target.latitude,
        longitude:this.target.longitude
      }
    },
    getDistance:function()
{
  var $lat1 = this.targetPosition.latitude
  var $lng1 = this.targetPosition.longitude
  var $lat2 = this.currentPosition.latitude
  var $lng2 = this.currentPosition.longitude
var $earthRadius = 6367000;
$lat1 = ($lat1 * Math.PI ) / 180;
$lng1 = ($lng1 * Math.PI ) / 180; 
$lat2 = ($lat2 * Math.PI ) / 180;
$lng2 = ($lng2 * Math.PI ) / 180; 
var $calcLongitude = $lng2 - $lng1;
var $calcLatitude = $lat2 - $lat1;
var $stepOne = Math.pow(Math.sin($calcLatitude / 2), 2) + Math.cos($lat1) * Math.cos($lat2) * Math.pow(Math.sin($calcLongitude / 2), 2);
var $stepTwo = 2 * Math.asin(Math.min(1, Math.sqrt($stepOne)));
var $calculatedDistance = $earthRadius * $stepTwo; 
return Math.round($calculatedDistance);
}
    
  },
  mounted:function(){
    if (navigator.geolocation)
    {
    	navigator.geolocation.getCurrentPosition(this.getxy,this.showError)
    } else {
      this.error = '不支持位置'
    }
  },
  methods:{
    getxy:function(position){
      this.zb = position
    },
    fd:function(){
      
    },
    sx:function(){
      
    },
     
    reload:function(){
      window.location.reload()
    },
    showError:function (error)
    {
        switch(error.code) 
        {
            case error.PERMISSION_DENIED:
                this.error="用户拒绝对获取地理位置的请求。"
                break;
            case error.POSITION_UNAVAILABLE:
                this.error="位置信息是不可用的。"
                break;
            case error.TIMEOUT:
                this.error="请求用户地理位置超时。"
                break;
            case error.UNKNOWN_ERROR:
                this.error="未知错误。"
                break;
        }
    }
  }
})

<div id="app">
  
  <div class="point current-point" v-bind:style="{top:currentPosition.latitude+'px',left:currentPosition.longitude+'px'}">
    <div class="inner">
      <span>({{currentPosition.latitude}},{{currentPosition.longitude}})</span>        </div>
  </div>
    
    
    <div class="point" v-bind:style="{top:target.latitude+'px',left:target.longitude+'px'}">
    <div class="inner">
      <span>({{target.latitude}},{{target.longitude}})</span>        
    </div>
  </div>
    
    
    <svg  class="svgline"> 
      <line :x1="currentPosition.longitude+10" :y1="currentPosition.latitude+10" :x2="targetPosition.longitude+10" :y2="targetPosition.latitude+10" stroke="#000" stroke-width="2" /> </svg>
  
  <div class="fixed-bottom">
    <span>{{getDistance}}</span>
    <button @click="fd">+</button><button @click="sx">-</button>
    <input type="text" v-model="target.latitude" />
    <input type="text" v-model="target.longitude" />
    <button @click="reload" class="btn-reload">刷新</button>
  </div>
    
    
    
  
  
  
</div>

body {
  background: #eee;
  width: 100%;
  height: 100%;
  margin:0;
  padding:0;
}
.point {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius:50%;
  background: #8f89ff;
  z-index:2;
}
.svgline {
  position:relative;
  z-index:0;
  /* background:rgba(0,0,0,0.2); */
  width: 100vw;
  height:100vh;
}
.inner  {
  position: relative;
  /* display: none; */
}
  

.inner span {
  position:absolute;
  font-size: 12px;
  top:0;
  left: 20px;
}
.current-point {
  background: #4086fc;
  z-index:3;
}
.fixed-bottom {
  position: fixed;
  bottom:80px;
  display:flex;
  width:100%;
  left:0;
}