Mapquest + carrousel

**forgottenspam** · 06/11/2014, 15h47

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 :
Nom : Sans titre.png
Affichages : 198
Taille : 69,6 Ko

Nom : Sans titre.png
Affichages : 198
Taille : 69,6 Ko

puis une autre ici :

Nom : Sans titre1.png
Affichages : 185
Taille : 71,1 Ko

* 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.

**NoSmoking** · 10/11/2014, 14h21

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.

**forgottenspam** · 12/11/2014, 11h25

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 :

Nom : 15.jpg
Affichages : 173
Taille : 21,1 Ko

Nom : 15.jpg
Affichages : 173
Taille : 21,1 Ko

slide 2 :

Nom : 16.jpg
Affichages : 162
Taille : 22,6 Ko

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

Nom : Sdd.png
Affichages : 184
Taille : 397,1 Ko

**danielhagnoul** · 12/11/2014, 22h38

Bonsoir

Une courte recherche avec Google montre qu'il y a au moins deux plugins jQuery utilisables sous Cordova :

**forgottenspam** · 13/11/2014, 10h13

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

**forgottenspam** · 17/11/2014, 11h11

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 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
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 css :

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
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 :

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
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 :

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
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();
 
                });
          }
        });
 
      });

Mapquest + carrousel

jQuery

Vue hybride

Discussions similaires

Partager

Partager