javascript - 作为矢量 map 的谷歌地图

Question

我在每个地方都搜索过这个，我找到的最接近的不是很令人满意(this)，有没有办法让谷歌地图看起来和表现得像 jvectormap ？我所说的表演是指可以悬停的国家等，而我所说的外观是指矢量图具有的简洁外观。

Answer 1

正如我评论中所建议的，您可以查看如何设置 map 样式:

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

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

Google Maps Styling Wizard

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

编辑:这是我用于我的一个项目的数据集。也许它可以帮助你。它只包含我感兴趣的字段，但具有与每个国家相关的随机颜色。 http://www.sendspace.com/file/plgku3https://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()。希望这对您有所帮助!