Question

我需要在Google地图中只显示一个国家/地区。我只需要展示一个国家，其他国家的部分不应该在那里......例如，如果我想展示英国它应该只展示英国和海洋，不应该看到其他国家的部分。

是否有Google API调用或任何其他方法？我找不到一种方法，而不是覆盖缩放和覆盖它们可以在区域上导航的方法（滚动事件）。

有没有人知道这样做的方法？

Answer 1

如果您禁用所有地图元素，然后添加新图层（单个国家/地区），则只能看到一个国家/地区。这是一个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" }
    ]
    }
  ]
};

Answer 2

我一直在寻找谷歌地图解决方案，到目前为止，我发现最接近的是显示特定国家/地区的图表：http://code.google.com/apis/chart/interactive/docs/gallery/geomap.html。还要看一下这个问题：Can I show a single country (masked out) in GoogleMaps?

Answer 3

您也可以使用Fusion Tables来完成。

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

此致

Answer 4

我一直在寻找相同的东西，最终使用了多边形叠加。

相关代码在＆＃34;这里是魔术＆＃34;评价。

一路缩小，你会看到巨大的白色方块。这是json文件中数组的第0个索引（在map.data.loadGeoJson中链接）＆＃34; [[ - 147,2]，[ - 150，70]，[ - 20,68]，[ - 31 ，5]，[ - 147,2]]＆＃34;，下一个索引是您感兴趣的地区的边界坐标点。

搜索＆＃34; kml {country / city / state / region name}＆＃34;在Google中，您可能会找到带有边框轮廓点的所有数据。

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

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

Answer 5

我认为更好/没有flash /但svg解决方案是谷歌的地理图表： https://developers.google.com/chart/interactive/docs/gallery/geochart?hl=pl

你可以在这里播放：

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

其他国家已经变暗，因此可能会满足您的需求

Answer 6

<!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>

Answer 7

我也有类似的需求，找了好久才找到这个

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

[注意：#visualization 是我们渲染图表的标签的 id。]

基本上，减少了其他国家的笔画宽度，也不要忘记放这个

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

在可视化的选项部分。

有没有办法在Google地图中显示单个国家/地区？它应该只是一个国家，而不是其他国家的部分国家

7 个答案: