vue地图上(百度地图)获取和两个坐标之间的直线距离

一、在主目录下的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