Javascript 谷歌地图作为矢量地图

我到处都在搜索这个，我找到的最近的一个不是很令人满意（），有没有让谷歌地图看起来和表现得像？通过行动，我指的是可悬停的国家等，通过观察，我指的是vectormap的干净外观。

正如我在评论中所建议的，您可以查看如何为地图设置样式：

var g = google.maps;
var countries = [];

function jsonCountries() {

    $.ajax({

        url : 'get_countries.php',
        cache : true,
        dataType : 'json',
        async : true,

        success : function(data) {

            if (data) {

                $.each(data, function(id,country) {

                    var countryCoords;
                    var ca;
                    var co;

                    if ('multi' in country) {

                        var ccArray = [];

                        for (var t in country['xml']['Polygon']) {

                            countryCoords = [];

                            co = country['xml']['Polygon'][t]['outerBoundaryIs']['LinearRing']['coordinates'].split(' ');

                            for (var i in co) {

                                ca = co[i].split(',');

                                countryCoords.push(new g.LatLng(ca[1], ca[0]));
                            }

                            ccArray.push(countryCoords);
                        }

                        createCountry(ccArray,country);

                    } else {

                        countryCoords = [];

                        co = country['xml']['outerBoundaryIs']['LinearRing']['coordinates'].split(' ');

                        for (var j in co) {

                            ca = co[j].split(',');

                            countryCoords.push(new g.LatLng(ca[1], ca[0]));
                        }

                        createCountry(countryCoords,country);
                    }
                });

                toggleCountries();
            }
        }
    });
}

function createCountry(coords, country) {

    var currentCountry = new g.Polygon({
        paths: coords,
        strokeColor: 'white',
        strokeOpacity: 1,
        strokeWeight: 1,
        fillColor: country['color'],
        fillOpacity: .6
    });

    countries.push(currentCountry);
}

function toggleCountries() {

    for (var i=0; i<countries.length; i++) {

        if (countries[i].getMap() !== null) {

            countries[i].setMap(null);

        } else {

            countries[i].setMap(map);
        }
    }
}

$results = array();

$sql = "SELECT * from gmaps_countries";
$result = $db->query($sql) or die($db->error);

while ($obj = $result->fetch_object()) {

    $obj->xml = simplexml_load_string($obj->geometry);
    $obj->geometry = '';

    foreach ($obj->xml->Polygon as $value) {

        $obj->multi = 'multigeo';
    }

    $results[] = $obj;
}

echo json_encode($results);

这可以帮助您了解其工作原理，并最终让您构建自己的：

关于融合表，一旦找到合适的数据集（有很多，有些不完整，或多或少，几何体细节的级别可能因集合而异），您可以将其作为CSV下载，并将其导入数据库。从那里，您可以查询数据库并为每个国家创建多边形。稍后我将用一些代码更新我的答案，以帮助您开始

编辑：这是我在一个项目中使用的数据集。也许它能帮助你。它只包含我感兴趣的领域，但有与每个国家相关的随机颜色。

编辑2:以下是JavaScript：

var g = google.maps;
var countries = [];

function jsonCountries() {

    $.ajax({

        url : 'get_countries.php',
        cache : true,
        dataType : 'json',
        async : true,

        success : function(data) {

            if (data) {

                $.each(data, function(id,country) {

                    var countryCoords;
                    var ca;
                    var co;

                    if ('multi' in country) {

                        var ccArray = [];

                        for (var t in country['xml']['Polygon']) {

                            countryCoords = [];

                            co = country['xml']['Polygon'][t]['outerBoundaryIs']['LinearRing']['coordinates'].split(' ');

                            for (var i in co) {

                                ca = co[i].split(',');

                                countryCoords.push(new g.LatLng(ca[1], ca[0]));
                            }

                            ccArray.push(countryCoords);
                        }

                        createCountry(ccArray,country);

                    } else {

                        countryCoords = [];

                        co = country['xml']['outerBoundaryIs']['LinearRing']['coordinates'].split(' ');

                        for (var j in co) {

                            ca = co[j].split(',');

                            countryCoords.push(new g.LatLng(ca[1], ca[0]));
                        }

                        createCountry(countryCoords,country);
                    }
                });

                toggleCountries();
            }
        }
    });
}

function createCountry(coords, country) {

    var currentCountry = new g.Polygon({
        paths: coords,
        strokeColor: 'white',
        strokeOpacity: 1,
        strokeWeight: 1,
        fillColor: country['color'],
        fillOpacity: .6
    });

    countries.push(currentCountry);
}

function toggleCountries() {

    for (var i=0; i<countries.length; i++) {

        if (countries[i].getMap() !== null) {

            countries[i].setMap(null);

        } else {

            countries[i].setMap(map);
        }
    }
}

$results = array();

$sql = "SELECT * from gmaps_countries";
$result = $db->query($sql) or die($db->error);

while ($obj = $result->fetch_object()) {

    $obj->xml = simplexml_load_string($obj->geometry);
    $obj->geometry = '';

    foreach ($obj->xml->Polygon as $value) {

        $obj->multi = 'multigeo';
    }

    $results[] = $obj;
}

echo json_encode($results);

---

需要时只需调用

jsonCountries（）

。希望这有帮助

不过，用谷歌地图API实现这一点并不容易。您可以检查允许您根据需要设置地图样式的选项。要覆盖国家边界，可以检查融合表。下面是一个示例数据集：如果您需要更多关于如何将这些数据集整合在一起的信息，请告诉我。根据我的经验，在地图上覆盖世界各国的边界可能会非常耗费资源。因此，我强烈建议您将Fusion Tables数据导入本地数据库，并从那里使用。MrUpsidedown，请提供有关如何将所有数据组合在一起的任何信息都很好，这似乎是一个可靠的解决方案。请注意，一些国家有多个几何体集，因此出现了

if（'multi'in country）

这是我用PHP设置的。只是一个提示：如果你想让它看起来像jvectormap，你可以使用样式基本上隐藏所有东西（可能除了水），然后覆盖国家。玩得高兴对于今天投票支持这个答案的人：我用SQL文件更新了下载链接；发送空间链接已断开。