Discussion :

[forgottenspam]

bonjour a tous alors après que j'ai chercher sur le net sans la moindre solution je demande de l'aide a vous les expert.
Bon dans mon application cordova j'ai intégrer une costum map (MapQuest) qui contient des annonce (POI) a l'entour de mon emplacement j'ai réussi a afficher la map ansi qu'un tableau qui contient les annonce que j'ai ajouter dans ma map donc maintenant je veut just afficher chaque annonce dans une carrousel comme celle la :


puis une autre ici :



* c'est un slider qui va contenir les annonce

voici mon code html : (Slide)

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div id="carrousel">
	<div class="swiper-container">
		<div class="swiper-wrapper">
			<div class="swiper-slide red-slide">
				<div class="title">je veut la premier annonce ici</div>
			</div>
			<div class="swiper-slide blue-slide">
				<div class="title">ici annonce 2</div>
			</div>
			<div class="swiper-slide orange-slide">
				<div class="title">annonce n</div>
			</div>
		</div>
		<div class="pagination"></div>
	</div>
</div>

et voici le js de ma Map

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
var key = "Fmjtd%7Cluurnu0tn9%2Cbg%3Do5-9w8n90";
/*An example using jQuery's $(document).ready function to wait until the DOM is fully loaded and
$.ajax function to make an asynchronous HTTP (Ajax) request to the Search API Web Service.*/
$(document).ready(function() {
    /*Radius Search Using Your Own Custom Data Table*/
    $.ajax({
        url: 'http://www.mapquestapi.com/search/v2/radius',
        dataType: 'jsonp',
        crossDomain: true,
        data: {
            key: decodeURIComponent(key),
            origin: '36.793626,10.277790',                  /*origin of the radius search*/
            radius: 1,                             /*radius of search in kilometre*/
            hostedData: 'mqap.145112_hanglocationstest|'         /*the hosted data table you want to search along with query to narrow the results*/
        },
        success: function(data, textStatus, jqXHR) {
            var pois = new MQA.ShapeCollection();
            var html = '<table width="200px;"><thead><tr><th>Announcer_ID</th><th>Name</th><th>ADDRESS</th><th>Discription</th><th>DISTANCE (k)</th></tr>';
            /*Add POI markers and populate the search result table*/
            for (i=0;i<data.searchResults.length;i++) {
              var location = new MQA.Poi({lat:data.searchResults[i].shapePoints[0],lng:data.searchResults[i].shapePoints[1]});
              /*Change default POI icons to numbered icons*/
              var numberedPoi = new MQA.Icon('http://www.mapquestapi.com/staticmap/geticon?uri=poi-' + (i+1) + '.png',20,29);
              location.setIcon(numberedPoi);
              /*Populate the content within the InfoWindows*/
              location.setRolloverContent('<div style="width:200px; font:bold 14px Helvetica, Arial, sans-serif;">' + data.searchResults[i].fields.title_annonce + '</div>');
              location.setInfoContentHTML('<div style="width:200px; font:bold 14px Helvetica, Arial, sans-serif;">' + data.searchResults[i].fields.title_annonce + '</div>' + data.searchResults[i].fields.title_place + '<br />' + data.searchResults[i].fields.desc_id + ', CO ');
              pois.add(location);
              html += '<tr><td>' + data.searchResults[i].resultNumber + '</td><td>' + data.searchResults[i].fields.title_annonce + '</td><td>' + data.searchResults[i].fields.title_place + '</td><td>' + data.searchResults[i].fields.desc_id + '</td><td>'+ data.searchResults[i].distance + '</td></tr>';
            }
            html += '</table>';
            document.getElementById('searchResults').innerHTML = html;
            /*Create an object for options*/
            var options={
              elt:document.getElementById('map'),
              collection:pois
            };
            /*Construct an instance of MQA.TileMap with the options object*/
            window.map = new MQA.TileMap(options);
            MQA.withModule('largezoom','viewoptions','geolocationcontrol','insetmapcontrol','mousewheel', function() {
                    map.addControl(
					new MQA.LargeZoom(),
					new MQA.MapCornerPlacement(MQA.MapCorner.TOP_LEFT, new MQA.Size(5,5)));
                    map.enableMouseWheelZoom();
					map.addControl(new MQA.ViewOptions());
          map.addControl(
            new MQA.GeolocationControl(),
            new MQA.MapCornerPlacement(MQA.MapCorner.TOP_RIGHT, new MQA.Size(10,50))
          );
          /*Inset Map Control options */
          var options={
            size:{width:150, height:125},
            zoom:3,
            mapType:'map',
            minimized:true
          };
          map.addControl(
            new MQA.InsetMapControl(options),
            new MQA.MapCornerPlacement(MQA.MapCorner.BOTTOM_RIGHT)
          );
          map.enableMouseWheelZoom();
                });
          }
        });
      });

comment je fais pour afficher les annonces indépendamment dans les carrousel
j'attend votre réponse merci d'avance.