如何在10分钟内轻松将地图添加到您的网站
许多现代网络平台都利用地图和基于位置的功能为用户提供服务。Uber 和 Airbnb 就是一些知名的例子。
借助TomTom Maps SDK，在您的网站上添加地图从未如此简单。该工具包可让您访问各种地图功能，包括街道地图、实时路况、模糊搜索和路线规划，方便旅行者使用。
作为开发者，您可以利用TomTom 的 API 方法在您的 Web 或移动应用程序中构建和自定义地图。
让我们一起来看看如何使用 TomTom Maps SDK 将地图添加到您的网站。最后，我会提供该项目的源代码链接供您参考。
入门
使用 TomTom Maps SDK 既简单又免费。首先，您需要注册一个 TomTom 开发者账号以获取 API 密钥。该密钥使您能够访问 TomTom 的服务，登录后会在您的控制面板中自动生成。
要将 SDK 集成到您的应用程序中，您有三种选择；您可以使用 CDN 链接、下载 ZIP 文件或安装 npm 包。
最简便的途径是通过 CDN。以下是 CDN 文件链接：
<link rel='stylesheet' type='text/css' href='https://api.tomtom.com/maps-sdk-for-web/cdn/6.x/6.15.0/maps/maps.css'>
<script src="https://api.tomtom.com/maps-sdk-for-web/cdn/6.x/6.15.0/maps/maps-web.min.js"></script>
<script src="https://api.tomtom.com/maps-sdk-for-web/cdn/6.x/6.15.0/services/services-web.min.js"></script>
要添加它们，你只需要将这些链接粘贴到你的 html 文件中即可。
添加地图
让我们在网站上添加地图吧。
创建网站的 html 文件，粘贴上面的 CDN 链接，然后创建一个 div 元素作为地图的包装器：
<!-- html -->
<body>
<div id="mapArea"></div>
<!-- scripts -->
</body>
或许可以稍微修饰一下？
<style>
#mapArea {
height: 70vh;
width: 50vw;
margin: 0 auto;
}
</style>
然后通过调用 `map` 方法来创建地图实例tt.map，它是 windows 对象的一部分：
const APIKey = '<your-api-key>'
var Lagos = { lat: 6.5244, lng: 3.3792 }
var map = tt.map({
key: APIKey,
container: 'mapArea',
center: Lagos,
zoom: 15
})
我们向该方法传递了一个选项对象，其中包含以下属性：
- key：您的应用的 API 密钥，可从开发者控制面板获取。
- container：我们要将地图插入的div元素。
- 中心：我们地图的焦点。
- 缩放：地图的缩放级别。
你的地图应该看起来像这样：
省略中心和缩放属性将生成一幅抽象的世界地图：
在地图上添加标记
地图上的标记点是特定的参考点。您可以通过调用Marker()TomTom 地图 API 中的函数轻松添加标记点。
现在让我们在地图上添加一个标记：
var bus_stop = { lat: 6.4434, lng: 3.3553 }
var marker = new tt.Marker().setLngLat(bus_stop).addTo(map);
var popup = new tt.Popup({ anchor: 'top' }).setText('Bus Stop')
marker.setPopup(popup).togglePopup()
我们将在地图上插入一个标记：
如果您有多个位置信息（可能是通过 API 获取的），您可以使用 JavaScript 循环递归地插入它们：
var sites = [
{ lat: 6.4434, lng: 3.3553 },
{ lat: 6.4442, lng: 3.3561 },
{ lat: 6.4451, lng: 3.3573 },
{ lat: 6.4459, lng: 3.3520 }
];
sites.forEach(function (site) {
var marker = new tt.Marker().setLngLat(site).addTo(map);
var popup = new tt.Popup({ anchor: 'top' }).setText('Site')
marker.setPopup(popup).togglePopup()
});
调用APIPopup方法为标记实例化一个新的弹出窗口，并添加自定义文本。创建实例后，我们通过调用该setPopup方法将弹出窗口设置到标记上。
执行模糊搜索
有些情况下，您可能希望在地图上显示某个位置的通用地址，而不是确切的坐标。
TomTom Maps SDK 还提供了一个用于执行模糊搜索的 API。该fuzzySearch函数调用将返回与原始地址对应的坐标列表。
首先，让我们在应用程序中添加一个用于输入位置信息的文本输入框：
<div>
<input type="text" id="query" placeholder="Type a location">
<button onclick="fetchLoc()">Submit</button>
</div>
<div id="mapArea"></div>
通过输入，我们可以收集用户的查询地址，然后我们可以使用该地址执行模糊搜索。
点击提交按钮时会调用此函数：
async function fetchLoc() {
const response = await tt.services.fuzzySearch({
key: APIKey,
query: document.querySelector('#query').value,
})
if(response.results) {
moveMapTo(response.results[0].position)
}
}
在这里，我们调用了 fuzzySearch API 方法，传入了我们应用程序的 API 密钥，以及用户在输入框中输入的任何位置。
由于该函数返回的是一个 Promise 对象，我们需要等待它的响应。模糊搜索会返回一个包含多个与搜索相关的属性的对象。`results` 属性会保存一个数组，其中包含搜索结果中的位置信息。
当响应准备就绪时，我们调用了 moveMapTo 方法，并将第一个匹配项的位置属性传递给它。
此功能负责将地图移动到新地址：
function moveMapTo(newLoc) {
map.flyTo({
center: newLoc,
zoom: 15
})
}
在这里，我们告诉地图从当前位置移动到与我们的搜索查询匹配的位置。
因此，当在输入框中添加位置并点击按钮时，地图将以流畅的过渡效果切换到新位置。
结论
TomTom Web SDK 提供了丰富的 API，可用于集成各种功能。您可以从官方 API 文档中了解更多信息。
该项目的代码可在CodePen上找到。