在谷歌地图结果中添加“搜索区域”轮廓

Question

去年，Google 在其产品中添加了搜索区域轮廓，这在许多地方都有报道，并且在 Google 地图本身上可见。比如here，并报here和here。

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

这显然无法通过 API 获得，只能通过 Google 自己的网络资产获得。

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

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

Answer 1

这有点麻烦，但您可以使用 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;
    }

Answer 2

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

他们为您提供的只是 5 点（纬度、经度）的边界框

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

Answer 3

由于 Maps API 还没有提供任何解决方案，而且手动填写坐标是没人管的事，所以这里有一个很好的替代方案。在 GIS 网站上找到了这个答案——绝对的救星（会为 jurihandl 节省很多时间来绘制卡尔加里，上面 ;D）：

您可以在 json 中获取多边形坐标以用于 googlemaps 使用openstreetmap。转到http://nominatim.openstreetmap.org/。搜索 像“加利福尼亚州旧金山”这样的地方

点击“详情”

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

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

来源：GIS

Answer 4

你在那里看到的大纲来自推特，他们一定已经存储了它们。

查看调用 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>

Answer 5

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

这是一个非常酷的工具，您可以在其中绘制城市边界。你可以随心所欲： 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>

这对我来说真的很棒。