多地点，一API：使用TomTom地图SDK显示多个地点

TomTom地图SDK支持在Web应用、iOS和Android上进行基于位置的应用开发。它提供了对TomTom收集的数百万数据点的便捷访问，为Web应用提供地图功能、位置搜索等，并与基于Web和原生移动应用平台兼容。

本文将通过探索TomTom地图SDK API调用的几种方式，来实现在地图上同时显示多个实体位置的功能。本文还将演示如何通过利用应用开发门户上提供的额外功能和API调用来最大程度地增强地图使用。它还解释了自定义地图矢量样式和功能的过程，以便您可以开始构建基于位置的应用。

入门

作为开发者，注册使用TomTom API和SDK既免费又简单。只需访问TomTom开发者网站，然后点击页面右上角的链接进行注册。开发者控制面板允许创建新的应用程序和API密钥，并且可以一次创建多个应用程序。

只需添加应用程序并请求访问地图API产品，TomTom就会提供一个非过期API密钥，用于地图API，并提供每天2,500次免费API事务以支持应用程序。（请注意，如果每天2,500次API事务不够，可以通过访问开发者控制面板中的“我的积分”屏幕购买更多事务。）

下载地图SDK

TomTom地图SDK可在TomTom开发者门户免费下载。解压并将其保存到项目文件夹中。

显示地图

为了让我们熟悉地图SDK，让我们从一个简单的功能开始：在应用程序中显示地图，而不将地图的焦点放在特定位置。下面是实现此功能的代码（请注意，您首先需要在开发者门户上创建应用程序，因为将需要创建的API密钥）。

var map = tomtom.L.map('map', {

    key: '<your-api-key>',

    basePath: '<your-tomtom-sdk-base-path>',

     });

如下图所示，脚本指向下载的SDK的路径。

每张地图都应该聚焦于一个特定的点，以增加地图的上下文。对于本例，坐标HQ被放置在地图上。

地理坐标可以作为纬度和经度数组添加。还包含了一个缩放级别为15的选项。这是一个示例

var HQ= [9.0548, 7.4856];
var map = tomtom.L.map('map', {
    	key: '<your-api-key>',
    	basePath: '<your-tomtom-sdk-base-path>',
    	center: HQ
    	zoom: 15
	});

在地图上添加标记

标记用于指示地图上特定坐标的位置。TomTom提供了一个简单的API，使开发者能够向地图添加属性。标记还有助于在弹出窗口中提供更详细的点信息

   var Hqmarker = tomtom.L.marker(HQ).addTo(map);
   Hqmarker.bindPopup("COMPANY HQ").openPopup();

重复相同的过程，可以向地图添加多个位置，如下图所示。

继续这个过程，您可以添加更多的点。

获取重要详情

位置和地理坐标

TomTom 提供了一个 API 来获取任何位置的地理坐标。获取这些坐标最简单的方法是通过 TomTom 的 api_explorer。模糊搜索 API 部分帮助使用通用地址检索位置坐标。

取示例地址2311 North Los Robles Avenue, Pasadena, California, USA并将其放入查询字段；执行此查询时，清除其他预填充字段。响应数据将返回以下格式的坐标。

<position>
    <lat>37.36729</lat>
    <lon>-121.91595</lon>
</position>

请注意，您不应在任何地址中使用特殊的 HTML 字符（如 '$'、'?'、'&'、'#'）。

一次加载多个坐标

在生产环境中，每次向地图添加新位置时都编写一行新代码是不切实际的。坐标可以在循环中添加并添加到地图中。

var companyAssets = [ [ 52.373627, 4.902642 ], [ 52.3659, 4.927198 ], [ 52.347878, 4.893488 ], [ 52.349447, 4.858433 ] ];
companyAssets.forEach(function (child) {
     tomtom.L.marker(child).addTo(map);
     });

深色地图显示

默认地图提供浅色和深色两种样式。您可以通过在地图初始化时使用“style”来切换不同的样式，例如：

     var map = tomtom.L.map('map', {
           . . .
           center :HQ,
           style: 'night',
. . .
           });

地图样式设置

TomTom 矢量地图的属性，例如填充颜色、线条样式、粗细等，都定义在一个可编辑的 JSON 文件中。（所需的文件可以在此处下载。）有关可用属性规范的更详细文档可以在此处找到。与手动编辑相比，使用Maputnik 编辑器（一个可视化地图设计器）生成样式是一种更简单的方法。

矢量地图由瓦片和模式组成；瓦片用于提供地图上的数据，模式决定数据的结构。客户端使用样式（例如，颜色和2D区域、道路、海洋等功能）来决定如何向最终用户呈现这些数据。

使用Maputnik编辑器，开发人员可以自定义和查看地图功能。（例如，您可以将海洋背景改为红色而不是传统的蓝色。）

开始定制地图

要开始创建自定义样式，您可以在此处下载基本主样式。您将需要添加您的TomTom API密钥。

第一步是上传包含样式定义的文件到 Maputnik。点击“打开”按钮。（在初始阶段添加您的 API 密钥可以帮助跳过一些手动过程。）

上图显示了一张自定义地图，其中水背景已更改为黑色。

Maputnik 编辑器的左侧显示了地图的特征图层以及适用的自定义设置。您还将看到可以自定义的属性。右侧显示了更改的实时预览。

在任何时候，都可以从编辑器导出新定制的样式并进行测试。

您可以在此处测试样式。上传修改后的样式（点击“选择文件”按钮）并查看结果。

整合所有功能：真实世界地图示例

在生产环境中，可以创建一个 API 端点，用于返回公司拥有的所有资产并打算在地图上渲染的坐标列表。

   var AbujaZone = [
  {Address:"HQ",Coordinate: [9.0548, 7.4856]},
 	{Address:"SUB HQ",Coordinate: [9.0600, 7.4899 ]},
 	{Address:"ABUJA A",Coordinate: [9.0509, 7.4931 ]},
 	{Address:"ABUJA B",Coordinate: [9.046, 7.4873 ]}
    	   {Address:"ABUJA C", Coordinate: [9.0530, 7.4793 ]}
    	   {Address:"NEW CONSTRUCTION",Coordinate:[9.0650, 7.4924 ]},
 	{Address:"ABUJA E", Coordinate: [9.0650, 7.4734 ]}
]

返回的每个实体都是一个包含地址和坐标的对象。根据项目需求，可以返回更详细的对象，例如机器或资产的状态、开放时间等。

  AbujaZone.forEach(function (child) {
 tomtom.L.marker(child.Coordinate)
.addTo(map)
.bindPopup(child.Address)
 	});

截图中所示的项目在两个不同的位置之间切换：拉各斯和阿布贾区。要为每个位置指定标记图标，请将图标选项（下方突出显示）添加到函数中。

LagosZone.forEach(function (child) {
       	 	   tomtom.L.marker(child.Coordinate, {
 	  	        icon: child.iconPath
       	        }).addTo(map)
  .bindPopup(child.Address)
        	});

摘要

本文探讨了向地图添加多个位置并自定义地图视图的方法，并研究了标记和矢量地图功能显示的使用。TomTom官方文档提供了可用功能和选项的完整列表。

TomTom API 提供了一个完整的基于位置的工具箱，包含大量功能，可用于构建功能齐全的基于位置的应用程序，其中包括：

• 交通 API：交通信息可以通过交通 API 以不同的样式和形式显示。交通流量或交通事件信息可以叠加在 TomTom 地图上，以可视化拥堵程度、交通堵塞、道路施工、道路封闭等。
• 地图 API：地图 API 支持在任何移动和/或网络应用程序中显示静态和交互式地图。TomTom 实时地图制作技术为用户提供最准确和最新的地图。
• 路径规划 API：路径规划 API 支持从 A 到 B 的路径规划，同时考虑历史和实时交通状况。因此，应用程序可以为用户提供高度准确的旅行时间以及针对多种交通方式（如汽车、卡车、自行车和行人）的实时更新旅行信息和路线指示。
• 搜索 API：搜索 API 能够进行地理编码并搜索地址或地点。通过使用模糊匹配算法和自动补全功能，搜索 API 提供了一个出色的查询界面，可直接与终端用户交互。

无论您正在开发类似于 Uber、Google Maps、Yelp、FourSquare 或 Pokemon Go 的基于 GPS 数据的企业级移动应用程序，还是在约会、天气、社交媒体、增强现实或健身类别中的新应用程序，这都可能是一套非常有用的工具。