2 votes

Gmaps API - De nombreux marqueurs avec icône et étiquette se chargent lentement sur mobile

J'utilise le API Google Maps pour afficher de nombreux marqueurs (des milliers). Le chargement de ces marqueurs fonctionne bien si je n'ajoute pas d'étiquette et d'icône personnalisées au marqueur (quelques secondes), mais lorsque j'ajoute une étiquette et une icône personnalisées aux marqueurs, ils se chargent très lentement sur un ordinateur de type téléphone portable (environ 25 secondes sur Android). J'ai créé un codepen pour illustrer le problème : https://codepen.io/anon/pen/qXqpjN Dans ce codepen, 5000 marqueurs sont générés de manière aléatoire. Lorsque vous ouvrez ce codepen, il se charge rapidement sur un ordinateur mais lentement sur un téléphone portable. J'utilise le code suivant pour créer chaque marqueur :

var marker = new google.maps.Marker({
    position: myLatLng,
    label: {
        color: '#000000',
        fontWeight: 'bold',
        text: 'text',
    },
    icon: {
        labelOrigin: new google.maps.Point(24, 14),
        url: 'http://reistip.nl/assets/img/gmap/icon/emoticons/icongreenbigprice.png',
        size: new google.maps.Size(50, 60),
        origin: new google.maps.Point(0, 0),
        anchor: new google.maps.Point(11, 40),
    },

});

Si je remplace le code ci-dessus par le code ci-dessous (marqueurs sans étiquette ni icône personnalisées), le chargement se fait correctement :

    var marker = new google.maps.Marker({
        position: myLatLng,
        title: 'Hello World!'
    });

Comment charger rapidement sur un téléphone portable des marqueurs dont l'étiquette et l'icône sont personnalisées ?

0voto

greywolf82 Points 3730

Deux options s'offrent à vous : le regroupement et la distance.

  • Regroupement : regroupement de données à l'aide d'un algorithme. Lorsque l'utilisateur effectue un zoom avant ou un zoom arrière, vous n'affichez qu'un seul point d'un regroupement ou tous les points.
  • Distance : utiliser un algorithme spatial (comme un arbre KD) afin de sélectionner rapidement les marqueurs proches du centre de la carte.

Sur mobile, vous pouvez généralement afficher 100/200 marqueurs, pas plus.

0voto

ayd Points 11

Je propose trois voies :

1. utiliser le regroupement

https://developers.google.com/maps/documentation/javascript/marker-clustering

2. utiliser les tableaux Fusion

https://support.google.com/fusiontables/answer/1244603?hl=en

3. utiliser un serveur géographique : http://geoserver.org/

étape 1 : installation de geoserver

étape 2 : créer une couche avec vos données et la publier en tant que WMS

étape 3 : charger la couche (WMS) sur google map

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X