#javascript #jquery #laravel
#javascript #jquery #laravel
Вопрос:
я пытаюсь создать карту мира (jvectormap) с информацией о платежах по странам в моем проекте laravel. На карте я установил плагин выбора диапазона дат для фильтрации диапазона дат данных, используемых картой.
То, что я пытаюсь, это обновить div с помощью jvectormap с помощью jquery .load():
$("#vmap").load(location.href " #vmap");
Проблема в том, что он дублирует мой vmap div и использует его как дочерний, удаляя все другие мои дочерние элементы, поэтому, когда он обновляется, карты нет.
HTML:
<div id="vmap" style="height: 250px; width: 100%;"><div id="vmap" style="height: 250px; width: 100%;"></div></div>
пока это было так до обновления:
<div id="vmap" style="height: 250px; width: 100%;"><div class="jvectormap-container" style="background-color: transparent;"><svg width="365.406" height="250"><defs></defs><g transform="scale(0.4060066666666667) translate(0, 87.52356258001963)"><path d="M651.84,230.21l-0.6,-2.0l-1.36,-1.71l-2.31,-0.11l-0.41,0.48l0.2,0.94l-0.53,0.99l-0.72,-0.36l-0.68,0.35l-1.2,-0.36l-0.37,-2.0l-0.81,-1.86l0.39,-1.46l-0.22,-0.47l-
...
fill-opacity="1" stroke="none" stroke-width="0" stroke-opacity="1" fill-rule="evenodd" class="jvectormap-region jvectormap-element"></path></g><g></g><g></g><g></g></svg><div class="jvectormap-zoomin"> </div><div class="jvectormap-zoomout">−</div><div class="jvectormap-legend-cnt jvectormap-legend-cnt-h"><div class="jvectormap-legend"><div class="jvectormap-legend-inner"><div style="clear: both;"></div></div></div></div><div class="jvectormap-legend-cnt jvectormap-legend-cnt-v"></div></div></div>
Карта кода:
var landcodes = {"BD": "Bangladesh", "BE": "Belgium", "BF": "Burkina Faso", "BG": "Bulgaria", "BA": "Bosnia and Herzegovina", "BB": "Barbados", "WF": "Wallis and Futuna", "BL": "Saint Barthelemy", "BM": "Bermuda", "BN": "Brunei", "BO": "Bolivia", "BH": "Bahrain", "BI": "Burundi", "BJ": "Benin", "BT": "Bhutan", "JM": "Jamaica", "BV": "Bouvet Island", "BW": "Botswana", "WS": "Samoa", "BQ": "Bonaire, Saint Eustatius and Saba ", "BR": "Brazil", "BS": "Bahamas", "JE": "Jersey", "BY": "Belarus", "BZ": "Belize", "RU": "Russia", "RW": "Rwanda", "RS": "Serbia", "TL": "East Timor", "RE": "Reunion", "TM": "Turkmenistan", "TJ": "Tajikistan", "RO": "Romania", "TK": "Tokelau", "GW": "Guinea-Bissau", "GU": "Guam", "GT": "Guatemala", "GS": "South Georgia and the South Sandwich Islands", "GR": "Greece", "GQ": "Equatorial Guinea", "GP": "Guadeloupe", "JP": "Japan", "GY": "Guyana", "GG": "Guernsey", "GF": "French Guiana", "GE": "Georgia", "GD": "Grenada", "GB": "United Kingdom", "GA": "Gabon", "SV": "El Salvador", "GN": "Guinea", "GM": "Gambia", "GL": "Greenland", "GI": "Gibraltar", "GH": "Ghana", "OM": "Oman", "TN": "Tunisia", "JO": "Jordan", "HR": "Croatia", "HT": "Haiti", "HU": "Hungary", "HK": "Hong Kong", "HN": "Honduras", "HM": "Heard Island and McDonald Islands", "VE": "Venezuela", "PR": "Puerto Rico", "PS": "Palestinian Territory", "PW": "Palau", "PT": "Portugal", "SJ": "Svalbard and Jan Mayen", "PY": "Paraguay", "IQ": "Iraq", "PA": "Panama", "PF": "French Polynesia", "PG": "Papua New Guinea", "PE": "Peru", "PK": "Pakistan", "PH": "Philippines", "PN": "Pitcairn", "PL": "Poland", "PM": "Saint Pierre and Miquelon", "ZM": "Zambia", "EH": "Western Sahara", "EE": "Estonia", "EG": "Egypt", "ZA": "South Africa", "EC": "Ecuador", "IT": "Italy", "VN": "Vietnam", "SB": "Solomon Islands", "ET": "Ethiopia", "SO": "Somalia", "ZW": "Zimbabwe", "SA": "Saudi Arabia", "ES": "Spain", "ER": "Eritrea", "ME": "Montenegro", "MD": "Moldova", "MG": "Madagascar", "MF": "Saint Martin", "MA": "Morocco", "MC": "Monaco", "UZ": "Uzbekistan", "MM": "Myanmar", "ML": "Mali", "MO": "Macao", "MN": "Mongolia", "MH": "Marshall Islands", "MK": "Macedonia", "MU": "Mauritius", "MT": "Malta", "MW": "Malawi", "MV": "Maldives", "MQ": "Martinique", "MP": "Northern Mariana Islands", "MS": "Montserrat", "MR": "Mauritania", "IM": "Isle of Man", "UG": "Uganda", "TZ": "Tanzania", "MY": "Malaysia", "MX": "Mexico", "IL": "Israel", "FR": "France", "IO": "British Indian Ocean Territory", "SH": "Saint Helena", "FI": "Finland", "FJ": "Fiji", "FK": "Falkland Islands", "FM": "Micronesia", "FO": "Faroe Islands", "NI": "Nicaragua", "NL": "Netherlands", "NO": "Norway", "NA": "Namibia", "VU": "Vanuatu", "NC": "New Caledonia", "NE": "Niger", "NF": "Norfolk Island", "NG": "Nigeria", "NZ": "New Zealand", "NP": "Nepal", "NR": "Nauru", "NU": "Niue", "CK": "Cook Islands", "XK": "Kosovo", "CI": "Ivory Coast", "CH": "Switzerland", "CO": "Colombia", "CN": "China", "CM": "Cameroon", "CL": "Chile", "CC": "Cocos Islands", "CA": "Canada", "CG": "Republic of the Congo", "CF": "Central African Republic", "CD": "Democratic Republic of the Congo", "CZ": "Czech Republic", "CY": "Cyprus", "CX": "Christmas Island", "CR": "Costa Rica", "CW": "Curacao", "CV": "Cape Verde", "CU": "Cuba", "SZ": "Swaziland", "SY": "Syria", "SX": "Sint Maarten", "KG": "Kyrgyzstan", "KE": "Kenya", "SS": "South Sudan", "SR": "Suriname", "KI": "Kiribati", "KH": "Cambodia", "KN": "Saint Kitts and Nevis", "KM": "Comoros", "ST": "Sao Tome and Principe", "SK": "Slovakia", "KR": "South Korea", "SI": "Slovenia", "KP": "North Korea", "KW": "Kuwait", "SN": "Senegal", "SM": "San Marino", "SL": "Sierra Leone", "SC": "Seychelles", "KZ": "Kazakhstan", "KY": "Cayman Islands", "SG": "Singapore", "SE": "Sweden", "SD": "Sudan", "DO": "Dominican Republic", "DM": "Dominica", "DJ": "Djibouti", "DK": "Denmark", "VG": "British Virgin Islands", "DE": "Germany", "YE": "Yemen", "DZ": "Algeria", "US": "United States", "UY": "Uruguay", "YT": "Mayotte", "UM": "United States Minor Outlying Islands", "LB": "Lebanon", "LC": "Saint Lucia", "LA": "Laos", "TV": "Tuvalu", "TW": "Taiwan", "TT": "Trinidad and Tobago", "TR": "Turkey", "LK": "Sri Lanka", "LI": "Liechtenstein", "LV": "Latvia", "TO": "Tonga", "LT": "Lithuania", "LU": "Luxembourg", "LR": "Liberia", "LS": "Lesotho", "TH": "Thailand", "TF": "French Southern Territories", "TG": "Togo", "TD": "Chad", "TC": "Turks and Caicos Islands", "LY": "Libya", "VA": "Vatican", "VC": "Saint Vincent and the Grenadines", "AE": "United Arab Emirates", "AD": "Andorra", "AG": "Antigua and Barbuda", "AF": "Afghanistan", "AI": "Anguilla", "VI": "U.S. Virgin Islands", "IS": "Iceland", "IR": "Iran", "AM": "Armenia", "AL": "Albania", "AO": "Angola", "AQ": "Antarctica", "AS": "American Samoa", "AR": "Argentina", "AU": "Australia", "AT": "Austria", "AW": "Aruba", "IN": "India", "AX": "Aland Islands", "AZ": "Azerbaijan", "IE": "Ireland", "ID": "Indonesia", "UA": "Ukraine", "QA": "Qatar", "MZ": "Mozambique"};
var payments = {
"AF": 0,
"AL": 0,
"DZ": 0,
"AO": 0,
"AG": 0,
"AR": 0,
"AM": 0,
"AU": 0,
"AT": 0,
"AZ": 0,
"BS": 0,
"BH": 0,
"BD": 0,
"BB": 0,
"BY": 0,
"BE": 3,
"BZ": 0,
"BJ": 0,
"BT": 0,
"BO": 0,
"BA": 0,
"BW": 0,
"BR": 0,
"BN": 0,
"BG": 0,
"BF": 0,
"BI": 0,
"KH": 0,
"CM": 0,
"CA": 0,
"CV": 0,
"CF": 0,
"TD": 0,
"CL": 0,
"CN": 0,
"CO": 0,
"CU": 0,
"KM": 0,
"CD": 0,
"CG": 0,
"CR": 0,
"CI": 0,
"HR": 0,
"CY": 0,
"CZ": 0,
"DK": 0,
"DJ": 0,
"DM": 0,
"DO": 0,
"EC": 0,
"EG": 0,
"EH": 0,
"SV": 0,
"GQ": 0,
"ER": 0,
"EE": 0,
"ET": 0,
"FJ": 0,
"FI": 0,
"FK": 0,
"FR": 30,
"GA": 0,
"GM": 0,
"GL": 0,
"GE": 0,
"DE": 6,
"GH": 0,
"GR": 0,
"GD": 0,
"GT": 0,
"GN": 0,
"GW": 0,
"GY": 0,
"HT": 0,
"HN": 0,
"HK": 0,
"HU": 0,
"IS": 0,
"IN": 0,
"ID": 0,
"IR": 0,
"IQ": 0,
"IE": 0,
"IL": 0,
"IT": 0,
"JM": 0,
"JP": 0,
"JO": 0,
"KZ": 0,
"KE": 0,
"KI": 0,
"KR": 0,
"UNDEFINED": 0,
"KW": 0,
"KG": 0,
"LA": 0,
"LV": 0,
"LB": 0,
"LS": 0,
"LR": 0,
"LY": 0,
"LT": 0,
"LU": 0,
"MK": 0,
"MG": 0,
"MW": 0,
"MY": 0,
"MV": 0,
"ML": 0,
"MT": 0,
"MR": 0,
"MU": 0,
"MX": 0,
"MD": 0,
"MN": 0,
"ME": 0,
"MA": 0,
"MZ": 0,
"MM": 0,
"NC": 0,
"NA": 0,
"NP": 0,
"NL": 0,
"NZ": 0,
"NI": 0,
"NE": 0,
"NG": 0,
"NO": 0,
"OM": 0,
"PK": 0,
"PR": 0,
"PA": 0,
"PG": 0,
"PY": 0,
"PE": 0,
"PH": 0,
"PL": 0,
"PT": 0,
"QA": 0,
"RO": 0,
"RU": 0,
"RW": 0,
"WS": 0,
"ST": 0,
"SA": 0,
"SN": 0,
"RS": 0,
"SC": 0,
"SL": 0,
"SG": 0,
"SK": 0,
"SI": 0,
"SB": 0,
"ZA": 0,
"ES": 0,
"LK": 0,
"KN": 0,
"KP": 0,
"LC": 0,
"VC": 0,
"SD": 0,
"SR": 0,
"SZ": 0,
"SE": 0,
"SO": 0,
"SS": 0,
"CH": 0,
"SY": 0,
"TW": 0,
"TJ": 0,
"TZ": 0,
"TF": 0,
"TH": 0,
"TL": 0,
"TG": 0,
"TO": 0,
"TT": 0,
"TN": 0,
"TR": 0,
"TM": 0,
"UG": 0,
"UA": 0,
"AE": 0,
"GB": 0,
"US": 0,
"UY": 0,
"UZ": 0,
"VU": 0,
"VE": 0,
"VN": 0,
"XK": 0,
"XS": 0,
"YE": 0,
"ZM": 0,
"ZW": 0
};
var locatie = @json($locatie);
var loc = [];
var land = [];
var landcount = [];
function getKeyByValue(object, value) {
return Object.keys(object).find(key => object[key] === value);
}
for (i = 0; i < locatie.length; i ){
loc[locatie[i].location] = getKeyByValue(landcodes, locatie[i].location);
land.push(locatie[i].location);
landcount[loc[land[i]]] = locatie[i].count;
};
Object.assign(payments,landcount);
// //initialize JQVMap
$(function(){
$('#vmap').vectorMap({
map: 'world_mill',
backgroundColor: 'transparent',
series: {
regions: [{
values: payments,
scale: ['#ffffff', '#414141'],
normalizeFunction: 'linear',
legend: {
horizontal: true
}
}]
},
onRegionTipShow: function(e, el, code){
el.html(el.html() ' (payments - ' payments[code] ')');
}
});
});
Code daterangepicker:
$('#mapdate').daterangepicker({
ranges : {
'Today' : [moment(), moment()],
'Yesterday' : [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
'Last 7 Days' : [moment().subtract(6, 'days'), moment()],
'Last 30 Days': [moment().subtract(29, 'days'), moment()],
'This Month' : [moment().startOf('month'), moment().endOf('month')],
'Last Month' : [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
},
startDate: moment().subtract(29, 'days'),
endDate : moment(),
}, function (start, end) {
var startRange = start.format('YYYY-MM-DD');
var endRange = end.format('YYYY-MM-DD');
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$.ajax({
url: "{{ route('ajaxRequest.post') }}",
method: "POST",
data:{start:startRange, end:endRange},
success: function(data){
startRange = getCookie('start');
console.log(startRange);
endRange = getCookie('end');
console.log(endRange);
refreshMap();
},
});
Кто-нибудь знает, как это решить?
Спасибо
Комментарии:
1. Итак, какую часть карты вы хотите «обновить»? Как вы изначально генерируете содержимое
#vmap?2. Отредактировано в коде карты и daterangepicker
Ответ №1:
есть ли проблема с удалением всего содержимого, а затем просто повторной инициализацией карты?
$('#vmap').empty();
$('#vmap').vectorMap({
map: 'world_mill',
backgroundColor: 'transparent',
series: {
regions: [{
values: payments,
scale: ['#ffffff', '#414141'],
normalizeFunction: 'linear',
legend: {
horizontal: true
}
}]
},
onRegionTipShow: function(e, el, code){
el.html(el.html() ' (payments - ' payments[code] ')');
}
});
Комментарии:
1. Так что же произошло?
2. То же самое, что и раньше, появляется карта, когда я пытаюсь изменить daterangepicker, она исчезает.
3. Если инициализация сработала в первый раз, я не вижу причин, по которым она не должна работать во второй раз. Есть ошибки? Вероятно, лучше всего создать plunkr / stackblitz