Google Maps API 是一个功能强大的工具，它可以让我们创建交互性地图并在网站中嵌入这些地图。在这篇文章中，我们将学习如何在 Google Maps API 中移动标记。
准备工作
首先，我们需要在 HTML 文件中引入 Google Maps API 的 JavaScript 库。此外，我们还需要在代码中添加一个 div 元素来作为地图的容器，并设置它的高度和宽度。
-- -------------------- ---- ------- --------- ----- ------ ------ ------------- ---- --- ---------- ------- ------------------------------------------------------------------------ ------- ---- - ------- ------ ------ ----- - -------- ------- ------ ---- --------------- -------- -- ------ --------- ------- -------展开代码
请注意，上面的代码中 YOUR_API_KEY 需要替换为你自己的 API 密钥。
创建地图
接下来，我们需要创建一个新的 google.maps.Map 实例来显示地图。我们需要指定一个 div 元素作为地图的容器，以及地图的初始中心点和缩放级别。
var map = new google.maps.Map(document.getElementById("map"), { center: { lat: 40.712776, lng: -74.005974 }, // 纽约市的坐标 zoom: 12, // 缩放级别 });
添加标记
要在地图上添加标记，我们需要创建一个 google.maps.Marker 实例，并指定标记的位置和地图实例。
var marker = new google.maps.Marker({ position: { lat: 40.712776, lng: -74.005974 }, // 标记的位置 map: map, // 地图实例 });
现在，我们已经成功地将一个标记添加到了地图上。接下来，让我们学习如何移动这个标记。
移动标记
要移动标记，我们可以使用 setPosition 方法。该方法需要一个包含经度和纬度的对象作为参数，以指定标记应该移动到的新位置。
marker.setPosition({ lat: 40.712776, lng: -74.005974 });
以上代码将把标记移动回原来的位置。如果我们想要让标记移动到另一个位置，只需要指定相应的经度和纬度即可。
marker.setPosition({ lat: 40.728157, lng: -73.994165 }); // 移动标记到布鲁克林大桥
示例代码
以下是完整的示例代码：
-- -------------------- ---- ------- --------- ----- ------ ------ ------------- ---- --- ---------- ------- ------------------------------------------------------------------------ ------- ---- - ------- ------ ------ ----- - -------- ------- ------ ---- --------------- -------- --- --- - --- ----------------------------------------------- - ------- - ---- ---------- ---- ---------- -- -- ------ ----- --- -- ---- --- --- ------ - --- -------------------- --------- - ---- ---------- ---- ---------- -- -- ----- ---- ---- -- ---- --- -------------------- ---- ---------- ---- ---------- --- -- ----------- --------- ------- -------展开代码
现在，你已经学会了如何在 Google Maps API 中移动标记。希
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/29147
