Question

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

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

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

我已经尝试过，但直到现在才找到任何解决方案。

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

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

JS CODE：

<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轻松完成此操作。

我在这里考虑提到的＆＃34;区域＆＃34;或＆＃34;地区＆＃34;作为国家/地区 - 我想您只是希望将XML Feed中不存在的国家/地区变灰？

我在这里用你的榜样硬编码了国家 - 俄罗斯，沙特阿拉伯和阿拉伯联合酋长国。您必须自己创建逻辑，以排除您在Feed中遇到的国家/地区。

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
    });
}

结果如下：

enter image description here

分叉小提琴 - ＆gt;的 http://jsfiddle.net/QUPdZ/

<强>更新

关于＆＃34;红圈标记＆＃34;，此功能内置于Fusion Table图层代码中，无法抑制。请参阅documentation，＆＃34;限制＆＃34; ：

查看地图时，您可能会注意到：
*显示了多种几何形状的十个最大区域组成部分 *当进一步缩小时，具有500多个特征的表格将显示点（不是线条或多边形）。

解决方法是添加

minZoom: 2

到地图选项，就像在这个小提琴中一样 - ＆gt; 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。

两者都适用于上述小提琴。

Answer 2

我在googlemaps的v2中通过覆盖形状覆盖（即包含整个世界的多边形但我想要显示的区域）实现了这一点。

最后我的区域相当复杂，所以我最终使用谷歌地图生成它并将形状保存在单独的.kmz文件中，您将能够双向实现结果。

Here is a fiddle一次添加一个坐标对。

KmlLayer function允许您加载从谷歌地图生成的.kmz;另请参阅Stackoverflow上的这个答案：Using KMZ Files in Google Maps

在Google地图中，请按照本教程生成kml

Answer 3

我们在这里回顾一下。

虽然您在此处解释了一些解决方案，但它们都需要btw 外部数据。很难维护和不完整（我仍然找不到完整的Fusion Table世界边界数据集）。

我个人认为这不是一个“突出”位置的好方法，而且我觉得这太复杂了。

另一种可能性是使用marker clusterer非常好，以突出你的大部分职位。它很容易实现。

我们不知道您需要从Google Maps API获得哪些功能。也许你应该考虑使用另一种可能更容易操作边界数据的服务。您是否已经检查过jVectorMap？

我知道我的答案对你的问题不是一个解决方案，但它可能会帮助你问自己正确的问题：灰色地图上的某些区域是突出显示的最佳选择职位在哪里？

除某些地区外，Google地图会删除标签或灰色区域

3 个答案: