Ajouter markers à une image static

**Msysteme** · 10/06/2014, 13h02

Bonjour, je compte afficher mes itineraires et mes markers dans une image static :

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
function showImage() {
    var sHtml = '';
    var oDoc = window.open('', 'PRINT_MAP'); var strHTML = '';
 
    // Donnees carte
    var centre = map.getCenter(),
          zoom = map.getZoom(),
          size = map.getDiv(),
          maptype = map.getMapTypeId();
    // init URL de l'image
    var imageURL = ['http://maps.googleapis.com/maps/api/staticmap?'];
    imageURL.push('center=' + centre.toUrlValue());
    imageURL.push('zoom=' + zoom);
    imageURL.push('size=' + size.offsetWidth + 'x' + size.offsetHeight);
    if (maptype !== 'roadmap') {
        imageURL.push('maptype=' + maptype);
    }
    //================= Si markers===================================//
    if (markers.length != 0) {
            marker = new Array()
            for (var i = 0; i < markers.length; i++) {
                    var pointCenter = new google.maps.LatLng(
                            parseFloat(markers[i].getAttribute("latSecteur")),
                            parseFloat(markers[i].getAttribute("lngSecteur"))
                            );
                    var pointMarker = new google.maps.LatLng(
                            parseFloat(markers[i].getAttribute("lat")),
                            parseFloat(markers[i].getAttribute("lng"))
                            );
                    var position = markers[i].getAttribute("position");
                    var point = new google.maps.LatLng(
                            parseFloat(markers[i].getAttribute("lat")),
                            parseFloat(markers[i].getAttribute("lng")));
                    marker.push('markers=' + point + '');
            }
                marker = marker.join('&');
                imageURL.push(marker);
            //document.location.href = "http://maps.googleapis.com/maps/api/staticmap?center=" + pointCenter + "&zoom=7&size=600x380&maptype=roadmap&" + marker + "&sensor=false";
    }
    //===============================================================//
 
 
    //================= Si itineraire===============================//
    if (directionsDisplay.directions) {
        var oRecup = directionsDisplay.directions.routes[0];
 
        var i, nbLegs = oRecup.legs.length;
        // marker de debut
        imageURL.push('markers=label:A|' + oRecup.legs[0].start_location.toUrlValue());
        // marker de fin
        imageURL.push('markers=label:B|' + oRecup.legs[nbLegs - 1].end_location.toUrlValue());
        // traitement des wayPoints
        for (i = 1; i < nbLegs; i++) {
            imageURL.push('markers=color:green|' + oRecup.legs[i].start_location.toUrlValue());
        }
        // l'itinÃ©raire encrytÃ©
        imageURL.push('path=weight:6|color:0x0066ff80|enc:' + oRecup.overview_polyline.points);
 
    }
        // La finalisation de l'image constituée
        //imageURL.push('scale=2');
        imageURL.push('sensor=false');
        imageURL = imageURL.join('&');
        // affiche l'image
        //oImage.src = imageURL;
 
        sHtml += '<!doctype html><html><head><h4 style="text-align:center">Station de services de la ville de KENITRA</h4>';
        sHtml += '</head><body onload="self.print()">';
        sHtml += '<img src="' + imageURL + '">';
        sHtml += strHTML;
        sHtml += '</body></html>';
        oDoc.document.open();
        oDoc.document.write(sHtml);
        oDoc.document.close();
        oDoc.focus();
 
}

pour l'itineraire, j'ai suivi l'essai libre de Nosmoking ca marche et mes markers non plus, j'ai trouvé des exemple sur le forum mais j'ai pas reussi a resoudre mes probleme, veuillez m'aider

**NoSmoking** · 10/06/2014, 19h37

Bonjour,
dans ton code je dois admettre que j'ai du mal à comprendre ce que tu cherches à faire avec ce bout de code

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
    //================= Si markers===================================//
    if (markers.length != 0) {
            marker = new Array()
            for (var i = 0; i < markers.length; i++) {
                    var pointCenter = new google.maps.LatLng(
                            parseFloat(markers[i].getAttribute("latSecteur")),
                            parseFloat(markers[i].getAttribute("lngSecteur"))
                            );
                    var pointMarker = new google.maps.LatLng(
                            parseFloat(markers[i].getAttribute("lat")),
                            parseFloat(markers[i].getAttribute("lng"))
                            );
                    var position = markers[i].getAttribute("position");
                    var point = new google.maps.LatLng(
                            parseFloat(markers[i].getAttribute("lat")),
                            parseFloat(markers[i].getAttribute("lng")));
                    marker.push('markers=' + point + '');
            }
                marker = marker.join('&');
                imageURL.push(marker);
            //document.location.href = "http://maps.googleapis.com/maps/api/staticmap?center=" + pointCenter + "&zoom=7&size=600x380&maptype=roadmap&" + marker + "&sensor=false";
    }
    //===============================================================//

- ces marqueurs font-ils partie de l'itinéraire, si oui il ne sont pas à traiter à part car faisant partie des waitPoints.
- le plus important à comprendre c'est que tu dois constituer une CHAINE qui sera interprétée par Google et lorsque tu écris marker.push('markers=' + point + ''); tu vas obtenir un truc du style "markers=[object]'' et non les valeurs latitude/longitude. Il te faut donc simplement mettre la valeur de la latitude et celle de la longitude séparées par une virgule.

**Msysteme** · 10/06/2014, 22h44

mes markers sont séparés de mes itinéraires, ces derniers s'ajoute a mon image sans probleme.

mes markers sont stockés dans un tableau 'markers', je dois ajouter ce tableau a mon image, c'est tout

voila j'ai reussi a le faire :

Code :

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

1
2
3
4
5
6
7
8
9
if (markers.length != 0) {
        marker = new Array();
 
            for (var i = 0; i < markers.length; i++) {
                marker.push('markers=color:red|' + markers[i].position.lat().toFixed(6) + ',' + markers[i].position.lng().toFixed(6));
            }
                marker = marker.join('&');
                imageURL.push(marker);
    }

mais mes infos windows ne s'affiche pas

**NoSmoking** · 14/06/2014, 01h09

...mais mes infos windows ne s'affiche pas

il n'est nulle part fait référence aux infoWindows dans la documentation.

Static Maps API V2 Developer Guide.

Ajouter markers à une image static

APIs Google

Discussions similaires

Partager

Partager