0
..jQueryのGoogleマップV3は、私はマップにマーカーを追加しようとしています私はこれが起こる理由としては非常に混乱していたマーカー
を追加し、私は機能の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関数の後にコードチャンクが処理されていたことが問題でした。
ソリューションは.complete()チェーンに$.get後のすべてのコードをスローするようにした。
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
});
};
あなたは答えとしてあなたのソリューションを追加したい場合があります - それOK、あなた自身の質問に答えるためにあなたがこの非常に長い質問を読んで他の人の時間を無駄にしないように、最後に解決されるのを見つけるだけです。 – nickdos
@nickdos - 投稿してから数時間後に解決することを計画していましたが、サイトに新しくなってからStack Overflowによると、投稿後8時間まで回答できません。私に思い出させてくれてありがとう。 – OrangeGrover