使用 Google 静态地图 API 划分城市区域

Question

我正在使用 Google Static Maps 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-API提供这些多边形的数据，您需要使用其他资源。

好的开始可能是osm，nominatim-search也可能是return这些多边形。您可以指定所需的格式（例如 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 的背景图像（会更复杂，因为您必须计算正确的 size/position）。

使用 Google 静态地图 API 划分城市区域

Demarcate city areas with Google Static Maps API

google-maps

maps