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-amapvid="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 = lng1var lat1 = lat1var lng2 = lng2var lat2 = lat2var 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 * 1000if (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>

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

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

在Vue中使用高德地图
在Vue中使用高德地图一.如何在Vue中引入基础高德地图 1.步骤一:注册并登录高德地图开放平台,申请密钥 2.步骤二:安装高德地图加载器 3.封装一个自定义地图组件,并初始化地图二.根据关键词搜 ...
Vue中使用高德地图，简单明了
一.使用步骤 1.在vue中引入高德地图的加载器 npm i @amap/amap-jsapi-loader --save 在自己的组件中去引用 <template>//这个div就是 ...
Vue中使用高德地图
Vue中使用高德地图定位及poi搜索,以及其他插件的使用方法 1.第一步安装 npm install vue-amap --save 2.引入vue-amap main.js import Vue f ...
在vue中使用高德地图的下属省市区查询，实现省市区的联动以及规划范围
在vue中使用高德地图的下属省市区查询,实现省市区的联动以及规划范围一.先上效果图二.高德地图Vue引用一.先上效果图二.高德地图Vue引用 1. webpack引入高德在webpack.b ...
vue中调用百度地图获取经纬度
项目中,需要实现获取当前位置的经纬度,或者搜索某个位置并获取经纬度信息,我使用的的是vue,地图使用的是百度地图. 默认自动获取当前位置经纬度拖动小红标获取经纬度关键词查询获取经纬度前期准备 ...
Vue中使用高德地图（vue-amap）的采坑记录小白入门
这里写目录标题写在开始 step.1 安装组件 step.2 引入组件 step.3注册高德高德开发者账号,申请KEY step.4 正式使用写在开始俗话说授人以鱼不如授人以渔,直接记录代码的话 ...
vue中引入高德地图Loca数据可视化
目录引言: 关键词: 正文: 一.如何安装或者引入: 二.如何引入: 三.如何使用: 四.完整代码: 五.效果图参考: 引言: 前面我的文章介绍了vue中引入高德地图实例的,详情可以去参考,由于需 ...
百度地图根据经纬度计算距离php,详解js根据百度地图提供经纬度计算两点距离...
正常在使用百度地图时,我们可以通过BMap的实例对象提供的方法计算距离: var map = new BMap.Map('map_canvas'); map.getDistance(point1 ,p ...
根据经纬度计算两地距离
最近工作需要,网上搜索了下根据经纬度计算两地距离的方法,发现要么是几何法,画图.作一堆辅助线,然后证明推理,要么二话不说直接套公式.这篇文章介绍一种容易理解的方式来求这个距离. 0b00 思路地球是 ...

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

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

npm安装

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

源码

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

最新文章

热门文章