Konwertowanie tablicy stylów Google Maps na ciąg stylów Google Static Maps

Question

Zbudowałem narzędzie, które pozwala użytkownikom na stosowanie stylu mapy JSON na Mapie Google, a teraz chcę dodać obsługę dla Google Static Maps API.

Korzystanie następującą tablicę style:

"[{"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)

muszę ostatecznie konwersji na ciąg URLescaped w formacie: style=feature:featureArgument|element:elementArgument|rule1:rule1Argument|rule2:rule2Argument(More documentation)

Do tej pory” ve napisał ten skrypt JavaScript, aby spróbować przekonwertować rzeczy, ale nie działa poprawnie:

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

Niestety, ten kod jest wyprowadzanie następujących czynności:

(prawym przyciskiem myszy i wybierz opcję „Kopiuj adres URL”, aby zobaczyć pełną ścieżkę używam - powyższe jest bezpośrednio z obrazy statyczne API)

... Kiedy zamiast powinno to wyglądać tak:

Jakieś pomysły? Dzięki!

Answer 1

Każdy pojedynczy styl musi być zasilany z oddzielnego style -parameter:

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

Wybrana odpowiedź nie działa dla mnie.
Ale tylko dlatego, że miałem kilka obiektów bez parametrów styler.
musiałem zmodyfikować go tak:

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

zobaczyć go w akcji na: http://jsfiddle.net/ZnGpb/1/

PS: JSHint

Answer 3

Jest to metoda PHP, który robi to samo

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

Stworzyłem tę funkcję narzędzia nodejs dla wszystkich programistów Androida.

Zapisz kod poniżej jako flatten-mapstyle.js anyware.

Run używając: node flatten-mapstyle.js /path/to/your/style/style_json.json

Aby urlencode wykorzystanie wyjście -e flaga, 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('&'); 
}