前端百度地图添加点并跳转到百度地图进行导航

目录

一、需求

二、展示地图

三、添加点覆盖物

四、添加信息窗口（需展示地址名称） 

五、唤起百度地图

六、完整代码

---

一、需求

前端有时候需要做地图展示，我一般用的地图是天地图和百度地图，大家可以通过官网来制作地图。

1.天地图：天地图API

可根据类参考或者代码示例来制作地图。

2。百度地图：jspopularGL | 百度地图API SDK

申请秘钥、 展示地图、demo参考来制作地图。

前端需要展示地图，添加地址的点位（获取经纬度，把点添加到地图上），点击点跳转到app或者是官网上，这里用到的是百度地图，天地图暂时不提供导航服务。

下面我们对这一需求进行实现。

二、展示地图

html代码：

<div class="map" id="map">

</div>

其中map是放地图的容器，一定要给这个div设置宽和高，不然不显示。

css代码：

.map{
   width: 100%;
   height: 100vh;
}
.map .anchorBL {
   display: none;
}

其中.anchorBL是百度地图的水印。这里将水印隐藏，水印长这样：

js代码：

	getMap();
	var map;
	//展示地图
	function getMap(){
	
	    map = new BMapGL.Map('map');
	    var center = new BMapGL.Point(106.639958,26.645316);
	    map.centerAndZoom(center, 13);
	    map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
	    map.enableScrollWheelZoom(true);
	    map.setMapType(BMAP_SATELLITE_MAP);//设置地图类型为普通卫星地图模式
	
	    var scaleCtrl = new BMapGL.ScaleControl(); // 添加比例尺控件
	    var zoomCtrl = new BMapGL.ZoomControl(); // 添加缩放控件
	    map.addControl(scaleCtrl);

	}

需要注意的是：map.setMapType(BMAP_SATELLITE_MAP);//设置地图类型为普通卫星地图模式

运行结果：

三、添加点覆盖物

	let address = [
	    {
	        name:'地址一',
	        lng:106.641252,
	        lat:26.652775
	    },
	    {
	        name:'地址二',
	        lng:106.629753,
	        lat:26.637856
	    }
	];
	
	//添加位置标识
	address.forEach((v,k)=>{
	    addMaker1(v,v.name,-100,-60,'button')
	})
	
	function addMaker1(point,name,x,y,button) {
	    // 创建图标
	    var myIcon = new BMapGL.Icon("image/pointer.png", new BMapGL.Size(30, 39));
	
	    var pointer = new BMapGL.Point(point.lng,point.lat);
	    var marker = new BMapGL.Marker(pointer, {
	        icon: myIcon
	    });
	    map.addOverlay(marker);
	}
	

运行结果：