距离测试工具（接口）

很多基于地图的管理工具、平台，常有用鼠标在图中点击画线测量距离的需求，现 JavascriptAPI GL 已为您提供：
1.支持接口方式调用，可与您的平台无缝结合；
2.支持多段测量方式。

图示：

查看示例

加载距离测量工具 API 该工具是以 Javascript API GL 的附加库的形式加载，请确保：
引入时须传入&libraries=tools 参数（查看：Javascript API GL 加载参数说明）

<script src='https://map.qq.com/api/gljs?v=1.exp&key=YOUR_KEY&libraries=tools'></script>

示例（html 部分）：
界面中放置一个按钮，点击解发 onclick 事件，调用 measure()开始绘图
（示例代码为了尽量完整，实际应用中使用什么方法触发测量取决于您对产品的定义）

<button onclick="measure()" id="measure" class="inactive">点击这里开始测量</button>

示例（Javascript）：

var map, measureTool;
function initMap() {
  // 初始化地图
  map = new TMap.Map('container', {
    zoom: 12, // 设置地图缩放级别
    center: new TMap.LatLng(39.984104, 116.307503), // 设置地图中心点坐标
  });
  // 创建测量工具
  measureTool = new TMap.tools.MeasureTool({
    map: map,
  });
}
function measure() {
  document.getElementById('measure').innerText = '点击这里测量结束';
  measureTool.measureDistance().then((res) => {
    //测量结束，将结果显示到页中
    alert('测量结果为：' + res.totalDistance + '米');
    document.getElementById('measure').innerText = '点击这里开始测量';
  });
}

查看示例

面积测量工具

多边形面积测量工具。该工具是以 Javascript API GL 的附加库的形式加载，请确保：
引入时须传入&libraries=tools 参数（查看：Javascript API GL 加载参数说明）

示例（html 部分）：

<button onclick='measure()' id='area'>
  点击这里开始面积测量
</button>

示例（Javascript）：

var map, measureTool;
function initMap() {
  // 初始化地图
  map = new TMap.Map('container', {
    zoom: 12, // 设置地图缩放级别
    center: new TMap.LatLng(39.984104, 116.307503), // 设置地图中心点坐标
  });
  // 创建测量工具
  measureTool = new TMap.tools.MeasureTool({
    map: map,
  });
}
function measure() {
  document.getElementById('area').innerText = '点击这里测量结束';
  measureTool.measureArea().then((res) => {
    //测量结束，结果将显示在地图中
    document.getElementById('area').innerText = '点击这里开始测量';
  });
}

查看示例