1
xml 파일에서 가져온지도로드 마커를 만들려고합니다. 현재이 작업이 완벽하게 수행됩니다. 그러나 하이퍼 링크에서 전달 된 달을 기준으로지도에 새 마커를 다시로드하고 싶습니다.Google Maps API v3 - Ajax (Javascript + Jquery) 문제가 발생했습니다.
'global_month'변수가 하이퍼 링크를 통해 변경되면 ajax 요청이 실행되고 'data_array'는 나중에 'if'문으로 전달 된 날짜를 기반으로 새 데이터로 다시 채워야합니다. 그러나 'data_array'내용을 다시 사용하고 새로운 데이터로 채우지 않습니다.
'change_date_range'함수에서 'global_month = []'을 통해 'global_month'를 재설정하려고 시도했지만 배열이 다시 채워지지 않은 것처럼 보입니다. 나는 잘못 가고있는 곳을 해결하기 위해 3 시간을 보냈지 만 할 수는 없다. 누구든지 도와 줄 수 있습니까? 또한 이것을하는 더 효율적인 방법이 있습니까?
대단히 감사합니다.
///////////////////////////////
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script>
$(document).ready(function()
{
$.ajax({
type: "GET",
url: "driving_test_centers.xml",
dataType: "xml",
success: parseXml
});
});
var global_month = 6;
function refetch()
{
$.ajax({
type: "GET",
url: "driving_test_centers.xml",
dataType: "xml",
success: parseXml
});
};
var data_array = [];
var empty_holder;
var empty_month;
var info_date;
var address1;
var address2;
var town;
var county;
var postcode;
var lat;
var lon;
var male_pass_percentage1;
var male_pass_percentage;
var female_pass_percentage1;
var female_pass_percentage;
var the_new_date;
var infowindow;
var xml_contents;
function parseXml(xml)
{
$(xml).find("test_center").each(function() // look for all of the test centers
{
center_name = $(this).attr('name');
address1 = $(this).find('address1').text();
address2 = $(this).find('address2').text();
town = $(this).find('town').text();
county = $(this).find('county').text();
postcode = $(this).find('postcode').text();
lat = $(this).find('lat').text();
lon = $(this).find('lon').text();
$(this).find("date_info").each(function()
{
info_date = $(this).attr('date');
empty_month = $(this).find('month').text();
male_pass_percentage = $(this).find('male');
male_pass_percentage = male_pass_percentage.find('pass_percentage').text();
female_pass_percentage = $(this).find('female');
female_pass_percentage = female_pass_percentage.find('pass_percentage').text();
if(empty_month == global_month){
data_array.push([lat,lon,center_name,info_date,male_pass_percentage,female_pass_percentage]);
}
});
});
}
function change_date_range(the_new_date){
global_month = the_new_date;
refetch();
init();
};
</script>
<script>
function init() {
var options = {
zoom: 5,
center: new google.maps.LatLng(55.3781, -3.4360),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var places;
places = null;
var map = new google.maps.Map(document.getElementById('map'), options);
var bounds = new google.maps.LatLngBounds();
var places = data_array;
var temp_location;
for (var i = 0; i < places.length; i++) {
temp_location = new google.maps.LatLng(places[i][0], places[i][1])
// Adding the markers
var marker = new google.maps.Marker({
position: temp_location,
map: map,
title: places[i][2]
});
// Wrapping the event listener inside an anonymous function
// that we immediately invoke and passes the variable i to.
(function(i, marker) {
// Creating the event listener. It now has access to the values of
// i and marker as they were during its creation
google.maps.event.addListener(marker, 'click', function() {
// Check to see if we already have an InfoWindow
if (!infowindow) {
infowindow = new google.maps.InfoWindow();
}
// Setting the content of the InfoWindow
infowindow.setContent(places[i][2] + "<br />" + global_month + "<br />" + places[i][3] + "<br /><br />Male: " + places[i][4] + "%<br />Female: " + places[i][5] + "%");
// Tying the InfoWindow to the marker
infowindow.open(map, marker);
});
})(i, marker);
// Extending the bounds object with each LatLng
bounds.extend(temp_location);
}
// Adjusting the map to new bounding box
map.fitBounds(bounds)
};
</script>
</head>
<body onload="init()">
<div id="map" style="width:800px;height:600px"></div>
<a href="javascript:change_date_range(7)">click</a>
</body>
</html>
/////////////////////////////////////////////////////////////////////////////////////////// /////////////////
XML 파일 (의 작은 부분) : 당신은 data_array 배열을 삭제하지 않을
http://tinypaste.com/198889bb
data_array = [], 현재의 달에게 링크를 클릭 할 때 처음로드 - 새로운 무시를 달이지나 갔다. 그것은 두 번째로 작동하지만 나는 매번 맵을 다시로드하기 때문에 문제가 있다고 생각합니다. xml 내용을 배열에 저장할 수 있습니까? 아니면 문제를 일으킬 수 있습니까? – Chris
감사의 로봇 당신은 저에게 출발점을주었습니다. 나는 모든 것을 다시 썼고, 훨씬 잘 작동하며, 나는 그것을 모두 아주 잘 이해합니다. 건배! – Chris
위대한, 나는 똑같이하고 있었다. 이상적으로 XML을 한 번 파싱하고 고유 배열로 나눈 다음 타겟 달을 변경하고 맵을 지우고 기존 배열 중 하나를 반복하는 것이 이상적이라고 생각합니다. 같은 데이터에서 한 번 더 아약스를 수행 할 필요는 없습니다. (단 한 번만 매개 변수를 받아들이고 전반적인 데이터 세트의 일부만을 제공하는 스크립트가되도록 타겟을 변경해야합니다. 그것을 한 번 이상 부르십시오). 당신이 궤도에 올랐다 니 다행이다. –