2014-01-23 2 views
7

나는 가장 가까운 내가 찾은 가장 가까운 곳 (this)을 찾았는데 어쨌든 jvectormap처럼 보이는 Google지도를 얻을 수 있습니까? 나는 호버링 할 수있는 국가 등을 말하면서 vectormap이 가지고있는 깨끗한 표정을 보게됩니다. 당신이 어떻게 작동하는지 이해Google지도로 벡터지도

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

이 도움이 될 수 있습니다, 결국 당신이 당신의 자신을 만들어 보자 :

내 댓글에 제안한 것처럼
+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 데이터를 로컬 DB로 가져 와서 거기에서 사용하는 것이 좋습니다. – MrUpsidown

+0

MrUpsidedown, 모든 정보를 함께 넣는 방법에 대한 정보는 훌륭합니다. 단단한 솔루션처럼 보입니다. –

답변

12

, 당신은 어떻게 스타일의지도 확인할 수 있습니다

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

핵융합 테이블에 대해서는 적절한 데이터 세트를 찾으면 (일부는 불완전하거나 더 많거나 적으며 형상 세부 정보 수준은 설정마다 다를 수 있음) CSV로 다운로드하여 DB로 가져올 수 있습니다. 거기에서 DB를 쿼리하고 각 국가의 다각형을 생성 할 수 있습니다. 나중에 시작하기 위해 몇 가지 코드로 답변을 업데이트하겠습니다.

편집 : 여기 내 프로젝트 중 하나에 사용 된 데이터 세트입니다. 어쩌면 당신을 도울 수 있습니다. 내가 관심이있는 분야 만 보유하고 있지만, 각 나라와 연관된 임의의 색상이 있습니다. http://www.sendspace.com/file/plgku3 https://www.dropbox.com/s/7o5y26gfim1asf0/gmaps_countries.sql?dl=0

편집 2 : 여기자바 스크립트입니다 :

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 ('country'의''multi ')'가 있음을 유념하십시오. – MrUpsidown

+0

힌트 : jvectormap처럼 보이게하려면 기본적으로 모든 것을 숨기고 (아마도 물 제외) 스타일을 사용하여 국가를 오버레이 할 수 있습니다. 재미있어! – MrUpsidown