Erreur JavaScript sous Chrome, Safari et IE8

**hsii04** · 18/06/2010, 10h56

Bonjour,

Je suis en train de développer un service d'itinéraires sous IGN et Google Maps, IGN fonctionne parfaitement sous Firefox, IE6, IE7 et Opéra mais malheureusement sous Chrome, Safari et IE8, j'obtiens une erreur JavaScript que je n'arrive pas à résoudre.

Cette erreur est celle-ci :
Uncaught TypeError: undefined is not a function

Le code en question est celui-ci :

Code :

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

1
2
3
4
5
6
7
var routeControl = new OpenLayers.Control();
OpenLayers.Util.extend(routeControl, {
draw: function() {
this.point = new OpenLayers.Handler.Point(routeControl, { 'done': this.drawRoute });
            },//...
});

L'erreur se situe au niveau de "new OpenLayers.Handler.Point"

Vous pouvez visualiser le code à cette adresse :
http://www.quechua-club.com/testGGMaps.aspx

**dgrichard** · 19/06/2010, 13h14

C'est du pur OpenLayers, pas directement l'API Géoportail ...
Habituellement, c'est la méthode initialize qui fait le boulot.

Je préconise la définition d'une classe pour faire cela :

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
MyRouteControl= new OpenLayers.Class( OpenLayers.Control, {
    initialize: function(handler,options) {
       ...
        this.handlerOptions = OpenLayers.Util.extend(
            {/* options utiles */}, this.handlerOptions
        );
       this.handler= new handler(this, this.callbacks, this.handlerOptions);
    },
   draw() {
     this.point= ...
   }
});

var drawRoute= function() {};

var routeControl= new MyRouteControl(OpenLayers.Handler.Point,{
    handlerOptions:{
      'done': drawRoute
    }
  });

**hsii04** · 21/06/2010, 11h02

Merci de ta réponse,

J'ai essayé mais malheureusement ça ne fonctionnait pas.

J'ai essayé une autre méthode, la voici :

Code :

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

1
2
3
4
var routeControl = new OpenLayers.Control.DrawFeature(layer, OpenLayers.Handler.Point, {
callbacks : {
"done": function(point) {...}
}});

Et là j'obtiens la même erreur mais dans le fichier GeoPortal.js ligne 97

**dgrichard** · 21/06/2010, 18h18

Envoyé par hsii04

Merci de ta réponse,

J'ai essayé mais malheureusement ça ne fonctionnait pas.

J'ai essayé une autre méthode, la voici :

Code :

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

1
2
3
4
var routeControl = new OpenLayers.Control.DrawFeature(layer, OpenLayers.Handler.Point, {
callbacks : {
"done": function(point) {...}
}});

Et là j'obtiens la même erreur mais dans le fichier GeoPortal.js ligne 97

Qu'est-ce qui ne fonctionne pas avec la première méthode ?

J'arrive pas à utiliser l'exemple en ligne que tu fournis ...

**hsii04** · 22/06/2010, 18h08

J'ai essayé avec la class comme ceci :

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
var RouteControl = new OpenLayers.Class(OpenLayers.Control, {
    initialize: function(handler, options) {
        this.handlerOptions = OpenLayers.Util.extend(options, this.handlerOptions);
        this.handler = new handler(this, this.callbacks, this.handlerOptions);
    },
    draw: function() { this.point = this.handler; }
});


var me = this;
        var routeControl= new RouteControl(OpenLayers.Handler.Point, {
            handlerOptions: {
                'done': function(point) { me.createWayPoint(point); }
            }
        });

Mais malheureusement j'ai une erreur au niveau de :
this.handler = new handler(this, this.callbacks, this.handlerOptions);

**dgrichard** · 22/06/2010, 18h22

Envoyé par hsii04

J'ai essayé avec la class comme ceci :

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
var RouteControl = new OpenLayers.Class(OpenLayers.Control, {
    initialize: function(handler, options) {
        this.handlerOptions = OpenLayers.Util.extend(options, this.handlerOptions);
        this.handler = new handler(this, this.callbacks, this.handlerOptions);
    },
    draw: function() { this.point = this.handler; }
});


var me = this;
        var routeControl= new RouteControl(OpenLayers.Handler.Point, {
            handlerOptions: {
                'done': function(point) { me.createWayPoint(point); }
            }
        });

Mais malheureusement j'ai une erreur au niveau de :
this.handler = new handler(this, this.callbacks, this.handlerOptions);

Ok, j'ai été un peu vite dans mon code précédent : il faut enlever le new devant OpenLayers.Class, sinon le this n'est pas celui que l'on croit.

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
MyRouteControl= OpenLayers.Class( OpenLayers.Control, {
    initialize: function(handler,options) {
       ...
        this.handlerOptions = OpenLayers.Util.extend(
            {/* options utiles */}, this.handlerOptions
        );
       this.handler= new handler(this, this.callbacks, this.handlerOptions);
    },
   draw() {
     this.point= ...
   }
});

var drawRoute= function() {};

var routeControl= new MyRouteControl(OpenLayers.Handler.Point,{
    handlerOptions:{
      'done': drawRoute
    }
  });

Peux-tu retester ?

**hsii04** · 22/06/2010, 19h04

Ca ne fonctionne toujours pas.

l'erreur javascript se situe à ce niveau :
this.handler = new handler(this, this.callbacks, this.handlerOptions);

J'ai essayé également :

Code :

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

1
2
3
4
var routeControl = new OpenLayers.Control.DrawFeature(layer, OpenLayers.Handler.Point, { callbacks : { "done": function(point) {
            me.createWayPoint(point);
        }}});

Mais toujours cette même erreur

**dgrichard** · 23/06/2010, 01h10

Envoyé par hsii04

Ca ne fonctionne toujours pas.

l'erreur javascript se situe à ce niveau :
this.handler = new handler(this, this.callbacks, this.handlerOptions);

Justement, mon code s'appuyait sur la classe OpenLayers.Control.DrawFeature ...

As-tu bien remplacé les ... de la méthode initialize par :

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
        // concatenate events specific to vector with those from the base
        this.EVENT_TYPES =
            OpenLayers.Control.DrawFeature.prototype.EVENT_TYPES.concat(
            OpenLayers.Control.prototype.EVENT_TYPES
        );

        OpenLayers.Control.prototype.initialize.apply(this, [options]);
        this.callbacks = OpenLayers.Util.extend(
            {
                done: this.drawFeature,
                modify: function(vertex, feature) {
                    this.layer.events.triggerEvent(
                        "sketchmodified", {vertex: vertex, feature: feature}
                    );
                },
                create: function(vertex, feature) {
                    this.layer.events.triggerEvent(
                        "sketchstarted", {vertex: vertex, feature: feature}
                    );
                }
            },
            this.callbacks
        );
        this.layer = layer;
        var sketchStyle = this.layer.styleMap && this.layer.styleMap.styles.temporary;
        if(sketchStyle) {
            this.handlerOptions = this.handlerOptions || {};
            this.handlerOptions.layerOptions = OpenLayers.Util.applyDefaults(
                this.handlerOptions.layerOptions,
                {styleMap: new OpenLayers.StyleMap({"default": sketchStyle})}
            );
        }

ou à minima :

Code :

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

1
2
        OpenLayers.Control.prototype.initialize.apply(this, [options]);

sinon, le this de :

Code :

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

1
2
        this.handler = new handler(this, this.callbacks, this.handlerOptions);

risque de ne pas être défini.

Envoyé par hsii04

J'ai essayé également :

Code :

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

1
2
3
4
var routeControl = new OpenLayers.Control.DrawFeature(layer, OpenLayers.Handler.Point, { callbacks : { "done": function(point) {
            me.createWayPoint(point);
        }}});

Mais toujours cette même erreur

Dans ce cas, 'me', c'est windows ?
'layer' est bien défini ?

Pourrais-tu juste faire une page avec le code (sans tout le reste autour ...) ?

**hsii04** · 23/06/2010, 10h33

Toujours la même erreur

Voici une page où tu pourras tester :
http://www.quechua-club.com/testMaps.html
Le Javascript se trouve ici :
http://www.quechua-club.com/JS/ign/ign.maps.js

**dgrichard** · 24/06/2010, 01h13

Envoyé par hsii04

Toujours la même erreur

Voici une page où tu pourras tester :
http://www.quechua-club.com/testMaps.html
Le Javascript se trouve ici :
http://www.quechua-club.com/JS/ign/ign.maps.js

Ok, merci (je zieute dès mon retour sur le sol national)

**Viglino** · 25/06/2010, 10h29

Bonjour,

J'ai moi aussi des erreurs semblables depuis quelques temps, y compris avec les exemple du Geoportail qui utilisent l'API en mode extended...
(Géo-localisation, Geoportail...).

IE8 m'indique une erreur ligne 111 dans GeoportailExtended.js. Du coup OpenLayers n'est pas chargé...

Par contre la covisualisation du Geoportail continue à marcher (http://www.geoportail.fr/proxy-visu2D/geocatalogue)...

Si cela peut faire avancer le schimililimililimi...blik.

@+

**Viglino** · 25/06/2010, 12h26

Envoyé par Viglino

y compris avec les exemple du Geoportail qui utilisent l'API en mode extended... (Géo-localisation, Geoportail...).

Au temps pour moi...

j'avais activé l'affichage de compatibilité. Par contre pour mon site, pas moyen de le désactiver (pas de bouton)...
Il marchait en local mais pas en intranet... mais il y avait une option cachée : menu [Outils->Paramètre d'affichage de compatibilité] désactivez l'option afficher les sites intranet en affichage de compatibilité...

Cela n'arrange pas le problème d'hsii04, désolé...
@hsii04 : il semble que lors de la déclaration de styleMap, OpenLayers ne soit pas encore défini... As-tu essayé de reporter l'initialisation de styleMap dans la fonction initialize ?

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
var styleMap;

function MapIGN(mapID) {

    ...

    initialize: function() {
        styleMap = new OpenLayers.StyleMap({
                fillOpacity: 0.9,
               pointRadius: 10
       });
       styleMap.addUniqueValueRules('default', 'type', lookup);

   ...

Il y a toujours un message d'erreur mais la carte s'affiche...

@+

**dgrichard** · 26/06/2010, 12h31

Envoyé par Viglino

Il y a toujours un message d'erreur mais la carte s'affiche...

Juste pour information, cette discussion contient peut-être des éléments intéressant ...

**hsii04** · 28/06/2010, 15h57

il semble que lors de la déclaration de styleMap, OpenLayers ne soit pas encore défini... As-tu essayé de reporter l'initialisation de styleMap dans la fonction initialize ?

J'ai essayé mais rien n'y fait.

Voici le détail de l'erreur :

Détails de l’erreur de la page Web

Agent utilisateur : Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 2.0.50727; .NET CLR 3.0.04506.648; .NET CLR 3.5.21022; .NET CLR 1.1.4322; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729)
Horodateur : Mon, 28 Jun 2010 12:57:22 UTC

Message*: Object expected
Ligne*: 111
Caractère*: 237727
Code*: 0
URI*: http://api.ign.fr/geoportail/api/js/1.0/Geoportal.js

**dgrichard** · 28/06/2010, 16h03

Envoyé par hsii04

J'ai essayé mais rien n'y fait.

Voici le détail de l'erreur :

Détails de l’erreur de la page Web

Agent utilisateur : Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 2.0.50727; .NET CLR 3.0.04506.648; .NET CLR 3.5.21022; .NET CLR 1.1.4322; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729)
Horodateur : Mon, 28 Jun 2010 12:57:22 UTC

Message*: Object expected
Ligne*: 111
Caractère*: 237727
Code*: 0
URI*: http://api.ign.fr/geoportail/api/js/1.0/Geoportal.js

L'erreur tombe là :

Code :

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

1
2
3
this.handlerOptions=this.handlerOptions||{};
__________________^

Je regarderai ton code ...

**hsii04** · 30/06/2010, 12h37

Pour info, cette erreur JS, n'apparaît pas une fois sur 100 sur Chrome, c'est à dire que une fois sur 100 mon appli fonctionne, c'est très aléatoire.

**dgrichard** · 04/07/2010, 13h26

Envoyé par hsii04

Voici une page où tu pourras tester :
http://www.quechua-club.com/testMaps.html

Petite question sur ta page de tests :

Code :

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

1
2
3
    [1]<script type="text/javascript" src="http://api.ign.fr/geoportail/api?v=1.0&key=1609652201214262478&instance=VISU&includeEngine=true"></script> 
    [2]<script type="text/javascript" src="http://api.ign.fr/geoportail/api/js/1.0/GeoportalExtended.js"></script>

[1] tu charges l'API en mode standard avec l'inclusion dans ta page du Geoportal.js - en mode standard, OpenLayers.Handler.Point n'existe pas ...

[2] tu charges l'API en mode étendu où OpenLayers.Handler.Point existe !

[1]=> lors du chargement de l'API, l'évènement onload sera appelé, si [2] n'est pas chargé, alors l'appel :

Code :

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

1
2
this.handler = new handler(this, this.callbacks, this.handlerOptions);

va échouer (handler est indéfini ...)

Pourrais-tu :

* modifier v=1.0 en v=1.0-e ;
* modifier includeEngine=true en includeEngine=false.

et re-tester ?

Erreur JavaScript sous Chrome, Safari et IE8

IGN API Géoportail

Discussions similaires

Partager

Partager