百度地图新手教程7（转载自百度）

来源：互联网发布：mud文字游戏制作软件编辑：程序博客网时间：2024/06/02 07:31

工具

1.地图工具概述
2.向地图添加工具
3.通过按钮控制工具的开启和关闭
4.拉框放大工具

地图工具概述

提示：工具已经制作成开源库（lib）对外免费开放，可直接访问JavaScript 开源库。若您需要运行以下示例代码，请先确认已在开发工程中引入lib文件，具体引用方法可查看JavaScript 开源库提供的示例源文件。

百度地图提供了交互功能更为复杂的“工具”，它包括：

MarkerTool：标注工具。通过此工具用户可在地图任意区域添加标注。
MarkerClusterer：多标注聚合器。此工具解决加载大量点要素到地图上造成缓慢，且产生覆盖现象的问题。
MarkerManager：标注管理工具。此工具提供展示、隐藏、清除所有标注。
RichMarker：富标注工具。此工具为用户提供自定义Marker样式，并添加点击、双击、拖拽等事件。
DistanceTool：测距工具。通过此工具用户可测量地图上任意位置之间的距离。
RectangleZoom：区域缩放工具。此工具将根据用户拖拽绘制的矩形区域大小对地图进行放大或缩小操作。
MapWrapper：地图搬家工具。此工具提供了将Google或GPS坐标形式的Marker添加到百度地图上的功能。
InfoBox：自定义信息窗口工具。类似于infoWindow，比infoWindow更有灵活性，比如可以定制border，关闭按钮样式等。
LuShu：路书，轨迹运动工具。此工具用以实现marker沿路线运动，并有暂停等功能。
CityList：城市列表工具。此工具为用户直接生成城市列表，并且自带选择城市操作。
AreaRestriction：区域限制工具。此工具为用户提供百度地图浏览区域限制设置。
GeoUtils：几何运算工具。此工具提供判断点与矩形、圆形、多边形线、多边形面的关系,并提供计算折线长度和多边形的面积的公式。
TrafficControl：实时交通控件。此工具提供将交通流量图层在地图上的实时显示，隐藏等。
SearchControl：检索控件。此工具针对移动端，提供城市列表选择、本地检索框、公交驾车查询框。并提供相应功能。

工具类在初始化时需要提供地图实例参数，以便使工具在该地图上生效。您可以在地图上添加多个工具，但同一时刻只能有一个工具处于开启状态。标注工具和测距工具在完成一次操作后将自动退出开启状态，而区域缩放工具可以自行配置是否自动关闭。

向地图添加工具

在地图正确初始化后，您可以创建工具实例。下面示例展示了如何向地图添加一个标注工具。

var map = new BMap.Map("container");  map.centerAndZoom(new BMap.Point(116.404, 39.915), 15);  var myPushpin = new BMap.PushpinTool(map);          // 创建标注工具实例  myPushpin.addEventListener("markend", function(e){  // 监听事件，提示标注点坐标信息   alert("您标注的位置：" +          e.marker.getPoint().lng + ", " +          e.marker.getPoint().lat);  });  myPushpin.open();                                   // 开启标注工具

通过按钮控制工具的开启和关闭

工具类没有提供控制其开启和关闭的UI元素。您可以根据需要自己创建这些元素，把它们放置在地图区域内或者区域外均可。调用工具类的open和close可控制工具的开启和关闭。

首先初始化地图并创建一个测距工具实例：

var map = new BMap.Map("container");  map.centerAndZoom(new BMap.Point(116.404, 39.915), 15);  var myDis = new BMap.DistanceTool(map);

接着我们创建两个按钮元素并为其添加点击事件。

<input type="button" value="开启" onclick="myDis.open()" />  <input type="button" value="关闭" onclick="myDis.close()" />

拉框放大工具

一些工具类提供了可修改的配置参数，您可参考API文档来修改它们以便符合您的要求。

本示例为区域缩放工具添加提示文字。

var map = new BMap.Map("container");  map.centerAndZoom(new BMap.Point(116.404, 39.915), 15);  var myDrag = new BMap.DragAndZoomTool(map, {   followText : "拖拽鼠标进行操作"  });