百度地图api基本用法

绝地灬酷狼 2022-03-19 06:29 432阅读 0赞

**(学习留存，如有侵权，请告知，立刻删除！)**

**首先 ，如果想调用百度地图api，你需要获取一个百度地图api的密钥。**

申请密钥很简单，在百度地图api的首页就有相关链接，填写相关信息百度就会给你一个密钥了。

接下来，就是引入百度地图的api

关键代码如下：

接下来我们就可以创建一个地图试试看了。（Js代码）

var map = new BMap.Map("container");          // 创建地图实例
    var point = new BMap.Point(120.391655,36.067588);  // 创建点坐标
    map.centerAndZoom(point, 15);
    //map.centerAndZoom("北京", 15);
    //map.centerAndZoom("Hongkong", 15);

这里需要说明三点:

**1.map.centerAndZoom方法创建地图，第一个参数可以是根据之前创建好的一个点为中心，创建出地图，也可以根据城市地区的中文名称创建地图。（如果拼写正确，可以根据城市的英文名称来创建）**

**2.map.centerAndZoom第二个参数是地图缩放级别，最大为19，最小为0。（但实际当缩小到3的时候就已经。。。）**

![021428493299472.png][]![021428597209463.png][]

**3.BMap.Map方法创建地图时候需要一个容器(地图会根据容器的大小自动进行调整。)，填写相关容器的id。**

关于地图大小：

可以通过map.setZoom();方法主动控制地图大小级别。

也可以通过设置map.enableScrollWheelZoom(true);利用鼠标滚轮控制大小。

百度地图提供了非常丰富的功能空间共我们使用。

**1.Control：控件的抽象基类，所有控件均继承此类的方法、属性。通过此类您可实现自定义控件。**

**2.NavigationControl：地图平移缩放控件，PC端默认位于地图左上方，它包含控制地图的平移和缩放的功能。移动端提供缩放控件，默认位于地图右下方。**

**3.OverviewMapControl：缩略地图控件，默认位于地图右下方，是一个可折叠的缩略地图。**

**4.ScaleControl：比例尺控件，默认位于地图左下方，显示地图的比例关系。**

**5.MapTypeControl：地图类型控件，默认位于地图右上方(地图，卫星，三维)。**

**6.CopyrightControl：版权控件，默认位于地图左下方。**

**7.GeolocationControl：定位控件，针对移动端开发，默认位于地图左下方。**

效果图

![021448120646550.png][]

map.addControl(new BMap.NavigationControl());//缩放平移控件
    map.addControl(new BMap.ScaleControl());    //比例尺
    map.addControl(new BMap.OverviewMapControl());//缩略图
    map.addControl(new BMap.MapTypeControl()); //地图类型
    map.setCurrentCity("青岛");

注意：当设置城市信息时，MapTypeControl的切换功能才能可用
    
    
    地图事件：

百度地图API中的大部分对象都含有addEventListener方法，我们可以通过该方法来监听对象事件。

实例：

map.addEventListener("click", function(){    
     alert("您点击了地图。");    
    });

当我们不再希望监听事件时，可以将事件监听进行移除。每个API对象提供了removeEventListener用来移除事件监听函数。

map.removeEventListener("click", functionA);
    map.addEventListener("click", functionA);

地图遮盖物:

**Overlay：覆盖物的抽象基类，所有的覆盖物均继承此类的方法。**

**Marker：标注表示地图上的点，可自定义标注的图标。**

**Label：表示地图上的文本标注，您可以自定义标注的文本内容。**

**Polyline：表示地图上的折线。**

**Polygon：表示地图上的多边形。多边形类似于闭合的折线，另外您也可以为其添加填充颜色。**

**Circle: 表示地图上的圆。**

**InfoWindow：信息窗口也是一种特殊的覆盖物，它可以展示更为丰富的文字和多媒体信息。注意：同一时刻只能有一个信息窗口在地图上打开。**

标注示例：

![021523144237302.png][]

[021428493299472.png]: https://images0.cnblogs.com/blog2015/738809/201508/021428493299472.png
[021428597209463.png]: /images/20220319/e59a87aab46f4e1290c924aa03487fff.png
[021448120646550.png]: /images/20220319/e836efc464ae486594c1b84ab8a3247e.png
[021523144237302.png]: /images/20220319/5f3a2af148db4157bad3c0e15e7cd024.png