谷歌地图：如何从 SVG 路径创建多边形

Question

Google Maps Javascript API 中是否有任何方法可以从 SVG 路径创建多边形（不是符号！）？

我想在地图上显示这些地区

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

Answer 1

有点不清楚您到底在寻找什么，但您可以根据the API 在 Google 地图上绘制多边形或折线。谷歌还提供了有用的互动示例here（查看地图部分的绘图）。从 SVG 中获取点是解析 SVG 元素的 points 或 d 属性的问题。但请注意，坐标是经纬度的。

编辑：我有一个解析 SVG 路径并将其绘制在地图上的代码示例。您可以调整 toLatitude 和 toLongitude 函数来调整从 SVG 坐标到地图坐标的比例以满足您的需要。这也应该适用于 SVG 多边形和折线，方法是改变

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

到

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

这里是完整的代码：

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：如果您想绘制高质量的区域，在 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;
    });
}