如果你需要在前端中实现地图相关的功能，那么一个常见的需求就是选择地图上的坐标点。npm 包 coordinates-picker 可以帮助你轻松实现这个功能。
安装
你可以通过以下命令来安装 coordinates-picker：
npm install coordinates-picker --save
使用
使用 coordinates-picker 非常简单。首先，你需要在 HTML 中引入 coordinates-picker：
<script src="node_modules/coordinates-picker/dist/coordinates-picker.js"></script>
然后，在 JavaScript 代码中，你可以创建一个 CoordinatesPicker 对象，传入地图的 DOM 元素和一些参数：
const mapElement = document.getElementById('map');
const coordinatesPicker = new CoordinatesPicker(mapElement, {
defaultLat: 39.9042,
defaultLng: 116.4074,
zoom: 10
});其中，defaultLat 和 defaultLng 分别是地图的默认中心点的经纬度，zoom 是地图的默认缩放级别。
接下来，你可以给地图添加一个标记（marker）并监听标记移动的事件：
const marker = coordinatesPicker.addMarker(39.9042, 116.4074);
marker.on('move', function (event) {
console.log('marker moved to', event.lat, event.lng);
});在标记被移动时，它会触发 move 事件，并且事件对象包含当前标记的经纬度。
示例代码
以下是一个完整的示例代码，它可以在地图上选择一个坐标点并打印出该点的经纬度：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------------ ------ ------------
-------
---- -
------- ------
-
--------
-------
------
---- ---------------
------- --------------------------------------------------------------------------
--------
----- ---------- - -------------------------------
----- ----------------- - --- ----------------------------- -
----------- --------
----------- ---------
----- --
---
----- ------ - ------------------------------------ ----------
----------------- -------- ------- -
------------------- ----- ---- ---------- -----------
---
---------
-------
-------总结
使用 coordinates-picker 可以轻松实现地图上选择坐标点的功能。通过本文的介绍，你应该已经能够掌握如何使用这个 npm 包，并且可以根据自己的需求进行定制和扩展。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/39289