Добавить схему "Область поиска" на результат Google Maps

В прошлом году Google добавила области поиска в свои предложения, о которых сообщалось во многих местах, и отображается на самих картах Google. Например здесь, и сообщил здесь и здесь.

Чтобы быть явным, это когда Google добавляет схему, относящуюся к поисковому запросу. Если вы хотите найти город, почтовый индекс или почтовый индекс, Google выделит этот регион на карте. Пример:

Это, по-видимому, недоступно через API, и только через собственные веб-свойства Google.

Недавно я заметил некоторые другие домены, используя эту функциональность, например, на Twitter.

Существует ли отдельный Twitter Twitter и другие крупные организации? Добавлена ли эта функциональность, но пока еще не документирована? Или я просто пропустил объявление и не могу найти какие-либо документы?

Ответ 1

Контуры, которые вы видите там, происходят из твиттера, они должны были их сохранить.

Взгляните на json файл, который запрашивается при вызове twitter-страницы: http://api.twitter.com/1/geo/id/c3f37afa9efcf94b.json

Я пробовал, geometry.coordinates[0][0] определяет тонкий многоугольник (предположим, план для Остина).

При попытке заметить, что порядок пары lng,lat not lat,lng

Таким образом, twitter-geo-API может стать хорошим началом для реализации контуров, к счастью, Twitter поддерживает JSONP для клиентского решения.

См. пример: http://jsfiddle.net/doktormolle/MRYm3/

`<edit>`

изменен twitter-API, пример больше не работает (требуется проверка подлинности)

`</edit>`

Ответ 2

Поскольку еще нет решения, предлагаемого API Карт, и ручное заполнение координат - это не бизнес, а вот жемчужина альтернативы. Нашел этот ответ на веб-сайте ГИС - абсолютный спасатель (сэкономил бы долги минут, рисуя Калгари, выше, D):

Вы можете получить координаты полигона в json для использования с googlemaps используя openstreetmap. Перейдите в http://nominatim.openstreetmap.org/. Поиск место, подобное "Сан-Франциско, Калифорния"

Нажмите "Подробности"

Ищите идентификатор OSM и скопируйте его (control + c), например: 2018776

Вставьте идентификатор http://polygons.openstreetmap.fr/index.py и загрузите файл JSON

Источник: GIS

Ответ 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>

Это сработало для меня отлично.