百度地图api使用

Posted 2020-09-27 方小川

1.入门程序

（1）引入baidu地图的javascrpt文件（http路径访问百度地图api官网）

<script src="http://api.map.baidu.com/api?v=1.5&ak=密钥" type="text/javascript"></script>

（2）编写html代码（百度地图会根据id设定div中的内容）：

<div id=" myMap " style="width:500px;height:320px"></div>

（3）调用api初始化地图

//根据div的id= map的map构建地图内存对象。

//BMap是百度地图类，封装了显示百度地图的方法和属性，参数为容器所对应的id

var map = new BMap.Map("myMap");

map.enableScrollWheelZoom();//启用滚轮放大缩小

缩放等级介绍图:

缩放等级介绍图

（4）构建在地图上要显示的区域中心点位置121.491, 31.233可以理解为横坐标和纵坐标，即经度纬度

var point = new BMap.Point(121.491, 31.233);
// 显示地图，并设定地图等级
map.centerAndZoom(point, 3); //缩放等级

2.控件：

百度地图上负责与地图交互的UI元素称为控件。百度地图API中提供了丰富的控件，您还可以通过Control类来实现自定义控件。

a.地图API中提供的控件：

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

b.引入控件：

var map = new BMap.Map("container");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
map.addControl(new BMap.NavigationControl());

可以向地图添加多个控件。在本例中我们向地图添加一个平移缩放控件、一个比例尺控件和一个缩略图控件。在地图中添加控件后，它们即刻生效。

map.addControl(new BMap.NavigationControl());
map.addControl(new BMap.ScaleControl());
map.addControl(new BMap.OverviewMapControl());

c.删除控件：

删除控件:map.removeControl(control);

d.修改控件：

构造函数	描述
setAnchor(anchor:enum ControlAnchor)	设置控件停靠的位置
getAnchor	返回控件停靠的位置

其中setAnchor()方法的anchor允许的值为：

1. BMAP_ANCHOR_TOP_LEFT表示控件定位于地图的左上角。
2. BMAP_ANCHOR_TOP_RIGHT表示控件定位于地图的右上角。
3. BMAP_ANCHOR_BOTTOM_LEFT表示控件定位于地图的左下角。
4. BMAP_ANCHOR_BOTTOM_RIGHT表示控件定位于地图的右下角。

3.覆盖物：

a.简介

覆盖物：所有叠加或覆盖到地图的内容，我们统称为地图覆盖物。如标注、矢量图形元素(包括：折线和多边形和圆)、信息窗口等。覆盖物拥有自己的地理坐标，当您拖动或缩放地图时，它们会相应的移动。

地图API提供了如下几种覆盖物：

• Overlay：覆盖物的抽象基类，所有的覆盖物均继承此类的方法。
• Marker：标注表示地图上的点，可自定义标注的图标。
• Label：表示地图上的文本标注，您可以自定义标注的文本内容。
• Polyline：表示地图上的折线。
• Polygon：表示地图上的多边形。多边形类似于闭合的折线，另外您也可以为其添加填充颜色。
• Circle:表示地图上的圆。
• InfoWindow：信息窗口也是一种特殊的覆盖物，它可以展示更为丰富的文字和多媒体信息。
• 标注：标注表示地图上的点。API提供了默认图标样式

b.创建标注

var map = new BMap.Map(“map");
var point = new BMap.Point(116.404,39.915);
map.centerAndZoom(point, 15);
var marker = new BMap.Marker(point); //创建标注
map.addOverlay(marker); //将标注添加到地图中

c.注册事件

marker.addEventListener("click",function(){
    alert("点击事件");
});

d.可拖拽标注

marker.enableDragging();
marker.addEventListener("dragend",function(e){
    alert("当前位置：" +e.point.lng + ", " + e.point.lat);
})

e.删除标注（删除其他覆盖物调用同样的方法）

map.removeOverlay(marker);

f.信息窗口：

信息窗口在地图上方的浮动显示HTML内容。信息窗口可直接在地图上的任意位置打开，也可以在标注对象上打开（此时信息窗口的坐标与标注的坐标一致）。您可以使用InfoWindow来创建一个信息窗实例，注意同一时刻地图上只能有一个信息窗口处于打开状态

打开窗口：

var opts = {
    width: 250, //信息窗口宽度
    height:100, //信息窗口高度
    title: "Hello" //信息窗口标题
}
var infoWindow = new BMap.InfoWindow("<input type = ‘button‘ value=‘按钮‘>", opts); //创建信息窗口对象
map.openInfoWindow(infoWindow, map.getCenter()); //打开信息窗口

g.隐藏与显示

marker.hide(); // 隐藏覆盖物
Marker.show(); // 显示覆盖