百度地图的总结：

爱你孤身走安详

已于 2022-10-31 20:31:32 修改

阅读量321

点赞数 1

文章标签：前端 javascript html

于 2022-10-31 20:23:09 首次发布

本文链接：https://blog.csdn.net/linlinaitangtang/article/details/127622019

版权

初始化地图总结：

1.注册开发者账号

申请百度账号和ak

网址：https://mapopen-pub-jsapi.bj.bcebos.com/

2.设置容器样式：

3.引用百度地图API文件：

	<script src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=g2DVs4pVwq1DDviUCkXgMDK9ujPx9d5B

4.创建地图容器元素：

5.创建地图实例：

6.设置中心点坐标：

7. 设置中心点和缩放：以及鼠标滚轮缩放：

整体代码如下，以及实现结果：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#container {
				width: 800px;
				height: 600px;
			}
		</style>
	</head>
	<body>
		<!-- 准备容器 -->
		<div id="container">

		</div>
	</body>
	<script src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=g2DVs4pVwq1DDviUCkXgMDK9ujPx9d5B
"></script>
	<script>
		//初始化地图
		var map = new BMapGL.Map("container")
		//准备一个中心点（经度，维度）
		var point = new BMapGL.Point(116.404, 39.915);
		//设置中心点和缩放级别
		map.centerAndZoom(point, 15);
		//鼠标滚轮缩放
		map.enableScrollWheelZoom(true);
	</script>
</html>

二：地图的查找以及步骤：

1.找到百度地图：

3.申请百度账号和ak的步骤：

4.地图的实现：

三：覆盖：

1.向地图中心点添加了一个标注：

2.向地图添加自定义标注：

通过icon类可实现自定义标注的图标：

3.添加线：

var polyline = new BMap.Polyline([
		new BMap.Point(113.66500898305505,34.78592700730067),
		new BMap.Point(113.66468559307145,34.78152439811886),
		new BMap.Point(113.66853034065416,34.78374796774793),
	], {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5});
map.addOverlay(polyline);

4.添加多边形：

//创建多边形
			var polyline = new BMapGL.Polyline(line,{fillColor:"red",strokeColor:"green", strokeWeight:2, strokeOpacity:0.5});
            map.addOverlay(polyline);

5.添加事件：

	map.addEventListener("dblclick",e=>{
			//把第0个点放入到最后面
			line.push(line[0]);
			//创建多边形
			var polyline = new BMapGL.Polyline(line,{fillColor:"red",strokeColor:"green", strokeWeight:2, strokeOpacity:0.5});
            map.addOverlay(polyline);
			//添加线
			map.addOverlay(polyline);
			//清空点的列表
			line=[];
			//清空点
			markers.forEach(item=>map.removeOverlay(item));
			//清空点
			markers = [];
		})

四：信息窗口：

1.创建信息窗口：

var info = new BMap.InfoWindow(
	 `<div class="info">
		 <p>河南加油</p>
	 </div>`,
	 {title:'web前端大本营'}
)

var infoWindow = new BMap.InfoWindow("内容", 标题);  // 创建信息窗口对象

2.显示信息窗口：

   map.openInfoWindow(infoWindow, map.getCenter());

代码：


<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        #container {
            width: 800px;
            height: 600px;
        }
    </style>
</head>

<body>
    <!-- 准备容器 -->
    <div id="container">

    </div>
</body>
<script type="text/javascript"
    src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=SQ8IFnxBIsbI4eMINne8GZtzK6pBKOMf">
    </script>
<script>
    //初始化地图
    var map = new BMapGL.Map("container")
    //准备一个中心点（经度，维度）
    var point = new BMapGL.Point(113.665, 34.784);
    //设置中心点和缩放级别
    map.centerAndZoom(point, 15);
    //鼠标滚轮缩放
    map.enableScrollWheelZoom(true);

    // 添加一个点
    var marker = new BMapGL.Marker(point);
    // 添加覆盖物
    map.addOverlay(marker);
    var opts = {
        width: 160,     // 信息窗口宽度
        height: 260,    // 信息窗口高度
        title: "Hello"  // 信息窗口标题
    }
    var infoWindow = new BMapGL.InfoWindow(`<img src='https://img1.baidu.com/it/u=584854195,2698634373&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800' width='180',height='180'>`, opts);  // 创建信息窗口对象
    map.openInfoWindow(infoWindow, map.getCenter());        // 打开信息窗口

    marker.addEventListener("click", e => {
        //单击显示
        map.openInfoWindow(infoWindow, point)
    })


</script>
<ml>

运行：

五：搜索：

1.创建搜索：

 var local = new BMapGL.LocalSearch(map, {
        renderOptions: { map: map }
    });

2.搜索关键字：

local.search(关键字)

代码：



<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        #container {
            width: 800px;
            height: 600px;
        }
    </style>
</head>

<body>
    <input type="" onchange="search(this)" />
    <!-- 准备容器 -->
    <div id="container">

    </div>
</body>
<script type="text/javascript"
    src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=SQ8IFnxBIsbI4eMINne8GZtzK6pBKOMf">
    </script>
<script>
    //初始化地图
    var map = new BMapGL.Map("container")
    //准备一个中心点（经度，维度）
    var point = new BMapGL.Point(113.665, 34.784);
    //设置中心点和缩放级别
    map.centerAndZoom(point, 15);
    //鼠标滚轮缩放
    map.enableScrollWheelZoom(true);

    // 添加一个点
    var marker = new BMapGL.Marker(point);
    // 添加覆盖物
    map.addOverlay(marker);

    var local = new BMapGL.LocalSearch(map, {
        renderOptions: { map: map }
    });
    function search(e) {
        local.search(e.value)
    }


</script>
<ml>

运行：