在前端开发中，我们经常会用到地图。而 wheretogo 就是一个非常方便的 npm 包，可以帮助我们在网页中使用高德地图，实现地图功能。本文将介绍 wheretogo 的使用方法及注意事项。
安装
我们可以通过 npm 安装 wheretogo 包。打开终端，输入以下命令即可：
npm install wheretogo
引入
当安装了 wheretogo 包之后，我们需要在 html 中引入 wheretogo。打开 html 文件，插入以下代码：
-- -------------------- ---- ------- --------- ----- ------ ------ ---------------- ------------ ----- ---------------- ------- ---------------------- ------------------------------------------------------------------ ------- ---------------------- ------------------------------------------------------------ ------- ------ ---- --------------- ------- -------
需要注意的是，需要将 YOUR_KEY 替换成你的高德地图开发者 key。
初始化地图
我们需要在 JavaScript 文件中初始化地图。在 JS 文件中插入下面的代码：
const map = wheretogo.init('map', {
zoom: 12,
center: [121.509062, 31.245554],
})其中，'map' 表示地图容器的 id，zoom 表示地图缩放等级，center 表示地图的中心点坐标。
添加标记
我们可以在地图上添加标记。在 JS 文件中插入下面的代码：
-- -------------------- ---- -------
----- ------ - ---------------------
--------- ------------ -----------
------ ------
----- -
---- ---------------------
----- ---- ----
------- ----------------
------------ ----
--
--其中，position 表示标记的位置坐标，title 表示标记的标题，icon 表示标记的图标。
添加信息窗体
我们可以在地图上添加信息窗体。在 JS 文件中插入下面的代码：
const infowindow = wheretogo.addInfoWindow({
position: [121.509062, 31.245554],
content: '这里是上海塔',
})其中，position 表示信息窗体的位置坐标，content 表示信息窗体的内容。
进行搜索
我们可以进行地图上的搜索。在 JS 文件中插入下面的代码：
wheretogo.search({
keyword: '上海塔',
city: '上海',
pageSize: 1,
}).then(result => {
console.log(result)
})其中，keyword 表示搜索的关键词，city 表示搜索的城市，pageSize 表示每页返回的数量。
总结
在本篇文章中，我们介绍了如何使用 wheretogo 进行地图开发。通过本篇文章的学习，你可以轻松地在网页中使用 wheretogo 进行地图开发。希望本文能对你带来帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006710c8dd3466f61ffe146