なぜこれが起こるのか、私は非常に混乱しています。
マップにマーカーを追加しようとしていますが、関数の1つにアラートがあった場合は正常に機能していました。動作していることに満足しました。アラートを取り出して再度テストしましたが、マーカーが読み込まれませんでした。マーカーが再び正しく読み込まれるのと同じ場所で関数にアラートを戻すと。なぜこれが起こるのか誰かが知っていますか、私が理解していない私のコードに何らかのタイミングの問題がありますか？Firebugは問題を報告せず、XMLファイルは正しくロードされています。
コードのどの部分に問題が含まれているかわからないため、作業中のコードのページ全体を投稿しました。
ただし、私が話していたアラートはget_locations..関数内にあります。alert("THIS HERE");
<style type="text/css" >
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="../js/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
var alerted = false;
function MYMAP()
{
//internal
var map = '';
var center = '';
var centerImage = 'http://maps.google.com/mapfiles/arrow.png';
var infoWindow = '';
var last_ne_lat; //Check previous map corner
var locations = [];
var customIcons = {
yes: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png',
shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
},
no: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png',
shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
}
};
var get_locations = function(neLat, neLng, swLat, swLng, map, infoWindow)
{
//testMap.removeAllMarkers();
var xmlArray = [];
var tags = '';
var tagCheck = false;
/*if($("#tags").val())
{
tags = $.trim($("#tags").val());
tagCheck = true;
//alert(tags);
}
var coupons= $('#coupons').attr('checked');
//if(coupons == 'checked')
//alert("Checking for coups");
//$("div:contains('John')").css("text-decoration", "underline"); //For checking XML
*/
$.get('Scripts/googlemap_ajax.php', {neLat: neLat, neLng: neLng, swLat: swLat, swLng: swLng},
function(xml)
{
$(xml).find("marker").each(function()
{
var id = $(this).attr("locationID");
var name = $(this).attr("name");
var tags = $(this).attr('tags');
var coupon = $(this).attr('coupon');
var point = new google.maps.LatLng(
$(this).attr('latitude'),
$(this).attr('longitude'));
xmlArray.push({"id": id, "marker": "empty", "name": name, "point": point, "tags": tags, "coupon": coupon});
});
}, "xml");
var addElements = [];
var removeElements = [];
alert("THIS HERE");
$.each(locations, function(i, v1)
{
var inLoop = false;
loc=this;
$.each(xmlArray, function(j,v)
{
if(loc.id == this.id)
{
inLoop = true;
return false;
}
});
if(!inLoop)
{
removeElements.push(i);
}
});
for(var i=removeElements.length-1; i>=0; i = i-1)
{
locations[removeElements[i]][marker].setMap(null);
locations.splice(removeElements[i],1);
}
$.each(xmlArray, function(i, v1)
{
var inLoop = false;
xml=this;
$.each(locations, function(j,v)
{
if(xml.id == this.id)
{
inLoop = true;
return false;
}
});
if(!inLoop)
{
addElements.push(i);
}
});
$.each(addElements, function()
{
var icon = customIcons[xmlArray[this].coupon] || {};
var marker = new google.maps.Marker({
position: xmlArray[this].point,
map: map,
icon: icon.icon
});
var html = "<h3>"+xmlArray[this].name+"</h3><p>"+xmlArray[this].tags+"</p>";
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
xmlArray[this].marker = marker;
locations.push(xmlArray[this]);
});
};
//external:
return {
init: function(selector, latLng, zoom)
{
var myOptions = {
zoom:zoom,
center: latLng,
streetViewControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
this.map = new google.maps.Map($(selector)[0], myOptions);
},
centerMarker: function(latlng)
{
this.center = new google.maps.Marker({
position: latlng,
map: this.map,
icon: centerImage,
title: "You are here"
});
},
removeAllMarkers: function()
{
$.each(locations, function()
{
this.marker.setMap(null);
});
locations=[];
},
addBoundChange: function()
{
this.infoWindow = new google.maps.InfoWindow;
test = this.map;
test2 = this.infoWindow;
// Add listener to map
google.maps.event.addListener(this.map, 'bounds_changed', function() {
var zoom_level = this.getZoom();
if(zoom_level > 12)
{
var bounds = this.getBounds();
var ne = bounds.getNorthEast();
var neLat = bounds.getNorthEast().lat();
var neLng = bounds.getNorthEast().lng();
var sw = bounds.getSouthWest();
var swLat = bounds.getSouthWest().lat();
var swLng = bounds.getSouthWest().lng();
if( neLat != last_ne_lat)
{
last_ne_lat = neLat;
get_locations(neLat, neLng, swLat, swLng, test, test2);
}
}
else //Alerts the user only once- removes markers everytime
{
testMap.removeAllMarkers();
if(!alerted)
{
alerted=true;
alert("Please zoom in to continue displaying the location markers");
}
}
});
}
};
}
var testMap = new MYMAP();
var latlng = new google.maps.LatLng(<?php echo $lat; ?>,<?php echo $long; ?>);
testMap.init('#map_canvas', latlng, 16);
testMap.centerMarker(latlng);
testMap.addBoundChange();
$('#tagSearch').submit(function(e)
{
e.preventDefault();
});
});
</script>
<body>
<form id="tagSearch">
<h3>Filter results:</h3>
Search: <input type="text" id="tags" /> 
<input type="checkbox" id="coupons" /> deals only<br />
<input type="submit" value="Submit" />
</form>
<div id="locationSelect" style="width:100%"></div>
<div id="map_canvas" style="width:70%; height:90%"></div>
</body>
-----------------------------------------解決済み-------- ----------------------------------
問題は、$.get関数が処理された後、$.getリクエストが完了する前にコードチャンクが発生したことです。
解決策は、の後にすべてのコードをチェーンに$.get入れることでした。.complete()
var get_locations = function(neLat, neLng, swLat, swLng, map, infoWindow)
{
$.get('url', {data: "data"},
function(xml)
{
$(xml).find("marker").each(function()
{
//Process data
});
}, "xml")
.complete(function()
{
//Code that relies on the processed data
});
};