谷歌地图作为矢量地图

Question

我已经到处寻找这个问题的答案，但最接近的结果并不令人满意（这个）。是否有办法让谷歌地图看起来和操作起来像jvectormap？我所指的操作是悬停在国家上等，外观方面则是指jvectormap拥有的整洁外观。

- user1278673

---

据我所知，使用Google Maps API没有简单的方法来实现这一点。您可以查看 https://developers.google.com/maps/documentation/javascript/styling，这样可以让您按照您的意愿来设计地图。要叠加国家边界，您可以查看Fusion Tables。这里有一个示例数据集：https://www.google.com/fusiontables/DataSource?docid=1OJYGQVi56l6tzYGfH5YvQ6m2-Nk76_w35iwDd7g 如果您需要更多关于如何把所有东西组合起来的信息，请告诉我。 - MrUpsidown

根据我的经验，在地图上叠加世界国家边界可能会消耗大量资源。因此，我强烈建议您将Fusion Tables数据导入到本地数据库中，并从那里使用它。 - MrUpsidown

MrUpsidedown，请提供任何有关如何将所有内容组合在一起的信息，这似乎是一个可靠的解决方案。 - user1278673

Answer 1

如我在评论中建议的那样，您可以查看如何样式化地图：

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

这可以帮助您了解它的工作原理，并最终让您构建自己的内容： Google地图样式向导 关于融合表，一旦您找到适当的数据集（有许多，有些不完整，更或者少，几何细节的水平可以因数据集而异），您可以将其下载为CSV，并将其导入到您的数据库中。从那里，您可以查询您的数据库并为每个国家创建多边形。我稍后会更新我的答案，提供一些代码来帮助您入门。

编辑：这是我在一个项目中使用的数据集。也许它能帮到你。它只包含我感兴趣的字段，但每个国家都有随机颜色关联。http://www.sendspace.com/file/plgku3 https://www.dropbox.com/s/7o5y26gfim1asf0/gmaps_countries.sql?dl=1 https://drive.google.com/file/d/1Qi4TOA3YUh3bL8SuIWbjA0B0QFIrA1ti/view?usp=sharing

编辑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()。希望这能帮到你！

- MrUpsidown

---

请注意，有些国家拥有多个几何集，因此我在 PHP 中设置了 if ('multi' in country)。 - MrUpsidown

只是一个提示：如果你想让它看起来像jvectormap，你可以使用样式来基本隐藏所有东西（也许除了水），然后覆盖国家。玩得开心！ - MrUpsidown

今天给这个答案点赞的人：我已经更新了SQL文件的下载链接，sendspace链接已经失效。 - MrUpsidown

无法查看 styling.html 文件。 - Darth Vader

不确定您指的是哪个链接。我已更新到样式向导的链接。SQL文件的链接也消失了。我会尽快更新它。 - MrUpsidown

SQL文件包含所有国家的下载链接已经更新。 - MrUpsidown