Есть ли способ отобразить одну страну на карте Google? Это должна быть только одна страна, не включая детали из других стран

Question

Есть ли способ отобразить одну страну на карте Google? Это должна быть только одна страна, не включая детали из других стран

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

Есть ли вызов Google API или любой другой метод? Я не мог найти метод, который переопределяет масштабирование и переопределяет методы, по которым они могут перемещаться по региону (прокрутка событий).

Кто-нибудь знает способ сделать это?

43

google-maps

Источник

user111693 11 июл '10 в 02:11

8 ответов

Другие вопросы по тегам google-maps

user3949281 27 июл '15 в 15:00 2015-07-27 15:00 · Answer 1 · 2015-07-27 15:00

Если вы отключите все элементы карты, а затем добавите новый слой (одну страну), то будет видна только одна страна. Вот jsfiddle https://jsfiddle.net/gvvy5vxz/2/

function initialize() {
    var mapOptions = {
    zoom: 5,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    backgroundColor: '#FFF',
    disableDefaultUI: true,
    draggable: false,
    scaleControl: false,
    scrollwheel: false,
    styles: [
    {
    "featureType": "water",
    "elementType": "geometry",
    "stylers": [
      { "visibility": "off" }
    ]
    },{
    "featureType": "landscape",
    "stylers": [
      { "visibility": "off" }
    ]
    },{
    "featureType": "road",
    "stylers": [
      { "visibility": "off" }
    ]
    },{
    "featureType": "administrative",
    "stylers": [
      { "visibility": "off" }
    ]
    },{
    "featureType": "poi",
    "stylers": [
      { "visibility": "off" }
    ]
    },{
    "featureType": "administrative",
    "stylers": [
      { "visibility": "off" }
    ]
    },{
    "elementType": "labels",
    "stylers": [
      { "visibility": "off" }
    ]
    }
  ]
};

user7043177 19 окт '16 в 15:26 2016-10-19 15:26 · Answer 2 · 2016-10-19 15:26

Я искал то же самое и в итоге использовал наложение полигонов.

Соответствующий код находится под комментарием "вот магия".

Уменьшите масштаб полностью, и вы увидите гигантский белый квадрат. Это 0-й индекс массива в файле json (связан с map.data.loadGeoJson) "[[-147, 2], [-150, 70], [-20, 68], [-31, 5], [-147, 2]]", the next index is the border coordinate points of the region you're interested in.

Search for "kml {country/city/state/region name}" in google and you'll probably find all that data with the border outline points.

https://jsfiddle.net/jmao2o3o/3/

//here is the magic
map.data.loadGeoJson('https://bitbucket.org/dimaboychev/public/raw/9bb53aba0d70875a6d2d9bd2a1eec65671ce4ae3/dc.json');

user112106 15 май '11 в 11:34 2011-05-15 11:34 · Answer 3 · 2011-05-15 11:34

Я также искал решение для карт Google, и до сих пор самое близкое, что я нашел, это отображение диаграммы определенной страны: http://code.google.com/apis/chart/interactive/docs/gallery/geomap.html. Посмотрите также на этот вопрос: Могу ли я показать одну страну (замаскированную) в GoogleMaps?

8

Источник

user112106 15 май '11 в 11:34

user46281 22 мар '14 в 12:13 2014-03-22 12:13 · Answer 4 · 2014-03-22 12:13

Вы можете сделать это, используя Fusion Tables.

http://www.geocodezip.com/geoxml3_test/v3_FusionTables_query_sidebarF_local.html?country=India

С уважением

3

Источник

user46281 22 мар '14 в 12:13

user12598819 01 янв '20 в 08:11 2020-01-01 08:11 · Answer 5 · 2020-01-01 08:11

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Mapping</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
        }
        #map {
            border: 2px solid #333;
            width: 80vw;
            height: 80vh;
        }
    </style>
</head>

<body>
    <div id="map"></div>

    <script src="./keys.js"></script>
    <script>
        let map;
        document.addEventListener("DOMContentLoaded", () => {
            let s = document.createElement("script");
            document.head.appendChild(s);
            s.addEventListener("load", () => {
                //script has loaded
                console.log("script has loaded");
                map = new google.maps.Map(document.getElementById("map"), {
                    center: {
                        lat: 45.3496711,
                        lng: -75.7569551
                    },
                    zoom: 16,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                });
            });
            s.src = `https://maps.googleapis.com/maps/api/js?key=${MAPKEY}`;
        });
    </script>
</body>

</html>

user1440818 22 авг '13 в 11:50 2013-08-22 11:50 · Answer 6 · 2013-08-22 11:50

Я думаю, что лучше / нет вспышки /, но решение SVG - это географические диаграммы от Google: https://developers.google.com/chart/interactive/docs/gallery/geochart?hl=pl

Вы можете поиграть с этим здесь:

https://code.google.com/apis/ajax/playground/?type=visualization&hl=pl

Другие страны потускнели, поэтому это может удовлетворить ваши потребности

user15226638 19 апр '21 в 14:52 2021-04-19 14:52 · Answer 7 · 2021-04-19 14:52

Даже у меня было подобное требование, и после долгих поисков я нашел это

      <style>
        #visualization svg path[fill^='none'] {
            stroke-width: 0px;
        }
</style>

[Примечание: #visualization - это идентификатор тега, в котором мы визуализируем график.]

Это в основном уменьшает ширину штриха для других стран, также не забудьте поставить это

      var options = {
                ...,
                ...,
                datalessRegionColor: 'transparent',
                ...,
                ...
            };

в части параметров визуализации.

user7979990 25 сен '21 в 11:18 2021-09-25 11:18 · Answer 8 · 2021-09-25 11:18

В официальной документации Google Maps есть пример.

https://developers.google.com/maps/documentation/javascript/examples/control-bounds-restriction

-1

Источник

user7979990 25 сен '21 в 11:18