您当前的位置： JavaScript API > 开发指南 > 工具
工具 JavaScript API

地图工具概述

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

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

DistanceTool：测距工具。通过此工具用户可测量地图上任意位置之间的距离。

DrawingManager：鼠标绘制工具。通过此工具用户可以在地图任意位置上画点、画线、画面并显示线的距离及面的面积。

向地图添加工具

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

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 BMapLib.DistanceTool(map);

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

  1. <input type="button" value="开启" onclick="myDis.open()" />    
  2. <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 BMapLib.DragAndZoomTool(map, {    
 followText : "拖拽鼠标进行操作"    
});