Javascript 使用坐标数组制作按钮，当您按下按钮时，坐标数组将重新定位您

我有一张谷歌地图，我有很多不同位置的坐标。 我要做的是——它是一个按钮，当你按下它时，它会将用户重新定位到不同的坐标

我不知道怎么做

我只是用不同的按钮做了这样的例子-

但是我真的不知道如何用这些坐标来制作一个按钮

---

谢谢你的帮助

我要做的是将lat lang存储在html属性中

<input type="button" data-attr-lat="34.01131647557699" data-attr-lng="-118.25599389648437" id="panLA" value="Pan To Los Angeles" />

工作原理：

$('menu input[type="button"]')

上述代码选择菜单中的每个按钮

.on('click',function(){})

上面的代码为

$（'menu input[type=“button”]”）返回的每个按钮附加了一个点击侦听器。

在上面的代码中，

$（此）

指触发事件的按钮（单击的按钮），然后使用jquery

.attr（）

函数从中检索lat和LAG。然后，它们被用来构建我们新的google maps Latling对象

在意识到您只需要一个按钮后更新：

Html:

---

你的意思是，我需要为每个输入设置值，然后隐藏所有输入并使其仅显示一个按钮，然后jQuery上的此功能将使用坐标重新定位到每个输入？不，不，你只需要将数据属性lat和数据属性lng作为属性添加到每个按钮上，如上面所示。然后，当单击菜单中的任何按钮时，我在上面创建的函数将被调用，并从单击的按钮中检索属性$（这）在jquery中指触发事件的元素，在这种情况下，它将是单击的按钮。这就是我们如何检索所单击按钮的属性。我编辑了答案以提供更多解释问题是我只需要一个按钮，当我按下此按钮时，它将带我到地图上的不同坐标

$('menu input[type="button"]').on('click',function(){
     let lat = $(this).attr('data-attr-lat');
     let lng = $(this).attr('data-attr-lng');
     let latLng = new google.maps.LatLng(lat, lng);
     marker.setPosition(latLng);
     map.panTo(latLng);
});

$('menu input[type="button"]')

.on('click',function(){})

   let lat = $(this).attr('data-attr-lat');
   let lng = $(this).attr('data-attr-lng');

<div id="menu">
<input type="button" id="panBtn" value="Pan To Los Angeles" />
</div>

const coordinateArray = [
    new google.maps.LatLng(34.01131647557699, -118.25599389648437),
    new google.maps.LatLng(33.70131647557699, -118.15599389648437),
    new google.maps.LatLng(51.501417, -0.020886),
    new google.maps.LatLng(53.708214, -1.621459),
    new google.maps.LatLng(52.231462, 0.147424),
    new google.maps.LatLng(55.94756, -3.211026),
    new google.maps.LatLng(25.77248, -80.186847)
 ];
 let currentPosition = 0;
 $('#menu #panBtn').on('click',function(){
     let latLng = coordinateArray[(currentPosition++)%coordinateArray.length];
     marker.setPosition(latLng);
     map.panTo(latLng);
});