百度地图JavaScript API 学习之添加控件

最新推荐文章于 2023-08-16 08:51:00 发布

置顶 monkeyfly007

最新推荐文章于 2023-08-16 08:51:00 发布

阅读量776

点赞数

分类专栏：百度地图API 文章标签：百度地图JS API之添加控件

本文链接：https://blog.csdn.net/tel13259437538/article/details/79874412

版权

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

10 篇文章 1 订阅

订阅专栏

创建地图之添加控件

官方demo示例和讲解——直戳这里

这个案例就比较简单了，只需要在地图展示的基础上，添加一些与地图控件相关的代码就行了。

说明：
1.可以使用Map.addControl()方法向地图添加控件。
2.提供的控件：详情可见类参考。——直戳这里

控件	类名	简介
抽象基类	`Control`	所有控件均继承此类的方法、属性。通过此类您可实现自定义控件
平移缩放控件	`NavigationControl`	PC端默认位于地图左上方，它包含控制地图的平移和缩放的功能。移动端提供缩放控件，默认位于地图右下方
缩略地图	`OverviewMapControl`	默认位于地图右下方，是一个可折叠的缩略地图
比例尺	`ScaleControl`	默认位于地图左下方，显示地图的比例关系
地图类型	`MapTypeControl`	默认位于地图右上方
版权	`CopyrightControl`	默认位于地图左下方
定位	`GeolocationControl`	针对移动端开发，默认位于地图左下方

步骤

地图初始化
添加一个或多个控件

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1.0,user-scalable=no">
    <title>添加控件</title>
    <style>
        html{
            height: 100%;
        }
        body{
            height: 100%;
            padding: 0;
            margin: 0;
        }
        #container{
            width: 100%;
            height: 100%;
            font-family: "微软雅黑";
            margin:0;
            overflow:hidden;
        }
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=3ecea51f560650b1ed8a4b99808f52e8"></script>
</head>
<body>
    <div id="container"></div>
    <script>
        //BMap是一个命名空间，所有的类都在该命名空间之下。
        //该命名空间下的Map类表示地图。
        //1.通过new操作符可以创建一个地图实例。
        var map = new BMap.Map("container");
        //2.该命名空间下的Point类来创建一个坐标点。
        var point = new BMap.Point(116.331398,39.897445);
        //3.执行地图初始化。地图只有经过初始化才能执行其他操作
        map.centerAndZoom(point,12);

        //4.开启鼠标滚轮缩放（默认关闭）
        map.enableScrollWheelZoom(true);

        //5.向地图添加控件（添加控件前，地图需要进行初始化。）
        //可以使用Map.addControl()方法向地图添加控件。
        map.addControl(new BMap.NavigationControl());//平移缩放控件（PC端默认位于地图左上方）
        //添加多个控件
        map.addControl(new BMap.ScaleControl());//比例尺控件（默认位于地图左下方，显示地图的比例关系）
        map.addControl(new BMap.OverviewMapControl());//缩略地图控件（默认位于地图右下方，是一个可折叠的缩略地图）
        map.addControl(new BMap.MapTypeControl());//地图类型控件（默认位于地图右上方）

    </script>
</body>
</html>