Mapquest + carrousel

Version imprimable

2 pièce(s) jointe(s)

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 :
Pièce jointe 160765

puis une autre ici :

Pièce jointe 160766

* c'est un slider qui va contenir les annonce

voici mon code html : (Slide)

Code:

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:

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.

10/11/2014, 14h21
NoSmoking

Bonjour,
a te lire on a un peu de mal à comprendre ou est ce que tu es bloqué!

Essaies de synthétiser ton problème et si tu avais une page en ligne pour que l'on puisse se rendre compte du rendu final ce serait un plus.
12/11/2014, 11h25
forgottenspam

3 pièce(s) jointe(s)

bonjour merci d'avoir répondu au fait je veut afficher le résultat sous forme de slider par exemple le premier slider va afficher une annonce le deuxième une autre annonce et ainsi de suite

dans le code que j'ai mit j'ai ressui a afficher les annonce dans un tableau juste pour tester

annonce 1| test1 | shoping | a 2k
annonce 2| test2 | free | a 3k

le but de l'application que je suis entrain de crée est de détecter la position de l'utilisateur et afficher des annonce autour de lui dans un rayon d'un kilomètre

je veut un résultat comme ça :

slide 1 :

Pièce jointe 161253

slide 2 :

Pièce jointe 161255

et pour finir voici la base de donnée de mapquest qui contient les annonce que j'ai crée sur ma propre map :

Pièce jointe 161256
12/11/2014, 22h38
danielhagnoul
Bonsoir

Une courte recherche avec Google montre qu'il y a au moins deux plugins jQuery utilisables sous Cordova :
1. FlexSlider
2. pagingSlider
13/11/2014, 10h13
forgottenspam

Merci pour les slider mais je voulez s'avoir comment je vais faire une boucle qui me permet d'afficher les annonce de mapquest sur les slider par exemple si j'ai 3 annonce sur le datamanager de mapquest l'application affiche 3 slider si j'ai 4 annonce l'application affiche 4 slider

après des recherche j'ai trouver un slider de type liste et avec ce slider je peut afficher les annonce mais mon probleme c'est que les annonce s'affiche l'une a coté de l'autre je crois que le code Js du slider ne marche plus quand j'ai r'ajouter le code de m'a map alors svp comment je peut fusionner les deux code pour que le slider ne perd pas son animation
voici le code :

Code Html :

Code:

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
<head>
<meta charset="UTF-8">
<meta name="robots" content="noindex">
<link rel="stylesheet" href="css/index.css" type="text/css"/>
 
</head>
<body>
<h1>Incredibly Basic Slider</h1>
 
<div id='searchResults' align="center" ></div>
 
 
<div class="slider_option">
  <input type="checkbox" id="checkbox">
  <label for="checkbox">Autoplay Slider</label>
</div>
 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/indexmap.js"></script>
<script src="js/index.js" type="text/javascript"></script>
 
<!-- code qui appartient a mapquest -->
<script src="http://www.mapquestapi.com/sdk/js/v7.0.s/mqa.toolkit.js?key=Fmjtd%7Cluurnu0tn9%2Cbg%3Do5-9w8n90"></script>
<script src="http://www.mapquestapi.com/search/v2/search?key=Fmjtd%7Cluurnu0tn9%2Cbg%3Do5-9w8n90&callback=renderBasicSearchNarrative&maxMatches=10&shapePoints=36.793602,10.275834"></script>
<script src="http://www.mapquestapi.com/search/v2/radius?key=Fmjtd%7Cluurnu0tn9%2Cbg%3Do5-9w8n90&callback=renderBasicSearchNarrative&maxMatches=10&origin=36.793626,10.277790&hostedData=mqap.145112_hanglocationstest&radius=1&units=k"></script>
</body>

Code css du slider :

Code:

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
@import url(<a href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600);" target="_blank">http://fonts.googleapis.com/css?fami...:400,300,600);</a>	
 
html {
  border-top: 5px solid #fff;
  background: #58DDAF;
  color: #2a2a2a;
}
 
html, body {
  margin: 0;
  padding: 0;
  font-family: 'Open Sans';
}
 
h1 {
  color: #fff;
  text-align: center;
  font-weight: 300;
}
 
#slider {
  position: relative;
  overflow: hidden;
  margin: 20px auto 0 auto;
  border-radius: 4px;
}
 
#slider ul {
  position: relative;
  margin: 0;
  padding: 0;
  height: 200px;
  list-style: none;
}
 
#slider ul li {
  position: relative;
  display: block;
  float: left;
  margin: 0;
  padding: 0;
  width: 500px;
  height: 300px;
  background: #ccc;
  text-align: center;
  line-height: 300px;
}
 
a.control_prev, a.control_next {
  position: absolute;
  top: 40%;
  z-index: 999;
  display: block;
  padding: 4% 3%;
  width: auto;
  height: auto;
  background: #2a2a2a;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 18px;
  opacity: 0.8;
  cursor: pointer;
}
 
a.control_prev:hover, a.control_next:hover {
  opacity: 1;
  -webkit-transition: all 0.2s ease;
}
 
a.control_prev {
  border-radius: 0 2px 2px 0;
}
 
a.control_next {
  right: 0;
  border-radius: 2px 0 0 2px;
}
 
.slider_option {
  position: relative;
  margin: 10px auto;
  width: 160px;
  font-size: 18px;
}

Code js du slider :

Code:

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
jQuery(document).ready(function ($) {
 
  $('#checkbox').change(function(){
    setInterval(function () {
        moveRight();
    }, 3000);
  });
 
	var slideCount = $('#slider ul li').length;
	var slideWidth = $('#slider ul li').width();
	var slideHeight = $('#slider ul li').height();
	var sliderUlWidth = slideCount * slideWidth;
 
	$('#slider').css({ width: slideWidth, height: slideHeight });
 
	$('#slider ul').css({ width: sliderUlWidth, marginLeft: - slideWidth });
 
    $('#slider ul li:last-child').prependTo('#slider ul');
 
    function moveLeft() {
        $('#slider ul').animate({
            left: + slideWidth
        }, 200, function () {
            $('#slider ul li:last-child').prependTo('#slider ul');
            $('#slider ul').css('left', '');
        });
    };
 
    function moveRight() {
        $('#slider ul').animate({
            left: - slideWidth
        }, 200, function () {
            $('#slider ul li:first-child').appendTo('#slider ul');
            $('#slider ul').css('left', '');
        });
    };
 
    $('a.control_prev').click(function () {
        moveLeft();
    });
 
    $('a.control_next').click(function () {
        moveRight();
    });
 
});

Code js de ma map :

Code:

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
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 = '<div id="slider"><a href="#" class="control_next">>></a><a href="#" class="control_prev"><</a><ul>'; /* 200<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=1;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);
			  /*<td>' + data.searchResults[i].resultNumber + '</td>*/
 
              html += '<li><tr><td align="center">' + data.searchResults[i].fields.title_annonce + '</td></tr><tr><td align="center">' + data.searchResults[i].fields.desc_id + '</td></tr><tr><td align="center">' + data.searchResults[i].fields.title_place + '</td></tr><tr><td align="center"><b>A </b>'+ data.searchResults[i].distance + '<b> K</b></td></tr></li>';
            }
 
            html += '</ul></div>';
 
            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();
 
                });
          }
        });
 
      });

19/11/2014, 10h18
forgottenspam

Aucun développeur pour m'aider !!
19/11/2014, 10h27
Bovino

Ca dépend, c'est payé combien ? :mrgreen:
20/11/2014, 11h42
forgottenspam

je suis en Tunisie et malheureusement en a pas la possibilité de payer en ligne ou en €uro =(
20/11/2014, 11h46
forgottenspam

Citation:

Envoyé par Bovino

Ca dépend, c'est payé combien ? :mrgreen:

et d'ailleurs c'est projet de pfe c'est pour les études en master informatique

bon après des recherche sans résultat j'ai essayer de mettre de l'ajax dans ajax pour envoyer le contenu récupérer via jsonp vers un fichier php pour enregistrer tous sur ma base données
voici l'a requête ajax :
Code:

1 2 3 4 5 6 7 8 9 10 var datastring ='1stfield'+data.searchResults[i].fields.title_annonce+'&2ndfield'+data.searchResults[i].fields.desc_id+'&3rdfield'+data.searchResults[i].fields.title_place+'&4thfield'+data.searchResults[i].distance; $.ajax({ url: '..Connections/annonces.php', dataType: 'jsonp', data: datstring, success: function(data, textStatus, jqXHR) { } });
le problème c'est que j'arrive pas a récupérer les données 1stfield 2ndfield ect ...
je crois que y'a un truc qui cloche