百度地图使用

百度地图使用

百度地图（Baidu Map）是为用户提供包括智能路线规划、智能精准导航（驾车、步行、骑行）、实时路况、实时公交等出行相关服务的平台。

初始化

1. 注册开发者账号
2. 导入百度地图script

<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=密钥">`

3. 准备存放地图div

div id="container"></div>

4. 创建地图

var map = new BMap.Map("container");

5. 添加中心点和缩放

var point = new BMap.Point(113.665,34.784);
   	// 指定地图的中心和缩放层次
map.centerAndZoom(point,16);

地图控制

// 添加地图的控制
	map.enableScrollWheelZoom(true); //滚轮缩放
	map.addControl(new BMap.NavigationControl()); //地图导航工具
	map.addControl(new BMap.ScaleControl());    //缩放控制
	map.addControl(new BMap.OverviewMapControl());    //是一个可折叠的缩略地图
	map.addControl(new BMap.MapTypeControl()); 	//地图类型

覆盖型

1. 点

//点的创建
var point = new BMap.Point(经度,纬度);
var marker = new BMap.Marker(point);	
//点的显示
map.addOverlay(marker)

2. 标注（图标）

//创建点
let icon = new BMap.Icon(
	"./assets/start_point.png",//图片的地址
	new BMap.Size(36,42),//显示图片的大小
	{imageSize:new BMap.Size(36,42),anchor: new BMap.Size(18,42)},
	// 把原始图片缩小为36,42，偏移底部中心 （默认是左上角）
	)
	// 创建一个标注点
	var marker = new BMap.Marker(point,{icon:icon});		
	// 把标注点添加到地图
	 map.addOverlay(marker);

3. 圆

// 添加一个圆圈
		var circle = new BMap.Circle(
			point, //源泉中心点
			500, //半径
			{
				strokeColor : "red" ,
				strokeWeight : 2,
				fillOpacity : 0.4
			}
		)
		// 添加圆圈到地图中
		map.addOverlay(circle);

4. 多边形

// 添加多边形
		var polygon = new BMap.Polygon([
			new BMap.Point(经度,纬度),
			new BMap.Point(经度,纬度),
			//可以使之形成一个闭环
		],
		{
			strokeColor : "orange" , //闭环边缘的颜色
			strokeWeight : 2, //线条的粗细
			fillOpacity : 0.3, //填充的透明度
			fillColor : "blue" //填充的颜色
		}
		)
		// 添加进地图
		map.addOverlay(polygon);

事件

// 添加地图事件
		map.addEventListener("click",e => {
			console.log(e.point,e);
		})

信息窗口

// 添加信息窗口 （文字信息）
			// 创建一个标注点
			var marker = new BMap.Marker(point);		
			// 把标注点添加到地图
			map.addOverlay(marker);
		 var info = new BMap.InfoWindow(
			`<div>
				<p>前端深似海</p>
				<p>快乐永常在</p>
			</div>`,
			{title : "前端大本营"}
		 )
		 marker.addEventListener("click" ,() => {
			 // 单击弹出窗口
			 map.openInfoWindow(info,point)
		 })
		 // 显示
		 map.openInfoWindow(info,point);

搜索

// 添加搜索功能
		 let local = new BMap.LocalSearch(map,{
		 	renderOptions : {map : map}
		 })
		 // 根据文本框传过来的内容搜索
		 function blurHd(v) {
			 local.search(v);
		 }

导航

// 路径规划，定义一个起始点，用户鼠标单击地图产生一个终点，让两点之间产生驾车，行走，公交路线规划
//起始点可以是初始化的时候的点
		// 定义一个终点
		let end = null;
		// 鼠标点击
		map.addEventListener("click" , e => {
			// 创建一个结束的点，经纬度
			end = new BMap.Point(e.point.lng,e.point.lat);
			// 
			var marker2 = new BMap.Marker(end);
			map.addOverlay(marker2);
			
			// 搜索开车的路径
			driving.search(point,end);
			//driving.search(起始点,结束点);
			
		})
		
		// 假如是开车时 的行车路径
		var driving = new BMap.DrivingRoute(map,{
			renderOptions : {
				map : map,
				autoViewport : true
			},
			
		});

API

通过给请求 api 服务器地址，返回想对应的数据

//获取城市地址的API
http://api.map.baidus.com/location/ip?ak=你的密钥&coor=bd09ll&output=jsonp