Conversion d'un tableau de styles Google Maps en styles Google Static Maps chaîne

Question

J'ai créé un outil qui permet aux utilisateurs d'appliquer un style de carte JSON à une carte Google, et je souhaite maintenant ajouter un support pour le Google Static Maps API.

Utilisation du tableau de styles suivants:

"[{"stylers":[]},{"featureType":"water","stylers":[{"color":"#d2dce6"}]},{"featureType":"administrative.country","elementType":"geometry","stylers":[{"weight":1},{"color":"#d5858f"}]},{"featureType":"administrative.country","elementType":"labels.text.fill","stylers":[{"color":"#555555"}]},{"featureType":"administrative","elementType":"geometry.stroke","stylers":[{"visibility":"off"}]},{"featureType":"administrative.country","stylers":[{"visibility":"on"}]},{"featureType":"road.highway","stylers":[{"saturation":-100},{"lightness":40},{"visibility":"simplified"}]},{"featureType":"road.arterial","stylers":[{"saturation":-100},{"lightness":40},{"visibility":"simplified"}]},{"featureType":"road.local","stylers":[{"saturation":-100},{"visibility":"simplified"}]},{"featureType":"landscape","elementType":"all","stylers":[{"hue":"#FFFFFF"},{"saturation":-100},{"lightness":100}]},{"featureType":"landscape.natural","elementType":"geometry","stylers":[{"saturation":-100}]},{"featureType":"landscape.man_made","elementType":"geometry.fill","stylers":[{"visibility":"simplified"},{"saturation":-100}]},{"featureType":"poi.park","elementType":"geometry","stylers":[{"saturation":-100},{"lightness":60}]},{"featureType":"poi","elementType":"geometry","stylers":[{"hue":"#FFFFFF"},{"saturation":-100},{"lightness":100},{"visibility":"off"}]}]"

(More documentation on format)

Je dois convertir en fin de compte cela en une chaîne URLescaped, au format: style=feature:featureArgument|element:elementArgument|rule1:rule1Argument|rule2:rule2Argument(More documentation)

Jusqu'à présent, je J'ai écrit ce JavaScript pour essayer de convertir les choses, mais cela ne fonctionne pas correctement:

function get_static_style(styles) { 
    var result = ''; 
    styles.forEach(function(v, i, a){ 
     if (v.stylers.length > 0) { // Needs to have a style rule to be valid. 
     result += (v.hasOwnProperty('featureType') ? 'feature:' + v.featureType : 'feature:all') + '|'; 
     result += (v.hasOwnProperty('elementType') ? 'element:' + v.elementType : 'element:all') + '|'; 
     v.stylers.forEach(function(val, i, a){ 
      var propertyname = Object.keys(val)[0]; 
      var propertyval = new String(val[propertyname]).replace('#', '0x'); 
      result += propertyname + ':' + propertyval + '|'; 
     }); 
     } 
    }); 
    console.log(result); 
    return encodeURIComponent(result); 
    } 

Hélas, ce code est délivrer en sortie les éléments suivants:

(Faites un clic droit et sélectionnez « copier l'URL » pour voir le chemin complet que je utilise - ce qui précède est direct de la API images statiques)

... Quand elle devrait plutôt ressembler à ceci:

Des idées? Merci!

Answer 1

Chaque style unique doit être fourni avec un style -parameter séparé:

function get_static_style(styles) { 
    var result = []; 
    styles.forEach(function(v, i, a){ 
     var style=''; 
     if (v.stylers.length > 0) { // Needs to have a style rule to be valid. 
     style += (v.hasOwnProperty('featureType') ? 'feature:' + v.featureType : 'feature:all') + '|'; 
     style += (v.hasOwnProperty('elementType') ? 'element:' + v.elementType : 'element:all') + '|'; 
     v.stylers.forEach(function(val, i, a){ 
      var propertyname = Object.keys(val)[0]; 
      var propertyval = val[propertyname].toString().replace('#', '0x'); 
      style += propertyname + ':' + propertyval + '|'; 
     }); 
     } 
     result.push('style='+encodeURIComponent(style)) 
    }); 

    return result.join('&'); 
    } 

---

watch the result

Answer 2

La réponse choisie n'a pas fonctionné pour moi. Mais seulement parce que j'avais quelques objets sans styler paramètres.
je dû le modifier comme ceci:

function get_static_style(styles) { 
    var result = []; 
    styles.forEach(function(v, i, a){ 

     var style=''; 
     if(v.stylers) { // only if there is a styler object 
      if (v.stylers.length > 0) { // Needs to have a style rule to be valid. 
       style += (v.hasOwnProperty('featureType') ? 'feature:' + v.featureType : 'feature:all') + '|'; 
       style += (v.hasOwnProperty('elementType') ? 'element:' + v.elementType : 'element:all') + '|'; 
       v.stylers.forEach(function(val, i, a){ 
        var propertyname = Object.keys(val)[0]; 
        var propertyval = val[propertyname].toString().replace('#', '0x'); 
        // changed "new String()" based on: http://stackoverflow.com/a/5821991/1121532 

        style += propertyname + ':' + propertyval + '|'; 
       }); 
      } 
     } 
     result.push('style='+encodeURIComponent(style)); 
    }); 

    return result.join('&'); 
} 

voir en action à: http://jsfiddle.net/ZnGpb/1/

ps: JSHint

Answer 3

Ceci est une méthode PHP qui fait la même chose

public function mapStylesUrlArgs($mapStyleJson) 
{ 
    $params = []; 

    foreach (json_decode($mapStyleJson, true) as $style) { 
     $styleString = ''; 

     if (isset($style['stylers']) && count($style['stylers']) > 0) { 
      $styleString .= (isset($style['featureType']) ? ('feature:' . $style['featureType']) : 'feature:all') . '|'; 
      $styleString .= (isset($style['elementType']) ? ('element:' . $style['elementType']) : 'element:all') . '|'; 

      foreach ($style['stylers'] as $styler) { 
       $propertyname = array_keys($styler)[0]; 
       $propertyval = str_replace('#', '0x', $styler[$propertyname]); 
       $styleString .= $propertyname . ':' . $propertyval . '|'; 
      } 
     } 

     $styleString = substr($styleString, 0, strlen($styleString) - 1); 

     $params[] = 'style=' . $styleString; 
    } 

    return implode("&", $params); 
} 

src: https://gist.github.com/WouterDS/5942b891cdad4fc90f40

Answer 4

J'ai créé cette fonction nodejs utilitaire pour tous les développeurs Android.

Enregistrer le code ci-dessous comme flatten-mapstyle.js anyware.

Run utilisant: node flatten-mapstyle.js /path/to/your/style/style_json.json

Pour urlencode utilisation de sortie -e drapeau, i.e: node flatten-mapstyle.js style_json.json -e

const fs = require('fs'); 
const {promisify} = require('util'); 

const args = process.argv.slice(2) 

const filename = args[0] 
const encode = args[1] 

const exists = promisify(fs.exists); 
const readFile = promisify(fs.readFile); 


async function main() { 
    try { 
     if (filename == undefined || await !exists(filename)) { 
      throw { 
       'error': `file ${filename} does not exist` 
      } 
     } 
     let json = await readFile(filename, 'utf8'); 
     console.log("=========COPY BELOW========") 
     console.log(getStaticStyle(JSON.parse(json))) 
     console.log("=========END OF COPY========") 
    } catch (e) { 
     console.error(e); 
    } 
} 

main(); 

function getStaticStyle(styles) { 
    var result = []; 
    styles.forEach(function(v, i, a) { 

     var style = ''; 
     if (v.stylers) { // only if there is a styler object 
      if (v.stylers.length > 0) { // Needs to have a style rule to be valid. 
       style += (v.hasOwnProperty('featureType') ? 'feature:' + v.featureType : 'feature:all') + '|'; 
       style += (v.hasOwnProperty('elementType') ? 'element:' + v.elementType : 'element:all') + '|'; 
       v.stylers.forEach(function(val, i, a) { 
        var propertyname = Object.keys(val)[0]; 
        var propertyval = val[propertyname].toString().replace('#', '0x'); 
        style += propertyname + ':' + propertyval + '|'; 
       }); 
      } 
     } 
     result.push('style=' + (encode == "-e" ? encodeURIComponent(style) : style)); 
    }); 

    return result.join('&'); 
}