Question

我搜索过每一个地方，我找到的最接近的地方不是很令人满意（this），无论如何都要让谷歌地图看起来像 jvectormap < / STRONG>？通过表演我的意思是可悬停的国家等，通过观察我的意思是矢量地图具有干净的外观。

Answer 1

根据我的评论中的建议，您可以查看如何设置地图样式：

https://developers.google.com/maps/documentation/javascript/styling

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

http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html

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

编辑：这是我用于其中一个项目的数据集。也许它可以帮到你。它只包含我感兴趣的字段，但具有与每个国家相关的随机颜色。 ~~http://www.sendspace.com/file/plgku3~~ https://www.dropbox.com/s/7o5y26gfim1asf0/gmaps_countries.sql?dl=1

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

这是 get_countries.php ：

$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()即可。希望这有帮助！

谷歌地图作为矢量地图

1 个答案: