将"搜索区域"大纲添加到谷歌地图结果中

daz*_*ury 39 google-maps google-maps-api-3

去年,谷歌在许多地方报道了其产品的搜索区域大纲,并在谷歌地图上可见.例如这里,并报告在这里这里.

明确地说,这是谷歌添加与搜索查询相关的大纲.如果您要搜索城镇,邮政编码或邮政编码,Google会突出显示地图的这个区域.例:

90210在Google地图上搜索

这显然不是通过API提供的,而是仅通过Google自己的网络媒体资源.

最近,我注意到其他一些使用此功能的域名,例如在Twitter上.

是否有单独的API Twitter和其他大型组织正在使用?是否已添加此功能,但尚未记录?或者我只是错过了公告,找不到任何文档?

Gov*_*Rai 29

由于Maps API尚未提供解决方案并且手动填充坐标是没人的事,所以这里有一个替代品的宝石.在GIS网站上找到了这个答案 - 绝对的救星(将节省jurihandl很多分钟,画上卡尔加里,上面; D):

您可以在json中获取多边形坐标,以便与使用openstreetmap的googlemaps一起使用.转到http://nominatim.openstreetmap.org/.搜索"San Francisco,CA"这样的地方

点击"详细信息"

查找OSM ID并复制它(control + c),例如:2018776

粘贴ID http://polygons.openstreetmap.fr/index.py并下载JSON文件

资料来源:GIS

  • 这很棒!但是,目前尚不清楚ID是否会出现在所有呼叫中,并且它似乎仅适用于某些位置类别.最初的问题示例导致:http://nominatim.openstreetmap.org/details.php?place_id = 160424228,其中没有"关系ID"呈现给后续请求.仍然很棒,现在有人只需要将这一切都包含在一个API调用中!:-) (2认同)
  • 这是当今最好的解决方案。openstreetmap仍然有很多缺少的边界定义,因为它由用户填充。 (2认同)

Dr.*_*lle 17

你看到的大纲来自twitter,他们必须存储它们.

看一下调用twitter页面时请求的json文件:http: //api.twitter.com/1/geo/id/c3f37afa9efcf94b.json

我试过了,geometry.coordinates[0][0]定义了一个精细的多边形(猜测奥斯汀的轮廓).

当你尝试它时,请注意该对的顺序lng,lat 不是lat,lng

所以twitter-geo-API可能是实现轮廓的良好开端,幸运的是twitter支持JSONP用于客户端解决方案.

查看示例:http://jsfiddle.net/doktormolle/MRYm3/

<edit>

twitter-API已更改,示例不再有效(需要进行身份验证)

</edit>

  • 不像官方Google地图网站那样工作.它不会在智利找到任何城市,并且填充多种形式,而不仅仅是概述. (2认同)
  • 人们可能会做某事,而不是要求某事.twitter返回的折线由用户创建,当人们不为智利或印度创建这些折线时,没有. (2认同)

jur*_*ndl 9

我找到了一个很好的解决方案来绘制城市边界.

这是一个非常酷的工具,您可以在其中绘制城市边界.您可以随心所欲:http: //www.birdtheme.org/useful/v3tool.html

在右侧,您可以获得代码的实时预览.您可以选择KML和javascript.切换到javascript.然后复制你的坐标.

这里是您可以看到布鲁塞尔(欧洲)边界的完整网站.

<!DOCTYPE html>
<html lang="en-US">
 <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>::Maps ::</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&key=AIzaSyD0X4v7eqMFcWCR-VZAJwEMfb47id9IZao"></script>
    <script type="text/javascript">
        var map;

        //COORDS
        var brussels = [
        new google.maps.LatLng(50.835866,4.258575),
        new google.maps.LatLng(50.818083,4.244499),
        new google.maps.LatLng(50.811358,4.276428),
        new google.maps.LatLng(50.813094,4.302177),
        new google.maps.LatLng(50.773162,4.338226),
        new google.maps.LatLng(50.764259,4.384918),
        new google.maps.LatLng(50.793132,4.482422),
        new google.maps.LatLng(50.810274,4.450836),
        new google.maps.LatLng(50.821120,4.476585),
        new google.maps.LatLng(50.852342,4.462852),
        new google.maps.LatLng(50.866861,4.421310),
        new google.maps.LatLng(50.895021,4.430580),
        new google.maps.LatLng(50.911692,4.413757),
        new google.maps.LatLng(50.912342,4.395561),
        new google.maps.LatLng(50.898486,4.377708),
        new google.maps.LatLng(50.900868,4.328957),
        new google.maps.LatLng(50.889174,4.293251),
        new google.maps.LatLng(50.880294,4.297028),
        new google.maps.LatLng(50.861878,4.279175),
        new google.maps.LatLng(50.855593,4.288788),
        new google.maps.LatLng(50.837817,4.282608),
        new google.maps.LatLng(50.835866,4.259605)
        ];

        $(document).ready(function () {
            //WHERE TO CENTER YOUR MAP
            var latlng = new google.maps.LatLng(50.834999,4.387665);
            var myOptions = {
                zoom: 10,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

            var BrusselsHightlight;

            //DRAW THE POLYGON OR POLYLINE
            BrusselsHightlight = new google.maps.Polygon({
                paths: brussels,
                strokeColor: "#6666FF",
                strokeOpacity: 0.8,
                strokeWeight: 2,
                fillColor: "#6666FF",
                fillOpacity: 0.35
            });
            BrusselsHightlight.setMap(map);

        });

    </script>
    <style type="text/css">
        html,body { height: 100%; margin: 0px; padding: 0px; }
        #map_canvas {
            width:600px;
            height:400px;
        }       
    </style>
</head>
<body >
<div id="map_canvas">

</div>
<!--main-->
<div id="map_cord"></div>
</body> 
</html>
Run Code Online (Sandbox Code Playgroud)

这对我来说真的很棒.