百度地图

最新推荐文章于 2023-06-15 14:36:39 发布

潮有信

最新推荐文章于 2023-06-15 14:36:39 发布

阅读量270

点赞数 1

文章标签： jquery html css

本文链接：https://blog.csdn.net/missrl/article/details/106388995

版权

百度地图

一、初始化

1、注册开发者账号

2、导入百度地图script

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

3、准备存放地图

<body>
<div id="container"></div>
</body>

4、创建地图

var map = new BMap.Map("container");
// 创建地图实例  
var point = new BMap.Point(经度, 纬度);
//例子：var point = new BMap.Point(113.665,34.784);
// 创建点坐标  
map.centerAndZoom(point, 地图级别书数字表示);
//例子：map.centerAndZoom(point,16);
// 初始化地图，设置中心点坐标和地图级别

5、添加中心和缩放

 map.enableScrollWheelZoom(true);// 可以滚动缩放

二、地图控制

	map.enableScrollWheelZoom(true);// 可以滚动缩放
	map.addControl(new BMap.NavigationControl());//地图导航工具
	map.addControl(new BMap.ScaleControl()); //缩放控制
	map.addControl(new BMap.OverviewMapControl());  //概览  
	map.addControl(new BMap.MapTypeControl());   // 地图类型

三、覆盖

1、点

1、创建点

// 创建一个标注点
var marker = new BMap.Marker(point,{icon:icon});		
// 把标注点添加到地图
map.addOverlay(marker);

2、显示点

// 把标注点添加到地图
map.addOverlay(marker);

3、图标

// 创建一个自定义标注
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});

2、圆

// 目标：添加一个圆圈
 var circle = new BMap.Circle(
 point,//圆圈中心点
 500,//半径
 {strokeColor:"blue",strokeWeight:2,fillOpacity:0.4}
 );
 map.addOverlay(circle);

3、多边形

 // 目标2 多边形
	 var polygon = new BMap.Polygon([
		 new BMap.Point(113.66472152529185,34.78609747393126),
		 new BMap.Point(113.66772186569519,34.78603076963989),
		 new BMap.Point(113.66766796736458,34.782999372726685),
		 new BMap.Point(113.66178406627422,34.78423714494914),
		 new BMap.Point(113.66473949140206,34.78453361455538),
		 new BMap.Point(113.66472152529185,34.78609747393126)
	 ],
	 {strokeColor:"orange",strokeWeight:2,fillColor:"blue",fillOpacity:0.3}
	 );
	  map.addOverlay(polygon);

四、事件

marker.addEventListener("click",e=> {e.point}

五、信息窗口

1、创建窗口

new BMap.InfoWindow()
{title:"web前端大本营"}

2、显示信息窗口

// 定义弹出框
		marker.addEventListener("click",() => {
			map.openInfoWindow(info,point);
			// 单击点弹出窗口
		})
		map.openInfoWindow(info,point);
		// 打开弹出框（信息，点）

六、搜索

1、创建关键字

let local = new BMap.LocalSearch(map,{
			renderOptions:{map:map}
		})

2、搜索关键字

local.search(关键字)

七、导航

1、创建导航

var driving = new BMap.DrivingRoute(map,{
renderOptions:{map:map,autoViewport:true}

2、执行导航

driving.search(point,end);// 搜索路径

八、api

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

2、ip获取城市名称

http://api.map.baidu.com/location/ip?ak=你的ak&coor=bd09ll&output=jsonp

代码如下

 <!DOCTYPE html>
 <html lang="zh">
 <head>
 	<meta charset="UTF-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<title>地图标注</title>
   	<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=W1S4MbLXOyfrv18dhMZPs15FCs4YQb4U"></script>
	<style type="text/css">
		#container{width: 800px;height: 600px;margin:20px auto;}
		.BMap_bubble_title{font-weight: 900;}
	</style>
 </head>
 <body>
	 <input type="text" onblur="blurHd(this.value)">
 	<div id="container">
 		
 	</div>
	<script>
		// 初始化地图
		var map = new BMap.Map("container");
		// 创建一个点
		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());   // 地图类型
		// 创建一个自定义标注
		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);
		 
		 // 目标：添加一个圆圈
		 var circle = new BMap.Circle(
		 point,//圆圈中心点
		 500,//半径
		 {strokeColor:"blue",strokeWeight:2,fillOpacity:0.4}
		 );
		 map.addOverlay(circle);
		 // 添加圆形到地图中
		 
		 // 目标：地图添加事件
		 map.addEventListener("click",e=>{
			 console.log(e.point,e);
		 })
		 
		 // 目标2 多边形
		 var polygon = new BMap.Polygon([
			 new BMap.Point(113.66472152529185,34.78609747393126),
			 new BMap.Point(113.66772186569519,34.78603076963989),
			 new BMap.Point(113.66766796736458,34.782999372726685),
			 new BMap.Point(113.66178406627422,34.78423714494914),
			 new BMap.Point(113.66473949140206,34.78453361455538),
			 new BMap.Point(113.66472152529185,34.78609747393126)
		 ],
		 {strokeColor:"orange",strokeWeight:2,fillColor:"blue",fillOpacity:0.3}
		 );
		  map.addOverlay(polygon);
		// 目标：添加信息窗口（文字信息）
		var marker = new BMap.Marker(point);
		map.addOverlay(marker);
		var info = new BMap.InfoWindow(
		`<div class="info"><p>一入前端深似海，我学web前端，我快乐！！！</p><p>永远相信明天会更美好</p>	</div>`,
		{title:"web前端大本营"}
		)
		// 定义弹出框
		marker.addEventListener("click",() => {
			map.openInfoWindow(info,point);
			// 单击点弹出窗口
		})
		map.openInfoWindow(info,point);
		// 打开弹出框（信息，点）
		
		let local = new BMap.LocalSearch(map,{
			renderOptions:{map:map}
		})
		// 创建一个本地搜索
		// 目标2： 添加地图搜索功能
		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);
			// 搜索路径
		})
		var driving = new BMap.DrivingRoute(map,{
			renderOptions:{map:map,autoViewport:true},
			 onSearchComplete: function(results){ 
			        if (driving.getStatus() == BMAP_STATUS_SUCCESS){ 
			            // 获取第一条方案 
			            var plan = results.getPlan(0); 
			            // 获取方案的驾车线路 
			            var route = plan.getRoute(0); 
			            // 获取每个关键步骤，并输出到页面 
			            var s = []; 
			            for (var i = 0; i < route.getNumSteps(); i ++) { 
			                var step = route.getStep(i); 
			                console.log(step); 
			            } 
			        } 
			    } 
		});
		
		 
	</script>
	
 </body>
 </html>

潮有信

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
百度地图

百度地图一、初始化1、注册开发者账号2、导入百度地图script<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=你的ak"> 3、准备存放地图<body><div id="container"></div></body>4、创建地图var map = new BMap.Map("container");// 创建地图
复制链接

扫一扫