百度地图的使用

百度地图的使用

引入

<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=您的密钥"></script>

初始化地图

var map = new BMapGL.Map("container");          // 创建地图实例 
var point = new BMapGL.Point(116.404, 39.915);  // 创建点坐标 
map.centerAndZoom(point, 15);                 // 初始化地图，设置中心点坐标和地图级别

百度地图的常用知识

控件

		var scaleCtrl = new BMapGL.ScaleControl(); // 添加比例尺控件
		map.addControl(scaleCtrl);
		var zoomCtrl = new BMapGL.ZoomControl(); // 添加缩放控件
		map.addControl(zoomCtrl);
		var cityCtrl = new BMapGL.CityListControl(); // 添加城市列表控件
		map.addControl(cityCtrl);

点，线，多边形，圆

		//添加点
		var marjer = new BMapGL.Marker(point)
		//添加覆盖物
		map.addOverlay(marjer)
		//存储多个点
		var line = []
		var markers = []

		//监听事件
		map.addEventListener('click', e => {
   
			//创建点
			var p = new BMapGL.Point(e.latlng.lng, e.latlng.lat)
			//创建标记
			var m = new BMapGL.Marker(p)
			//添加标记
			map.addOverlay(m)
			//存储点
			line.push(p)
			console.log(e)
		})

		map.addEventListener('dblclick', e => {
   
			//把第0个点放最后
			line.push(line[0])
			//创建多边形
			var polygone = new BMapGL.Poly