从文章标签的数据属性列表创建一个数组

Question

我想创建一个数组，我将分配给一个标记变量，这是为了在 google 地图中显示标记。但我所拥有的只是文章标签中的数据属性。

这是我正在做的事情：http://jsfiddle.net/gilbertlucas46/qpvdrjh8/7/ 如果你检查控制台，它会显示这个

这就是我想要实现的目标

var markers = [
  ['Palace of Westminster, London', -27.4687253, 153.0273166],
  ['Palace of Westminster, London', -27.4687253, 153.0273166]
];

这是我必须在 google 地图中显示标记的代码

jQuery(function($) {
          // Asynchronously Load the map API
          var script = document.createElement('script');
          script.src = "//maps.googleapis.com/maps/api/js?sensor=false&callback=initialize";
          document.body.appendChild(script);
        });

        function initialize() {
          var map;
          var bounds = new google.maps.LatLngBounds();
          var mapOptions = {
              mapTypeId: 'roadmap'
          };
          // var latitude= $('div.locations').find('.location').attr("data-latitude");
          // var longitude= $('div.locations').find('.location').attr("data-longitude");
          // var coor = latitude + ' , ' + longitude;
          var latitude,
              longitude,
              dataName,
              coor,
              markers;

          $(".location").each(function(){
            latitude = $(this).attr('data-latitude');
            longitude = $(this).attr('data-longitude');
            dataName = $(this).attr('data-name');
            coor = latitude + ' , ' + longitude;
          // Display a map on the page
          map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
          map.setTilt(45);

            // Multiple Markers
            var markers = new Array([dataName, latitude, longitude]);
            console.log(markers);


          // Info Window Content
          var infoWindowContent = [
              // ['<div class="info_content">' +
              // '<h3>London Eye</h3>' +
              // '<p>The London Eye is a giant Ferris wheel situated on the banks of the River Thames. The entire structure is 135 metres (443 ft) tall and the wheel has a diameter of 120 metres (394 ft).</p>' +        '</div>'],
              // ['<div class="info_content">' +
              // '<h3>Palace of Westminster</h3>' +
              // '<p>The Palace of Westminster is the meeting place of the House of Commons and the House of Lords, the two houses of the Parliament of the United Kingdom. Commonly known as the Houses of Parliament after its tenants.</p>' +
              // '</div>']
          ];

          // Display multiple markers on a map
          var infoWindow = new google.maps.InfoWindow(), marker, i;

          // Loop through our array of markers & place each one on the map
          for( i = 0; i < markers.length; i++ ) {
              var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
              bounds.extend(position);
              marker = new google.maps.Marker({
                  position: position,
                  map: map,
                  title: markers[i][0]
              });

              // Allow each marker to have an info window
              google.maps.event.addListener(marker, 'click', (function(marker, i) {
                  return function() {
                      infoWindow.setContent(infoWindowContent[i][0]);
                      infoWindow.open(map, marker);
                  }
              })(marker, i));

              // Automatically center the map fitting all markers on the screen
              map.fitBounds(bounds);
          }
          });

          // Override our map zoom level once our fitBounds function runs (Make sure it only runs once)
          var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
              this.setZoom(10);
              google.maps.event.removeListener(boundsListener);
          });
      }

Answer 1

尝试使用push将其添加到数组中并在循环外设置变量？

http://jsfiddle.net/qjd23gnm/

我把它变成了一个变量。检查 fiddle 看看它是否是您需要的。

      var markers = [];

      $(".location").each(function() {
        latitude = $(this).attr('data-latitude');
        longitude = $(this).attr('data-longitude');
        dataName = $(this).attr('data-name');
        <!--   coor = latitude + ' , ' + longitude; -->
        // Multiple Markers
        markers.push([dataName, latitude, longitude]);

      });
      console.log(markers);

从文章标签的数据属性列表创建一个数组

Create an array from list of articles tag's data attribute

javascript

jquery

html

google-maps

custom-data-attribute