将纬度/经度坐标推送到 Google 地图的数组答案

【问题标题】：Push lat/long coordinates to an array for Google maps将纬度/经度坐标推送到 Google 地图的数组
【发布时间】：2018-08-08 15:50:03
【问题描述】：

我正在尝试根据一组 div 的数据属性为 Google 地图生成地图标记。我需要数组最终看起来像这样：

var markers = [
    [51.503454,-0.119562],
    [51.499633,-0.124755]
];

这是我迄今为止尝试过的：

var markers = [];

$(function() {
  $('.location').each(function() {
    var lat = $(this).attr('data-lat'),
        lng = $(this).attr('data-lng');
        
    markers.push(lat,lng);
  });
  
  console.log(markers);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="location" data-lat="51.503454" data-lng="-0.119562"></div>
<div class="location" data-lat="51.499633" data-lng="-0.124755"></div>

如何获得成对的 lat/lng 坐标，而不是 4 个单独的值？

【问题讨论】：

markers.push([lat,lng]);您正在尝试构建一个二维数组。这意味着每个元素都是一个数组。

标签： javascript jquery each

【解决方案1】：

您可以使用map 方法并为每个元素返回带有lat、lng 值的数组。

const markers = $('.location').map(function() {
  return [[$(this).data('lat'), $(this).data('lng')]]
}).get();

console.log(markers)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="location" data-lat="51.503454" data-lng="-0.119562"></div>
<div class="location" data-lat="51.499633" data-lng="-0.124755"></div>

【讨论】：

【解决方案2】：

喜欢吗？

var markers = [];

$(function() {
  $('.location').each(function() {
    var lat = $(this).attr('data-lat'),
        lng = $(this).attr('data-lng');
        
    markers.push([+lat,+lng]);
  });
  
  console.log(markers);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="location" data-lat="51.503454" data-lng="-0.119562"></div>
<div class="location" data-lat="51.499633" data-lng="-0.124755"></div>

【讨论】：