使用Google Static Maps API划分城市区域

Question

我使用Google Static Maps API从城市生成图片。我首先尝试仅获取所请求城市的大纲（请参阅下面的示例1），但我注意到谷歌API无法实现，所以我想划定特定城市，填写它的区域有一些颜色（下面的例子2），但我无法找到一种只使用城市名称的方法，因为据我所知，谷歌需要整个路径来填充该区域。

我尝试的请求的一个例子是：

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 - 参数一起使用将不起作用，因为网址会过长。

目前尚不清楚最终结果应该是什么（例如＃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的背景图像（会更加复杂，因为你必须计算正确的大小/位置）。