2014-01-23 74 views
7

我已經搜查每一個地方對於這一點,我已經找到了最接近的是不是很滿意(this),反正是有讓谷歌地圖尋找和表現得像jvectormap?通過代理我的意思是可懸停的國家等等,並且通過查看我的意思是矢量地圖具有的乾淨外觀。谷歌地圖爲矢量地圖

+0

AFAIK沒有簡單的方法可以通過Google Maps API實現這一功能。您可以查看https://developers.google.com/maps/documentation/javascript/styling,以便根據需要設置地圖的樣式。要覆蓋國家邊界,您可以檢查Fusion Tables。以下是一個示例數據集:https://www.google.com/fusiontables/DataSource?docid=1OJYGQVi56l6tzYGfH5YvQ6m2-Nk76_w35iwDd7g如果您需要更多關於如何將它們結合在一起的信息,請告訴我們。 – MrUpsidown

+0

從我的經驗來看,在地圖上覆蓋世界國家的邊界​​可能會非常耗費資源。因此,我強烈建議您將Fusion Tables數據導入到本地數據庫並從此處使用它。 – MrUpsidown

+0

MrUpsidedown,請告訴我如何把它放在一起會很好,這似乎是一個堅實的解決方案。 –

回答

12

如我的評論所說,你可以檢查如何風格地圖:你

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=0

編輯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()當你需要。希望這可以幫助!

+0

會試試這個,謝謝! –

+0

請注意,有些國家有多個幾何圖形集,因此我使用PHP設置了'if('multi'in country)'。 – MrUpsidown

+0

只是一個提示:如果你想讓它看起來像jvectormap,你可以使用樣式基本上隱藏一切(除了水,也許),然後覆蓋國家。玩的開心! – MrUpsidown