javascript - 谷歌地图去除标签或灰色区域，部分地区除外

Question

您好，我正在使用谷歌地图，我想了解您对以下问题的看法。

是否可以在 googlemap 中隐藏或变灰除其他区域以外的所有区域？

如果是，请帮我解决这个问题。

我试过了，但直到现在还没有找到任何解决方案。

这是我的 FIDDLE DEMO

在该演示中，我想灰化/隐藏所有没有标记的区域的标签。

这是我用来将标记固定在 map 上的示例代码。

JS 代码:

<script>
var infowindow;
var map;
var myLatLng = [];

function initialize() {
    var mapOptions = {
        zoom: 3,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

    var bounds = new google.maps.LatLngBounds();
    var obj = {
        "JobRecord": [{
            "ApplyUrl": "test",
                "GeoLocations": {
                "GeoLocationRecord": [{
                    "Latitude": "21.543333",
                        "Longitude": "39.172777"
                }, {
                    "Latitude": "21.299135",
                        "Longitude": "40.428313"
                }]
            },
                "JobId": "493743",
                "JobTitle": "Sales Associate",
                "Locations": {
                "LocationRecord": [{
                    "Group": "Saudi Arabia",
                        "Title": "Taif"
                }, {
                    "Group": "Saudi Arabia",
                        "Title": "Jeddah"
                }]
            }
        }, {
            "ApplyUrl": "test",
                "GeoLocations": {
                "GeoLocationRecord": {
                    "Latitude": "55.755826",
                        "Longitude": "37.617300"
                }
            },
                "JobId": "492725",
                "JobTitle": "Business Director - Starbucks - Russia",
                "Locations": {
                "LocationRecord": {
                    "Group": "Russia",
                        "Title": "Moscow"
                }
            }
        }, {
            "ApplyUrl": "test",
                "GeoLocations": {
                "GeoLocationRecord": {
                    "Latitude": "25.271139",
                        "Longitude": "55.307485"
                }
            },
                "JobId": "492730",
                "JobTitle": "Vice President - Victoria's Secret",
                "Locations": {
                "LocationRecord": {
                    "Group": "UAE",
                        "Title": "Dubai"
                }
            }
        }]
    };
    var jobs = obj.JobRecord;
    for (var i = 0; i < jobs.length; i++) {
        if (jobs[i].GeoLocations.length != 0) {
            var geoLocationRecord = jobs[i].GeoLocations.GeoLocationRecord;
            var myjobs = new Array();

            var single = new Object();

            if (geoLocationRecord.length === undefined) {

                single.JobId = jobs[i].JobId;
                single.JobTitle = jobs[i].JobTitle;
                single.Locations = jobs[i].Locations.LocationRecord;

                var search = [geoLocationRecord.Latitude, geoLocationRecord.Longitude, single];
                isLocationFree(search);
            } else {
                for (var j = 0; j < geoLocationRecord.length; j++) {
                    single[j] = new Object();

                    single[j].JobId = jobs[i].JobId;
                    single[j].JobTitle = jobs[i].JobTitle;
                    single[j].Locations = jobs[i].Locations.LocationRecord[j];

                    var search = [geoLocationRecord[j].Latitude, geoLocationRecord[j].Longitude, single[j]];
                    isLocationFree(search);
                } //finish inner loop
            }
        } //finish if condition
    } //finish loop

    for (var x = 0; x < myLatLng.length; x++) {
        var latlng = new google.maps.LatLng(parseFloat(myLatLng[x][0]),
        parseFloat(myLatLng[x][1]));
        bounds.extend(latlng);

        createMarker(myLatLng[x], latlng);
    }
    map.fitBounds(bounds);
    var listener = google.maps.event.addListener(map, "idle", function () {
        if (map.getZoom() > 16) map.setZoom(3);
        google.maps.event.removeListener(listener);
    });
}

function createMarker(jobs, latlng) {
    var marker = new google.maps.Marker({
        position: latlng,
        map: map
    });

    google.maps.event.addListener(marker, "click", function () {
        if (infowindow) infowindow.close();
        infowindow = new google.maps.InfoWindow({
            content: createMessage(jobs)
        });
        infowindow.open(map, marker);
    });
    return marker;
}

function createMessage(jobs) {
    console.log(jobs);
    console.log("Total==>" + (Number(jobs.length) - 2));

    if (jobs[2].Locations !== undefined) {
        var locationTitle = jobs[2].Locations.Title;
    } else {
        var locationTitle = "";
    }

    var message = '';
    message += '<div id="popupContent">' +
        '<strong id="firstHeading" class="firstHeading">' + (Number(jobs.length) - 2) + " Vacancies in " + locationTitle + '</strong>' +
        '<br><br>';
    for (var y = 2; y < jobs.length; y++) {
        message += '<a href="http://jobsearch.alshaya.com/cau/en/job/' + jobs[y].JobId + '" target="_blank">' + jobs[y].JobTitle + '</a><br>';

    }
    message += '</div>';

    return message;
}

function isLocationFree(search) {
    for (var i = 0; i < myLatLng.length; i++) {
        if (myLatLng[i][0] === search[0] && myLatLng[i][1] === search[1]) {
            myLatLng[i].push(search[2]);
            return true;
        }
    }
    myLatLng.push(search);
    return myLatLng;
}
$(document).ready(function () {
    initialize();
});
</script>

Answer 1

使用 Fusion Table Layer 可以很容易地做到这一点.

我在这里将提到的“区域”或“地区”视为国家 - 我猜您只是想将您的 XML 提要中不存在的国家显示为灰色？

我在这里硬编码了您示例中的国家/地区 - 俄罗斯、沙特阿拉伯和阿拉伯联合酋长国。您必须自己创建逻辑来排除您在提要中遇到的国家/地区。

function greyoutWorld() {
    var world_geometry = new google.maps.FusionTablesLayer({
        query: {
            select: 'geometry',
            from: '1N2LBk4JHwWpOY4d9fobIn27lfnZ5MDy-NoqqRpk',
            //select all but russia, saudi arabia and united arab emirates
            where: "ISO_2DIGIT NOT IN ('RU', 'SA', 'AE')"
        },
        //add some grey color to cover the rest of the world
        styles: [{
            polygonOptions: {
                fillColor: "#dadada",
                strokeColor: "#ebebeb",
                strokeWeight: "int"
            },
            polylineOptions: {
                strokeColor: "#rrggbb",
                strokeWeight: "int"  
            }
        }],
        map: map,
        suppressInfoWindows: true
    });
}

结果是这样的:

fork fiddle -> http://jsfiddle.net/QUPdZ/

---

更新

关于“红圈标记”，该功能内置于Fusion Table图层代码中，无法抑制。查看documentation ，在“限制”下:

When looking at the map, you may notice:
* The ten largest-area components of a multi-geometry are shown.
* When zoomed farther out, tables with more than 500 features will show dots (not lines or polygons).

解决方法是添加

minZoom: 2

到 map 选项，就像在这个 fiddle 中 -> http://jsfiddle.net/LVRp2/

国家几何融合表 - World Country Boundaries.kml - 是公开的，可在此处访问:

https://www.google.com/fusiontables/DataSource?docid=1N2LBk4JHwWpOY4d9fobIn27lfnZ5MDy-NoqqRpk .

另一种相同的来源我猜 - World Country Boundaries.csv - 可以在这里找到:

https://www.google.com/fusiontables/DataSource?docid=1uL8KJV0bMb7A8-SkrIe0ko2DMtSypHX52DatEE4 .

两者都适用于上述 fiddle 。