Google Maps API V3 と JQuery を使用するプロジェクトに取り組んでいます。基本的に、プログラムは、ユーザーが選択した時間に応じてデータベースからアイテムを呼び出し、これらのアイテムをマーカーとしてマップに表示します。
この時点までは正常に動作しています。ユーザーが時間を変更したときにマーカーをクリアして、マップ上に無関係なマーカーが残らないようにしたいと考えています。
ただし、clearLocations()
関数を JQuery 時間選択要素のいずれかにアタッチすると、エラーが発生します。
オブジェクト # にはメソッド 'setMap'` がありません。
呼び出されたときにエラーをスローしている Google マップの JavaScript を次に示します。
function clearLocations() {
if (markers) {
for (i in markers) {
markers[i].setMap(null);
}
markers.length = 0;
}
}
スライダーが動かされたときにそれを呼び出す JQuery 関数は次のとおりです。
function slideTime(event, ui){
var val0 = $("#time-slider").slider("values", 0),
val1 = $("#time-slider").slider("values", 1),
chosenDate = Math.round(Date.parse($('#datepicker').datetimepicker('getDate')) / 1000),
minrange = chosenDate + (val0 * 60),
maxrange = chosenDate + (val1 * 60),
timedifference = (maxrange - minrange)/60,
fulldate = new Date(minrange * 1000),
enddate = new Date(maxrange * 1000),
fdate = fulldate.getDate(),
fmonth = fulldate.getMonth()+1,
fyear = fulldate.getFullYear(),
edate = enddate.getDate(),
emonth = enddate.getMonth()+1,
eyear = enddate.getFullYear(),
fhours = fulldate.getHours(),
fminutes = fulldate.getMinutes(),
ehours = enddate.getHours(),
eminutes = enddate.getMinutes();
if (fmonth < 10) {
fmonth = "0" + fmonth; }
if (fdate < 10) {
fdate = "0" + fdate; }
if (fhours < 10) {
fhours = "0" + fhours; }
if (fminutes < 10) {
fminutes = "0" + fminutes; }
if (emonth < 10) {
emonth = "0" + emonth; }
if (edate < 10) {
edate = "0" + edate; }
if (ehours < 10) {
ehours = "0" + ehours; }
if (eminutes < 10) {
eminutes = "0" + eminutes; }
$("#final-from-value").text(fdate + '/' + fmonth + '/' + fyear + ' ' + fhours + ':' + fminutes);
$("#final-to-value").text(edate + '/' + emonth + '/' + eyear + ' ' + ehours + ':' + eminutes);
$("#hidden-start").val(minrange);
$("#hidden-finish").val(maxrange);
clearLocations();
searchMap();
}
また、変更時に関数を呼び出す datetimepicker もあります。
<input id="datepicker" name="date" type="text" onchange="slideTime(); searchMap(); clearLocations()" />
考えられることはすべて試しましたが、正直なところ、何が原因なのかわかりません。助けてくれてありがとう。また、他に見るべきものがあれば教えてください。
更新 searchMap() 関数を呼び出さない場合、エラーはありませんが、場所をクリアした後に searchMap() が呼び出されると、それは気に入りません。
これが searchMap() のコードです
function searchMap() {
//clearLocations();
var getstart = $("#hidden-start").val();
var getfinish = $("#hidden-finish").val();
// Change this depending on the name of your PHP file
downloadUrl("php/xml.php?start=" + getstart + "&finish=" + getfinish, function(data) {
var xml = data.responseXML;
markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("title");
var address = markers[i].getAttribute("url");
var priority = parseInt(markers[i].getAttribute("priority"));
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var html = "<b>" + name + "</b> <br/>" + address;
//var icon = customIcons[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
zIndex: priority,
icon: iconType[priority],
});
bindInfoWindow(marker, map, infoWindow, html);
}
});
}