Демонстрировать области города с помощью Google Статических карт API

Question

Я использую Google Static Maps API для создания изображений из городов. Сначала я попытался получить только схему запрошенного города (см. Пример 1 ниже), но я заметил, что это невозможно с API Google, поэтому я хотел бы разграничить конкретный город, заполнив его область цветом (пример 2 ниже) , но я не мог найти способ сделать это только с именем города, потому что, насколько я знаю, Google требует весь путь для заполнения региона. там

https://maps.googleapis.com/maps/api/staticmap?center=STATE+OF+SAO+PAULO&size=400x400&maptype=roadmap&style=feature:road|visibility:off&path=fillcolor:0xAA000033%7Ccolor:0xFFFFFF00%7Cenc:encoded_data 

ли в любом случае для достижения этой цели с этим API:

Один пример запроса я пытаюсь, это один? Или есть лучшее решение, чтобы получить то, что я хочу?

Пример 1:

Пример 2:

Заранее спасибо!

Answer 1

Уже было задано пару раз, в настоящее время нет google-API, который предоставляет данные для этих полигонов, вам нужно будет использовать другой источник.

Хорошим началом может быть osm, nominatim-search также может возвращать эти многоугольники. Вы можете указать желаемый формат (например, svg или geoJson).

Использование данных вместе с enc -параметром статической карты в большинстве случаев не будет работать, потому что URL-адрес будет слишком длинным.

Непонятно, каков должен быть конечный результат (пиктограмма, как в примере №1, или статическая карта с высокой областью, как в примере № 2), но в обоих случаях вы можете использовать формат svg для нарисуйте путь.

Пример:

jQuery(
 
    function($) 
 
    { 
 
    $('form').submit(function(e){ 
 
     e.preventDefault(); 
 
     $('form').addClass('hidden'); 
 
     $.ajax(
 
     'http://nominatim.openstreetmap.org/search', 
 
     { 
 
      jsonp:'json_callback', 
 
      data:$(this).serialize(), 
 
      dataType:'jsonp', 
 
      success:function(data){ 
 
     if(data.length){ 
 
     $('form').removeClass('hidden'); 
 

 
      $('#svg')[0].setAttribute('viewBox',[data[0].boundingbox[2], 
 
               -data[0].boundingbox[1], 
 
               (data[0].boundingbox[3]-data[0].boundingbox[2]), 
 
               (data[0].boundingbox[1]-data[0].boundingbox[0]), 
 
               ].join(' ')); 
 
      $('#svg path').attr('d',data[0].svg); 
 
      
 
      
 
     } 
 
      
 
     } 
 
     }); 
 

 
    }).trigger('submit'); 
 
    } 
 
);

.svg{display:inline-block;border:3px solid red;background:#f1f1f1;border-radius:8px;} 
 
     .svg svg{margin:10px;width:100px;height:100px;} 
 
     .svg svg path{fill:red;} 
 
     .copyright{display:block;clear:both;} 
 
     .hidden svg,.hidden .copyright{visibility:hidden;} 
 
     fieldset {text-align:center;} 
 
     fieldset input{display:block;} 
 
     fieldset input[type="submit"]{display:inline;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form class="hidden"> 
 
    <input type="hidden" name="format" value="json"> 
 
    <input type="hidden" name="polygon_svg" value="1"> 
 
    <fieldset style="float:left;"> 
 
     <input name="city" placeholder="city" title="city" value="São Paulo"/> 
 
     <input name="county" placeholder="county"title="county"/>  
 
     <input name="state" placeholder="state"title="state"/> 
 
     <input name="country" placeholder="country"title="country" value="br"/> 
 
     <input type="submit" /> 
 
    </fieldset> 
 
    <div class="svg"> 
 
     <svg id="svg" xmlns="http://www.w3.org/2000/svg">  
 
     <path/> 
 
     </svg> 
 
    </div> 
 
    <span class="copyright">Data © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, ODbL 1.0. </span> 
 
    </form>

Если вы хотите использовать его со статической карте Вы можете, например, используйте статическую карту в качестве фонового изображения для svg (было бы более сложным, потому что вы должны вычислить правильный размер/позицию).