JS调用百度地图——添加基础控件

最新推荐文章于 2023-06-09 11:11:23 发布

前端_小智

最新推荐文章于 2023-06-09 11:11:23 发布

阅读量1.6k

点赞数 2

分类专栏：百度地图API

本文链接：https://blog.csdn.net/weixin_43445778/article/details/105481424

版权

百度地图API 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

在大多数的地图应用里面，都添加了各种不同的控件与地图元素进行UI交互，在调用百度地图里面，也提供了非常多不同的控件。不仅可以使用官方提供的普通控件进行设置，而且还可以自己自定义一些控件。

JS调用百度地图添加控件

普通控件

在百度地图提供的API2.0中，提供了很多不同的控件类供开发者参考。包括基础的控制构造函数、控制锚，导航控件，NavigationControlType，地理位置控制，比例尺，版权、MapTypeControl、以及全景控制等等。
普通控件中基本上可以分为：抽象基类、平移缩放控件、缩略地图、比例尺、地图类型、版权、定位等7类空罕见。
注意：
添加控件都需要使用Map.addControl()方法向地图添加控件。

首先我们创建一个基础地图案例，地图经纬度以武汉市为中心点。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<!-- <meta name="viewport" content="initial-scale=1.0,user-scalable=no"> -->
	<style type="text/css">
		html{height: 100%;}
		body{height: 100%;margin: 0px;padding: 0px;}
		#container{height: 500px;width: 600px;}
	</style>
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=vpoqNl7X0i9741MmV4t6EeqotvIKlZbp"></script>
	<title>地图</title>
</head>
<body>
	<div id="container"></div>
	<script type="text/javascript">
		var map = new BMap.Map("container");
		var point = new BMap.Point(114.30,30.60);
		map.centerAndZoom(point,12);
		map.enableScrollWheelZoom(true);
		// 默认的鼠标滚轮缩放是关闭的
		map.enableScrollWheelZoom(true);
	</script>
</body>
</html>

添加好的基础地图效果如下：在这里插入图片描述

平移缩放控件

接下来，我们在地图中开始添加控件：
首先一个平移缩放控件NavigationControl

在代码里面插入代码

//平移缩放控件 PC默认位于地图左上方 移动端位于右下方
map.addControl(new BMap.NavigationControl());

接着我们看一下添加控件后的效果：
在这里插入图片描述
这是普通平移缩放控件的一个样式，另外还支持了平移缩放控件的设置不同的效果，改变控件外观，具体支持4种不同的样式风格：
1、默认情况下，显示完整版的控件：BMAP_NAVIGATION_CONTROL_LARGE
2、显示小型的平移缩放控件：BMAP_NAVIGATION_CONTROL_SMALL

var opts = {type: BMAP_NAVIGATION_CONTROL_SMALL}    
map.addControl(new BMap.NavigationControl(opts));

小型平移缩放的效果：
在这里插入图片描述
3、只显示控件的平移功能：BMAP_NAVIGATION_CONTROL_PAN

var opts = {type: BMAP_NAVIGATION_CONTROL_PAN}    
map.addControl(new BMap.NavigationControl(opts));

效果图：
在这里插入图片描述
4、只显示控件的缩放功能：BMAP_NAVIGATION_CONTROL_ZOOM

var opts = {type: BMAP_NAVIGATION_CONTROL_ZOOM}    
map.addControl(new BMap.NavigationControl(opts));

效果图：
在这里插入图片描述

缩略地图控件：

// 缩略地图
		map.addControl(new BMap.OverviewMapControl());

默认情况下，缩略地图是收缩起来的：
在这里插入图片描述
如上，左下角有一个收起来的小箭头，点击小箭头，缩放地图就显示出来了，如下图：

添加比例尺以及地图类型控件：

//比例尺
		map.addControl(new BMap.ScaleControl());
		// 地图类型
		map.addControl(new BMap.MapTypeControl());

效果如下：
比例尺：
在这里插入图片描述
将地图精度放大，比例尺进行变化：

地图类型支持地图、卫星、三位的不同地图展示：

点击切换卫星，地图变化：

自定义控件

第一步：需要定义一个控件的构造函数，还要继承Control,需要提供defaultAnchor和defaultOffset两个属性，用于API定位控件的位置

// 定义一个控件类，即function    
function ZoomControl(){    
    // 设置默认停靠位置和偏移量  
    this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT;    
    this.defaultOffset = new BMap.Size(10, 10);    
}    
// 通过JavaScript的prototype属性继承于BMap.Control   
ZoomControl.prototype = new BMap.Control();

第二：初始化控件:
设置自定义控件构造函数的prototype属性为Control的实例，以便继承控件基类。
当调用map.addControl()方法添加自定义控件时，API会调用该对象的initialize()方法用来初始化控件，您需要实现此方法并在其中创建控件所需的DOM元素，并添加DOM事件。所有自定义控件中的DOM元素最终都应该添加到地图容器（即地图所在的DOM元素）中去，地图容器可以通过map.getContainer()方法获得。最后initialize()方法需要返回控件容器的DOM元素。

 // 创建一个DOM元素   
    var div = document.createElement("div");    
    // 添加文字说明    
    div.appendChild(document.createTextNode("放大2级"));    
    // 设置样式    
    div.style.cursor = "pointer";    
    div.style.border = "1px solid gray";    
    div.style.backgroundColor = "white";    
    // 绑定事件，点击一次放大两级    
    div.onclick = function(e){  
        map.zoomTo(map.getZoom() + 2);    
    }    
    // 添加DOM元素到地图中   
    map.getContainer().appendChild(div);    
    // 将DOM元素返回  
    return div;    
 }

第三步：添加控件
添加自定义控件与添加其他控件方法一致，调用map.addControl()方法即可。

// 创建控件实例    
var myZoomCtrl = new ZoomControl();    
// 添加到地图当中    
map.addControl(myZoomCtrl);

效果图：
在这里插入图片描述
点击一次以后观察地图以及比例尺的变化：

地图进行了放大操作。

用JS调用百度地图的API还有很多其他的玩法，后面再接着更新！

前端_小智

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
JS调用百度地图——添加基础控件

在大多数的地图应用里面，都添加了各种不同的控件与地图元素进行UI交互，在调用百度地图里面，也提供了非常多不同的控件。不仅可以使用官方提供的普通控件进行设置，而且还可以自己自定义一些控件。JS调用百度地图添加控件平移缩放控件**缩略地图控件：**添加比例尺以及地图类型控件：自定义控件普通控件在百度地图提供的API2.0中，提供了很多不同的控件类供开发者参考。包括基础的控制构造函数、控制锚，导航...
复制链接

扫一扫

专栏目录