用标定城区

Question

我正在使用Google静态地图API生成来自城市的图像。我首先试图只获得所请求的城市的轮廓(参见下面的示例1)，但我注意到这在google API中是不可能的，所以我想划分特定的城市，用一些颜色填充它的区域(下面的示例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，您需要使用另一个重新源。

一个好的开端可能是osm，名称搜索也可能返回这些多边形。您可以指定所需的格式(例如svg或geoJson)。

在大多数情况下，将数据与静态映射的enc-parameter一起使用将无法工作，因为url会变得太长。

目前还不清楚最终的结果应该是什么(在example#1中是一种象形文字，或者像在example#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的背景图像(因为您必须计算正确的大小/位置)。