私はこのコード、userMarker を使用して Google マップを作成するために使用する同じ JavaScript 関数と、マップの初期化時にロードされる同じアイコンを持っています。アイコンの数とそれらの位置と情報ウィンドウのデータは不明であり、すべてのデータは外部の json ファイルから取得されます
これはコードです:
var oggetto = $.getJSON("eventi.json", function (data) {
oggetto = data;
});
function initialize() {
var dueTorri = new google.maps.LatLng(44.493392, 11.346129);
var myOptions = {
zoom: 14,
center: dueTorri,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("main"), myOptions);
var userMarker = new google.maps.Marker({
map: map,
draggable: true,
title: "Tu sei qui",
position: dueTorri,
icon: "marker/marker_eccoti.png"
});
google.maps.event.addListener(userMarker, 'dragend', function (event) {
var newLatLong = userMarker.getPosition()
map.panTo(newLatLong);
var lati = newLatLong.lat();
var longi = newLatLong.long();
});
setIcons(map, oggetto);
}
function setIcons(map, dati) {
for (var i = 0; i < dati.events.length; i++) {
var areaEventi = dati.events[i];
var idEvento = areaEventi.event_id;
var tipo = areaEventi.type.type;
var sottotipo = areaEventi.type.subtype;
var descrizioni = new Array();
for (var j = 0; j < areaEventi.description.length; j++) {
descrizioni[j] = areaEventi.description[j];
}
var tempoIniziale = areaEventi.start_time;
var tempoUltima = areaEventi.freshness;
var stato = areaEventi.status;
var attendibilita = areaEventi.reliability;
var numeroNotifiche = areaEventi.number_of_notifications;
var lat_luogo = areaEventi.locations.lat;
var lng_luogo = areaEventi.locations.lng;
var myLatLng = new google.maps.LatLng(lat_luogo, lng_luogo);
if (tipo == "problemi_ambientali") {
var icon_image = {
url: 'marker/marker_ambiente.png'
};
}
if (tipo == "reati") {
var icon_image = {
url: 'marker/marker_reato.png'
};
}
if (tipo == "eventi_pubblici") {
var icon_image = {
url: 'marker/marker_evento.png'
};
}
if (tipo == "emergenze_sanitarie") {
var icon_image = {
url: 'marker/marker_soccorsi.png'
};
}
if (tipo == "problemi_stradali") {
var icon_image = {
url: 'marker/marker_strada.png'
};
}
var icone = new google.maps.Marker({
position: myLatLng,
map: map,
icon: icon_image,
title: tipo,
zIndex: i
});
var contentString = '<div>' +
'<h3 id="tipologia">' + tipo + '</h3>' +
'<h4 id="subtipo">' + sottotipo + '</h4>' +
'<table>' +
' <tr>' +
' <td id="commento1">' + descrizioni[0] + '</td>' +
'</tr>' +
' <tr>' +
'<td id="commento2">' + descrizioni[1] + '</td>' +
'</tr>' +
'<tr>' +
'<td id="commento3">' + descrizioni[2] + '</td>' +
'</tr>' +
'<tr>' +
'<td id="commento4">' + descrizioni[3] + '</td>' +
'</tr>' +
'<tr>' +
'<td id="commento5">' + descrizioni[4] + '</td>' +
'</tr>' +
'</table>' +
'<form method="post" action="">' +
'<p><input type="radio" name="status" value="Open" />Open<input type="radio" name="status" value="Closed" />Closed</p>' +
'<p>Descrizione:<input type="text" name="descrizione" /></p>' +
'<p><input type="submit" name="submit" value="Aggiorna" /></p>' +
'</form>' +
'</div>';
var infowindow = new google.maps.InfoWindow();
bindInfoW(icone, contentString, infowindow);
function bindInfoW(icone, contentString, infowindow) {
google.maps.event.addListener(icone, 'click', function () {
infowindow.setContent(contentString);
infowindow.open(map, icone);
});
}
}
}
google.maps.event.addDomListener(window, 'load', initialize);
これは2つのイベントを持つjsonの例です:
{
"request_time": 1368095111,
"result": "Messaggio di servizio",
"from_server": "",
"events": [
{
"event_id": "902438",
"type": {
"type": "problemi_stradali",
"subtype": "incidente"
},
"description": ["ommioddio", "come na catapulta", "", "", ""],
"start_time": 1368045665,
"freshness": 1368085800,
"status": "open",
"reliability": 0.8,
"number_of_notifications": 2,
"locations": {
"lat": 37.42291810,
"lng": -122.08542120
}
},
{
"event_id": "459459",
"type": {
"type": "problemi_stradali",
"subtype": "incidente"
},
"description": ["mi hanno tamponato", "dottore chiami un dottore", "che guaio", "descr4", "descr5"],
"start_time": 1368105698,
"freshness": 1368106058,
"status": "open",
"reliability": 1.0,
"number_of_notifications": 4,
"locations": {
"lat": 37.42291810,
"lng": -122.08542120
}
}
]
}
私はeasyPhPを使用してhtmlファイルをロードしますが、ロードするとアイコン以外のすべてが表示されます..何が問題なのか知っている人はいますか? ありがとう