vue地图上(百度地图)获取和两个坐标之间的直线距离
一、在主目录下的index.html引入js，例如：<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=秘钥"></script>注意自己遇到的是一个警告，看到控制台有东西就不爽，强迫症，看图：原因：其实就是说页面渲染使用了document.write(...
·
一、在主目录下的index.html引入js，例如：
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=秘钥"></script>注意
自己遇到的是一个警告，看到控制台有东西就不爽，强迫症，看图：
原因：其实就是说页面渲染使用了document.write()，感兴趣可以查询
解决：api改成getscript就行
<script src="http://api.map.baidu.com/getscript?v=2.0&ak=秘钥"></script>二、在webpack.base.conf.js配置文件中配置BMap，在module.exports 中与entry平级，例如：
externals: {
"BMap": "BMap"
},
三、在项目中引入BMap：
四、代码：
<template>
<div>
<main class="container">
<div id="allmap"></div>
<div class="location">
<p>{{location}}</p>
<p>{{distance}}米</p>
</div>
</main>
</div>
</template>
<style scoped lang="less">
#allmap{
width: 100%;
height: 31.5rem;
margin: 0px auto;
}
.location{
line-height: 22px;
}
</style>
<script>
//import BMap from 'BMap' 可有可无
export default{
data(){
return {
center: {lng: 116.5002310000, lat: 39.98170000000},
zoom: 10,
location:'',
distance:0,
}
},
mounted:function(){
//ready() //另种
this.locationbtn()
},
methods:{
ready(){
let map = new BMap.Map('allmap')
let point = new BMap.Point(this.center.lng, this.center.lat)
map.centerAndZoom(point, this.zoom)
map.enableScrollWheelZoom(true)
map.enableDoubleClickZoom(true)
map.addControl(new BMap.NavigationControl());
var geolocation = new BMap.Geolocation()
geolocation.getCurrentPosition((r) => {
if (r.point) {
this.center.lng = r.longitude
this.center.lat = r.latitude
let markers = new BMap.Marker(r.point)
map.addOverlay(markers)
map.panTo(r.point)
map.centerAndZoom(r.point, 16)
console.log(r.point.lng)
console.log(r.point.lat)
}
}, { enableHighAccuracy: true })
},
locationbtn(){
var map = new BMap.Map('allmap');// 创建地图实例
var point = new BMap.Point(this.center.lng, this.center.lat);// 创建点坐标
map.centerAndZoom(point, this.zoom);// 初始化地图，设置中心点坐标和地图级别
map.enableScrollWheelZoom(true)//开启鼠标滚轮缩放
map.enableDoubleClickZoom(true)
var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition((r) => {
if (r.point) {
this.center.lng = r.longitude;
this.center.lat = r.latitude;
console.log('您当前经纬度：'+this.center.lng+','+ this.center.lat);
//距离差距
this.distance = this.getDistance(116.5002310000,39.98170000000,r.longitude,r.latitude)
//用当前定位的经纬度查找省市区街道等信息
var point = new BMap.Point( this.center.lng, this.center.lat);
var gc = new BMap.Geocoder();
var self = this;
gc.getLocation(point, function(rs){
var addComp = rs.addressComponents;
console.log(rs.address);//地址信息
self.location = rs.address;
});
this.center = r.point
// var markers = new BMap.Marker(r.point);
// map.addOverlay(markers);
// map.panTo(r.point);
// map.centerAndZoom(r.point, this.zoom);
//调用地图显示
this.showmap();
}
},{enableHighAccuracy: true});
},
showmap(){
var map = new BMap.Map('allmap');
var point = new BMap.Point(this.center.lng, this.center.lat);
var markers = new BMap.Marker(point);
map.addOverlay(markers);//创建点坐标
//map.panTo(this.center);
map.centerAndZoom(point, this.zoom);
map.setCurrentCity("北京");//由于有3D图，需要设置城市哦
//
// BMAP_ANCHOR_TOP_LEFT 表示控件定位于地图的左上角。
// BMAP_ANCHOR_TOP_RIGHT 表示控件定位于地图的右上角。
// BMAP_ANCHOR_BOTTOM_LEFT 表示控件定位于地图的左下角。
// BMAP_ANCHOR_BOTTOM_RIGHT 表示控件定位于地图的右下角。
//
//添加地图类型控件
map.addControl(new BMap.MapTypeControl({anchor: BMAP_ANCHOR_TOP_RIGHT}));//右上角，默认地图控件
//地图混合
// map.addControl(new BMap.MapTypeControl({
// mapTypes:[
// BMAP_NORMAL_MAP,
// BMAP_HYBRID_MAP
// ]}));
map.addControl(new BMap.NavigationControl({anchor: BMAP_NAVIGATION_CONTROL_LARGE }));//放大缩小 左上角 不同pc或者移动设备样式不同
map.addControl(new BMap.OverviewMapControl({isOpen:true, anchor: BMAP_ANCHOR_BOTTOM_RIGHT}));//添加默认缩略地图控件
map.addControl(new BMap.GeolocationControl());//定位控件，针对移动端开发，默认位于地图左下方
// var BMap_stdMpCtrl = document.getElementsByClassName("BMap_stdMpCtrl")[0];
// BMap_stdMpCtrl.style.top = "50px";
},
/*
* 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;
}
}
}
</script>
地图控件概述
百度地图上负责与地图交互的UI元素称为控件。百度地图API中提供了丰富的控件，您还可以通过Control类来实现自定义控件。
地图API中提供的控件有：
-
- Control：控件的抽象基类，所有控件均继承此类的方法、属性。通过此类您可实现自定义控件。
- NavigationControl：地图平移缩放控件，PC端默认位于地图左上方，它包含控制地图的平移和缩放的功能。移动端提供缩放控件，默认位于地图右下方。
- OverviewMapControl：缩略地图控件，默认位于地图右下方，是一个可折叠的缩略地图。
- ScaleControl：比例尺控件，默认位于地图左下方，显示地图的比例关系。
- MapTypeControl：地图类型控件，默认位于地图右上方。
- CopyrightControl：版权控件，默认位于地图左下方。
- GeolocationControl：定位控件，针对移动端开发，默认位于地图左下方
向地图添加控件
可以使用Map.addControl()方法向地图添加控件。在此之前地图需要进行初始化。例如，要将标准地图控件添加到地图中，可在代码中添加如下内容：
var map = new BMap.Map("container");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
map.addControl(new BMap.NavigationControl());
可以参考网址：https://blog.csdn.net/limingcai168/article/details/83092314
https://www.cnblogs.com/0201zcr/p/4693641.html?utm_source=tuicool&utm_medium=referral
前往低代码交流专区
更多推荐
1
0- 0
已为社区贡献15条内容
所有评论(0)