Google지도 : SVG 경로에서 다각형을 만드는 방법

Question

SVG 경로에서 다각형 (심볼이 아님)을 만들 수있는 방법이 있습니까?

나는지도

http://jvectormap.com/js/jquery-jvectormap-es-mill-en.js

Answer 1

그것 정확히 무엇을 찾고에 대해 조금 불분명에이 지역을 보여주고 싶은,하지만 당신은 the API 당 Google지도에 폴리곤이나 폴리 라인을 그릴 수 있습니다. Google은 유용한 대화 형 예제 인 here도 제공합니다 (지도 섹션의 그림 확인). SVG에서 포인트를 가져 오는 것은 SVG 요소의 또는 d 속성을 구문 분석하는 것입니다. 그러나 좌표는 위도와 경도에 있습니다.

편집 : SVG 경로를 구문 분석하고지도에 그리는 코드 예가 ​​있습니다. toLatitude 및 toLongitude 함수를 조정하여 SVG 좌표에서 필요에 맞게 좌표를 조정할 수 있습니다.

var width = 400, // width of SVG 
    height = 200; // height of SVG 

google.maps.event.addDomListener(window, 'load', onLoad); 


function toLongitude(x) { 
    return x * 180/width; 
} 

function toLatitude(y) { 
    return -y * 180/width + 90; 
} 


function onLoad() { 
    // The SVG path; 
    var path = document.getElementById("my-path-id").getAttribute("d"); 

    // Get the points. Even indices are x coordinates and odd indices are y 
    // coordinates. Note that these are strings. 
    var points = path.match(/(\d+)/g); 

    // Initialize the map 
    var mapOptions = { 
     zoom: 2, 
     center: new google.maps.LatLng(45, 0), 
     mapTypeId: google.maps.MapTypeId.TERRAIN 
    }; 
    var map = new google.maps.Map(document.getElementById("map-canvas"), 
            mapOptions); 

    // Map polygon coordinates 
    var polyCoordinates = []; 
    for (var i = 0; i < points.length; i += 2) { 
     var longitude = toLongitude(parseInt(points[i])), 
      latitude = toLatitude(parseInt(points[i + 1])); 

     polyCoordinates.push(new google.maps.LatLng(latitude, longitude)); 
    } 

    var polygon = new google.maps.Polygon({ 
     paths: polyCoordinates, 
     strokeColor: '#FF0000', 
     strokeOpacity: 0.8, 
     strokeWeight: 2, 
     fillColor: '#FF0000', 
     fillOpacity: 0.35 
    }); 

    polygon.setMap(map); 
} 

편집 2 : 당신은 고품질의 지역을 그리려는 경우에도 여기에 전체 코드가

var path = document.getElementById("my-polygon-id").getAttribute("points"); 

에

var path = document.getElementById("my-path-id").getAttribute("d"); 

을 변경하여 SVG 폴리곤과 폴리 라인을 위해 일한다 Google지도에서 다각형을 그리는 것이 최선의 방법이 아닐 수 있습니다. 또는 jvectorMap 라이브러리 (연결된 사용자), Google의 Geomap API 또는 d3을 사용할 수 있습니다.

Google지도를 사용하고 싶다면 FusionTables를 사용하는 것이 좋습니다. 나는 onLoad 수정 된 기능을 포함하여 this 사이트를 기반으로합니다.

function onLoad() {  
    // Initialize the map 
    var mapOptions = { 
     zoom: 6, 
     center: new google.maps.LatLng(40, -4), // Center of Spain 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    var map = new google.maps.Map(document.getElementById("map-canvas"), 
           mapOptions); 

    var layerOptions = { 
     query: { 
      select: "kml_4326", 
      from: "420419", 
      where: "\'name_0\' = \'Spain\'" 
     } 
    } 
    var layer = new google.maps.FusionTablesLayer(layerOptions); 
    layer.setMap(map); 

    // Displays the name of the region 
    google.maps.event.addListener(layer, "click", function(e) { 
     e.infoWindowHtml = e.row.name_1.value; 
    }); 
}