Question

去年，谷歌在许多地方都报道了其产品的搜索区域大纲，并在谷歌地图上可见。例如here，并报告了here和here。

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

90210 Search on Google Maps

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

最近，我注意到其他一些使用此功能的域名，例如Twitter。

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

Answer 1

由于Maps API尚未提供解决方案并手动填写坐标是无人问津，因此这里有一个替代品。在GIS网站上找到了这个答案 - 绝对的救生员（将会保存jurihandl大量的时间来绘制卡尔加里，上面; D）：

您可以在json中获取多边形坐标，以便与googlemaps一起使用   使用openstreetmap。转到http://nominatim.openstreetmap.org/。搜索   像＃34; San Francisco，CA＆＃34;

点击＆＃34;详细信息＆＃34;

查找OSM ID并复制它（control + c），例如：2018776

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

来源：GIS

Answer 2

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

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

我试过了，geometry.coordinates[0][0]定义了一个精细的多边形（猜测Austin的轮廓）。

当您尝试时，请注意该对的顺序为lng,lat而不是lat,lng

因此twitter-geo-API可能是实施大纲的良好开端，幸运的是Twitter支持JSONP以获得客户端解决方案。

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

`<edit>`

twitter-API已更改，示例不再有效（需要身份验证）

`</edit>`

Answer 3

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

这是一个非常酷的工具，您可以在其中绘制城市边界。你可以像你想的那样精确： 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>

这对我来说真的很棒。

Answer 4

twitter api geo端点不会给你城市边界，

他们为您提供的只有5点（纬度，长度）的边界框

这是我从旧金山的twitter api geo获得的

Answer 5

这有点麻烦，但是您可以使用BING maps api来获取详细的多边形。他们很难从自己的api中找出答案，但是this blog post帮助了我。一旦数据发送给您，您就必须解压缩数据。他们在那篇文章中使用bing maps api绘制形状，但我将其转换为geojson。这就是我的做法。

 function getBingMapsGeometry(latitude, longitude, entityType) {
   //api docs: https://docs.microsoft.com/en-us/bingmaps/spatial-data-services/geodata-api
        let baseUrl =
                "http://platform.bing.com/geo/spatial/v1/public/geodata?SpatialFilter=",
            levelOfDetail = 3,
            getAllPolygons = 1,
            getEntityMetadata = 1,
            culture = "en-us",
            userRegion = "US",
            preferCuratedPolygons = 1,
            responseFormat = "json",
            key = "your_api_key";
        return fetch(`${baseUrl}GetBoundary(${latitude},${longitude},${levelOfDetail},'${entityType}',${getAllPolygons},${getEntityMetadata},'${culture}','${userRegion}')&PreferCuratedPolygons=${preferCuratedPolygons}&$format=${responseFormat}&key=${key}`
        ).then(res => {
            res.json().then(result => {
                var entity = result.d.results[0];
                if (!entity) {
                    alert("no results");
                    return;
                }
            // much help from this post: https://blogs.bing.com/maps/2013/06/25/retrieving-boundaries-from-the-bing-spatial-data-services-preview
                var entityMetadata = entity.EntityMetadata;
                entityMetadata.name = entity.Name.EntityName;
                var primitives = entity.Primitives;
                var boundaryVertices = null;
                var numOfVertices = 0;
                var multyiPolygonArray = [];
                var singlePolygonArray;
                for (var i = 0; i < primitives.length; i++) {
                    var ringStr = primitives[i].Shape;
                    var ringArray = ringStr.split(",");

                    for (var j = 1; j < ringArray.length; j++) {
                        var polygonArray = new Array();
                        var array = ParseEncodedValue(ringArray[j]);

                        if (array.length > numOfVertices) {
                            numOfVertices = array.length;
                            boundaryVertices = array;
                        }
                        polygonArray.push(array);
                        if (ringArray.length > 1)
                            multyiPolygonArray.push(polygonArray);
                        else singlePolygonArray = polygonArray;
                    }
                }
                let geojson = {
                    type: "FeatureCollection",
                    features: [
                        {
                            type: "Feature",
                            properties: entityMetadata,
                            geometry: {
                                type: singlePolygonArray
                                    ? "Polygon"
                                    : "MultiPolygon",
                                coordinates: singlePolygonArray
                                    ? singlePolygonArray
                                    : multyiPolygonArray
                            }
                        }
                    ]
                };
return geojson;
            });
        });
    }

 function ParseEncodedValue(value) {
        var safeCharacters =
            "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789_-";
        var list = new Array();
        var index = 0;
        var xsum = 0;
        var ysum = 0;
        var max = 4294967296;

        while (index < value.length) {
            var n = 0;
            var k = 0;

            while (1) {
                if (index >= value.length) {
                    return null;
                }
                var b = safeCharacters.indexOf(value.charAt(index++));
                if (b == -1) {
                    return null;
                }
                var tmp = (b & 31) * Math.pow(2, k);

                var ht = tmp / max;
                var lt = tmp % max;

                var hn = n / max;
                var ln = n % max;

                var nl = (lt | ln) >>> 0;
                n = (ht | hn) * max + nl;
                k += 5;
                if (b < 32) break;
            }

            var diagonal = parseInt((Math.sqrt(8 * n + 5) - 1) / 2);
            n -= (diagonal * (diagonal + 1)) / 2;
            var ny = parseInt(n);
            var nx = diagonal - ny;
            nx = (nx >> 1) ^ -(nx & 1);
            ny = (ny >> 1) ^ -(ny & 1);
            xsum += nx;
            ysum += ny;
            var lat = ysum * 0.00001;
            var lon = xsum * 0.00001;
            list.push([lon, lat]);
        }
        return list;
    }

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

5 个答案:

`<edit>`

`</edit>`