之前用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="/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
