从文章标签的数据属性列表创建一个数组 [英] Create an array from list of articles tag's data attribute
本文介绍了从文章标签的数据属性列表创建一个数组的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想创建一个我将分配给标记变量的数组，这是在Google地图中显示标记。但我所拥有的是来自article标签的数据属性。
这是我正在处理的内容：
这就是我想要达到的效果
var markers = [
['伦敦威斯敏斯特宫'，-27.4687253,153.0273166]，
['威斯敏斯特宫，伦敦'，-27.4687253,153.0273166]
];
这是我必须在Google地图中显示标记的代码
jQuery（函数（$）{
//异步加载地图API
var script = document.createElement（'script'）;
script.src =//maps.googleapis.com/maps/api/js?sensor=false&callback=initialize;
document.body.appendChild（script）;
} ）;
函数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，
经度，
dataName，
coor，
标记;
$（。location）。each（function（）{
latitude = $（this）.attr（'data-latitude'）;
longitude = $（这个）.attr（'data-longitude'）;
dataName = $（this）.attr（'data-name'）;
coor = latitude +'，'+ longitude;
//在地图上显示地图
map = new google.maps.Map（document.getElementById（map_canvas），mapOptions）;
map.setTilt（45）;
//多个标记
var marker = new Array（[dataName，latitude，longitude]）;
console.log（markers）;
//信息窗口内容
var infoWindowContent = [
// ['< div class =info_content>'+
//'< h3>伦敦眼< / h3>'+
//'< p>伦敦眼是位于泰晤士河两岸的巨型摩天轮，整个结构为135米（443英尺） < / p>'+'< / div>']，
// ['< div class =info_content>' +
//'< h3>威斯敏斯特宫< / h3>'+
//'< p>威斯敏斯特宫是下议院和上议院的聚会地点，英国议会两院。 < / p>'+
//'< / div>']
];
//在地图上显示多个标记
var infoWindow = new google.maps.InfoWindow（），marker，i;
//通过我们的数组标记和（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]
}）;
//允许每个标记有一个信息窗口
google.maps.event.addListener（marker，'click'，（function（marker，i）{
return function （）{
infoWindow.setContent（infoWindowContent [i] [0]）;
infoWindow.open（map，marker）;
}
}）（marker，i）） ;
//自动使地图适合屏幕上的所有标记
map.fitBounds（bounds）;
}
}）;
//我们的fitBounds函数运行后，覆盖地图缩放级别（确保它只运行一次）
var boundsListener = google.maps.event.addListener（（map），'bounds_changed' ，function（event）{
this.setZoom（10）;
google.maps.event.removeListener（boundsListener）;
}）;
解决方案
尝试使用push来添加它到数组并设置循环外的变量？
http ：//jsfiddle.net/qjd23gnm/
我把它变成了一个变量。检查小提琴，看它是否需要。
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）;
I want to create an array that I will assign to a marker variable, this is to display markers in google maps. but all that I have is the data attribute from article tag.
this what I'm working on: http://jsfiddle.net/gilbertlucas46/qpvdrjh8/7/ if you check the console it will show you this
this is what I want to achieve
var markers = [
['Palace of Westminster, London', -27.4687253, 153.0273166],
['Palace of Westminster, London', -27.4687253, 153.0273166]
];
this is the code that I have to display markers in google maps
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);
});
}
解决方案
Try to use push to add it to the array and set the variable outside the loop?
I got it into one variable. Check the fiddle to see if it what you need.
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);
这篇关于从文章标签的数据属性列表创建一个数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
