1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
|
var carte_charge = false; // variable qui détermine si la carte google est déjà chargé, ici à non car pas encore
var tableau_oeuvres = []; // tableau qui sotck notre liste de oeuvres
var oeuvre = null; // ici, variable contenant un seul oeuvres (pour la fiche)
var ma_lat = ''; // la variable ma_lat contiendra si on a phonegap compatible notre latitude
var ma_lon = ''; // la variable ma_lon contiendra si on a phonegap compatible notre longitude
var liste_theme = '';
var monumentId = '';
[…]
function chargeFiche(appli) // fonction d'affichage de l'écran fiche propre à un theme
{
for (var i = 0; i < tableau_oeuvres.length; i++) // on parcour notre tableau de oeuvre
{
if (tableau_oeuvres[i].id == appli) // si l'élément du tableau à sa propriété "id" identique à la valeur de resto
{
oeuvre = tableau_oeuvres[i]; // on récupère dans notre variable oeuvre l'élément du tableau au complet
monumentId = oeuvre.id;
// on charge dans les différentes zone HTML les valeurs de notre variable oeuvre
$('#fiche_url').attr('href', oeuvre.url); // ici, attr() permet de glisser l'adresse URL dans notre balise a (<a href="url")
$('#fiche_addr').text(oeuvre.addr); // ici, l'adresse du oeuvre est en texte d'ou l'usage de text()
$('#fiche_nom').text(oeuvre.nom); // pareil
$('#fiche_telephone').text(oeuvre.tel); // pareil
$('#fiche_image').attr('src', 'data/img/' + oeuvre.img); // comme pour la balise a, img elle a besoin de "src" pour l'affichage de l'image
$('#fiche_infos').text(oeuvre.infos); // toujours du texte
$('#map').unbind()
}
}
}
function chargeGeo() // fonction d'affichage de la carte Google Maps avec les points géolocalisé des oeuvres
{
$('#map').bind()
$('#map').gmap( // ce composant est basé sur le plugin jquery.ui.map.js cité dans le <head>
{
'disableDefaultUI': 'true', // on désactive les contrôles de Google Maps
'callback': function() // le callback est la fonction appelé lorsque la carte Google Maps est parfaitement affiché (une fois que.)
{
var self = this;
self.addMarker( // on ajoute un Marker pour le repaire (icone rouge de positionnement propre à Google Maps)
{
'position': new google.maps.LatLng(00.0000, 0.00000), // on ajoute la latitude, longitude à l'objet Google Maps de l'ESTEN
'title': 'repair',
'icon': 'images/repair.png',
'bounds': false // bounds ici permet de dire à Google Maps de centrer sur notre point, si plusieurs, il ferra en sorte que TOUS soit visible à l'écran en jouant sur la position et le zoom
});
$.each(tableau_oeuvres, function(index, item) // pour chaque oeuvre, on récupère l'index (sa position dans l'objet) et l'objet oeuvre lui même (item)
{
if (monumentId == item.id)
{
self.addMarker( // on ajoute un Marker (icone rouge de positionnement propre à Google Maps)
{
'position': new google.maps.LatLng(item.lat, item.lng), // la position est un objet Google Maps appelé LatLng qu'on affecte depuis notre item (objet oeuvre courant)
'title': item.id,
'bounds': true // bounds ici permet de dire à Google Maps de centrer sur notre point, si plusieurs, il ferra en sorte que TOUS soit visible à l'écran en jouant sur la position et le zoom
});
}
});
if (ma_lat != '' && ma_lon != '') // si mes informations de géolocalisation ne sont pas vide
{
self.addMarker( // on ajoute un Marker (icone rouge de positionnement propre à Google Maps)
{
'position': new google.maps.LatLng(ma_lat, ma_lon), // on ajoute notre latitude, longitude à l'objet Google Maps
'animation': google.maps.Animation.DROP,
'title': 'Vous êtes ici!',
'draggable': false,
'icon': 'images/pin.png',
'bounds': true // bounds ici permet de dire à Google Maps de centrer sur notre point, si plusieurs, il ferra en sorte que TOUS soit visible à l'écran en jouant sur la position et le zoom
})
}
}
});
carte_charge = false; // on dit que la carte est chargé et ça permet de ne pas repasser dans la création de la carte et la lecture du json à chaque clique sur le bouton
}
$.ajax( // on lance un appel ajax pour récupéré notre liste de oeuvres au format xml
{
type: 'GET', // en mode GET
url: 'data/appli.xml', // sur notre fichier XML
dataType: "xml", // et on informe jQuery que ce qui est reçu est du XML
complete: function(data, status) // lorsque c'est terminé
{
tableau_oeuvres = []; // on réinitilise notre tableau de oeuvres
var carte_charge = false;
$('#map').off();
var tours = $.parseXML(data.responseText); // le résutat XML est mis dans notre variable
$('#liste_POI').html(''); // remise à 0 de la liste (id liste_POI)
$(tours).find('oeuvre').each(function (index, item) // on parcours nos noeud "oeuvre" et pour chacun on on ajoute un élément dans la liste contenant image, nom et adresse
{
tableau_oeuvres.push( // on ajoute dans notre tableau de oeuvre le oeuvre actuellement parcouru
{
id: $(item).find('id').text(), // l'id
nom: $(item).find('name').text(), // le nom
lat: $(item).find('lat').text(), // le nom
lng: $(item).find('lng').text(), // le nom
img: $(item).find('photoUrl').text(), // l'image
addr: $(item).find('laddr').text(), // l'adresse
infos: $(item).find('infos').text(), // les infos
url: $(item).find('actual_url').text(), // l'url
tel: $(item).find('phones').text() // le numéro de téléphone
});
var html = '<li style="width:45%; text-align:center; display:inline-block; margin-bottom:5%;">'; // ici, le format de liste est imposé par jQuery Mobile (format avec image)
html += ' <a href="#">';
html += ' <input type="hidden" name="id" value="' + $(item).find('id').text() + '">'; // on ajoute notre ID dans un champ invisible
html += ' <input type="hidden" name="theme" value="' + $(item).find('theme').text() + '">'; // on ajoute notre ID dans un champ invisible
html += ' <img style="border-radius:20px;" src="data/img/' + $(item).find('photoUrl').text() + '">'; // l'image
html += ' <br/><h4>' + $(item).find('name').text() + '</h4>'; // le nom
html += ' </a>';
html += '</li>';
$('#liste_POI').append(html); // on ajoute le html généré dans notre liste (ul)
});
$('#liste_POI').find('li[role!="heading"]').each(function (index, item) // on recherche tout nos "li" que nous venons de généré dans notre liste (ul)
{
$(item).on('click', function (e) // et lorsqu'on clique dessus
{
e.preventDefault(); // on annule l'action par défaut (<a href="#")
chargeFiche($(item).find('input[name="id"]').val());
window.location.hash = '#fiche'; // et on va sur la page qui n'existe pas (fiche-) qui va appelé l'évènement chargeEvent()
});
});
$('.button-liste').on('click', function (e)
{
liste_theme = $(this).attr('tag');
});
window.location.hash = '#home'; // changement de HASH (et donc, déclanchement de la fonction)
}
});
}); |
Reset fonction Google Map javascript/HTML 5 PhoneGap
Répondre avec citation
Partager