vue项目调用百度地图定位，判断当前位置是否在目标位置范围内

之前用vue做了一个百度地图定位功能，判断是否当前位置在目标位置范围内的小功能，类似这样：

直接上代码

百度地图定位，设置目标位置范围，判断当前位置到目标位置的距离，BDMap.vue


<template><div v-show="IsShowPosition"><div id="mapDiv" @click="hidePosition" style="width: 100%;height: 110%;background-color: rgb(0 0 0 / 78%);position: absolute;top: 0; z-index: 10;"></div><p id="allmap" style="width: 90%;height: 90%;position: absolute;margin: 5%;top: 0; z-index: 11;"></p></div>
</template><script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=百度申请的key"></script>
<script>export default {name: 'mobileIndex',data() {return {address:'',lng:'',lat:'',s:'',};},props: {IsShowPosition: {type: Boolean,default: false},IsLoadData: {type: Boolean,default: false},ids:{type:Object}}, watch:{IsShowPosition(val, oldVal){//普通的watch监听console.log("IsShowPosition: "+val, oldVal);if(this.IsShowPosition){this.getLocation();}},IsLoadData(val, oldVal){//普通的watch监听console.log("IsLoadData: "+val, oldVal);if(this.IsLoadData){this.getLocation();}}},methods:{hidePosition() {//this.IsShowPosition = false;this.$emit('closepop'); //通知父组件改变。},showBaiDuMap(lng, lat) {var _this = this;// 百度地图API功能//地图初始化var map = new BMap.Map("allmap");var point = new BMap.Point(lng, lat);map.centerAndZoom(point, 15);var marker = new BMap.Marker(point);  // 创建标注map.addOverlay(marker);              // 将标注添加到地图中var opts = {width : 200,     // 信息窗口宽度height: 100,     // 信息窗口高度title : _this.ids["xmmc"] , // 信息窗口标题message:_this.ids["xmmc"]}var infoWindow = new BMap.InfoWindow(_this.ids["xmaddress"], opts);  // 创建信息窗口对象 marker.addEventListener("click", function(){          map.openInfoWindow(infoWindow, point); //开启信息窗口}); // 创建圆var circle = new BMap.Circle(point, _this.ids["xmfw"] * 1000, {strokeColor: 'blue',strokeWeight: 2,strokeOpacity: 0.5});map.addOverlay(circle); // 增加圆//设置定位按钮位置var opts = {anchor:BMAP_ANCHOR_BOTTOM_RIGHT}//将定位控件添加到地图上map.addControl(new BMap.GeolocationControl(opts));//设置缩放按钮位置及类型var ove = {anchor: BMAP_ANCHOR_TOP_RIGHT,type: BMAP_NAVIGATION_CONTROL_ZOOM};//添加缩放按钮map.addControl(new BMap.NavigationControl(ove));},// 经纬度转换成三角函数中度分表形式。rad(d) {return d * Math.PI / 180.0; },// 根据经纬度计算距离，参数分别为第一点的纬度，经度；第二点的纬度，经度getDistance(lat1, lng1, lat2, lng2,_this) {var radLat1 = _this.rad(lat1);var radLat2 = _this.rad(lat2);var a = radLat1 - radLat2;var b = _this.rad(lng1) - _this.rad(lng2);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; //输出为公里_this.ids["s"] = s;var distance = s;var distance_str = "";if (parseInt(distance) >= 1) {distance_str = distance.toFixed(1) + "km";} else {distance_str = distance * 1000 + "m";}//s=s.toFixed(4);console.info('lyj 距离是', s);console.info('lyj 距离是', distance_str);return distance_str;},getLocation() {let _this = this;let geolocation = new BMap.Geolocation();  // 创建百度地理位置实例，代替 navigator.geolocationgeolocation.getCurrentPosition(function(e) {if(this.getStatus() == BMAP_STATUS_SUCCESS){// 百度 geolocation 的经纬度属性不同，此处是 point.lat 而不是 coords.latitude// console.log(_this.lng, _this.lat);let point = new BMap.Point(e.point.lng, e.point.lat);let gc = new BMap.Geocoder();gc.getLocation(point, function(rs){_this.address = rs.address;_this.lng = rs.point.lng;_this.lat = rs.point.lat;_this.ids["address"] = rs.address;_this.getDistance(_this.lat,_this.lng,_this.ids["xmlat"],_this.ids["xmlng"],_this);//_this.$layer.alert("当前位置距离项目："+_this.ids["s"]+"km");//this.$emit('updateAddress',_this.ids); _this.showBaiDuMap(_this.ids["xmlng"], _this.ids["xmlat"]);//window.sessionStorage.setItem('address', address);  // 地址存入sessionStorage，再次进入页面就不需要再次请求位置了});} else {console.log(this.getStatus());}});},init(){//this.getLocation();}},mounted(){this.init();}}
</script>

把 BDMap.vue 作为一个组件来调用，调用代码如下：

<template><div><van-field v-model="xmaddress" label="项目地址" @click="showPosition" disabled right-icon="location-o" /><edit :IsShowPosition="IsShowPosition" :IsLoadData="IsLoadData" :ids="ids" @closepop="closepop"></edit></div>
</template><script>import edit from './BDMap';export default {name: 'mobileIndex',data() {return {xmaddress:",ids:{},IsShowPosition:false,IsLoadData:false,};},components:{edit},methods:{closepop() {this.IsShowPosition = false;console.log(this.ids["s"])},showPosition() {if(this.xmaddress){console.log(this.ids["s"])this.IsShowPosition = true;}           }},mounted(){this.init();}}
</script>

还需要在vue项目的首页引用百度地图api

vue项目调用百度地图定位，判断当前位置是否在目标位置范围内相关推荐

vue项目调用百度地图api 学习总结
一.安装百度地图插件: npm install vue-baidu-map –save 二.在vue项目首页index.html进入插件: 注:src里的http必须要写如果不写会出现bug! ! ! ...
vue项目调用百度地图 BMap is not defined
这次老板新接了一个四点半官网页面,使用vue来写.emm--我感觉整个人都不好了,两天半解决了20个静态页面.还好vue写页面简直飞快,遇到一个vue的新坑,使用百度地图. 研究了好一会,总是报错BM ...
vue中调用百度地图获取经纬度
项目中,需要实现获取当前位置的经纬度,或者搜索某个位置并获取经纬度信息,我使用的的是vue,地图使用的是百度地图. 默认自动获取当前位置经纬度拖动小红标获取经纬度关键词查询获取经纬度前期准备 ...
vue中调用百度地图实现搜索等功能
vue中调用百度地图实现搜索等功能在最近做电商项目时用户订单等物流信息想做的更加详细点所以加入了地图这个小功能,不是很难只是在一个未知的领域可能有点迷茫现在也是体会到了,学新的东西还是得看官方文档 ...
Vue项目使用百度地图——经纬度地图组件的封装及使用
1 前言要在vue项目使用百度地图api,首先应做以下配置 (1)index.html index.html添加script <script src="http://api.map. ...
vue项目引入百度地图BMapGL鼠标绘制和BMap辅助工具
目录引言 1.引用百度地图 2.在项目中使用百度地图 2-1.页面结构部分 2-2.js逻辑部分 3-1.页面结构部分 Vue.js 是一个用于构建用户界面的渐进式 JavaScript 框架.它旨 ...
vue项目使用高德地图定位当前地址
vue项目使用高德地图定位当前地址一.在项目中安装vue-amap插件二.页面代码三.data数据一.在项目中安装vue-amap插件 1.最终效果 2.安装命令 npm install vu ...
Vue项目引用百度地图并实现搜索定位等功能
Tip:本篇文章为案例分析,技术点较多,所以篇幅较长,认真阅览的你一定会学到很多知识. 前言:百度地图开放平台给开发者们提供了丰富的地图功能与服务,使我们的项目中可以轻松地实现地图定位.地址搜索.路 ...
php调用百度地图定位,php用百度地图API进行IP定位和GPS定位
/** * 根据地理坐标获取国家.省份.城市,及周边数据类(利用百度Geocoding API实现) * 百度密钥获取方法:http://lbsyun.baidu.com/apiconsole/key ...

vue项目调用百度地图定位，判断当前位置是否在目标位置范围内

vue项目调用百度地图定位，判断当前位置是否在目标位置范围内相关推荐

最新文章

热门文章