Google Maps:如何从SVG路径创建多边形 [英] Google Maps: How to create a polygon from a SVG Path

问题描述

Google Maps Javascript API中是否可以通过SVG路径创建多边形(不是符号！)?

Is there any way in the Google Maps Javascript API to create a Polygon (not a symbol!) from a SVG Path?

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

I'd like to show these regions on the map

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

推荐答案

对于您要查找的内容尚不清楚，但是您可以根据此处提供了有用的交互式示例(请查看地图部分上的绘图).从SVG获取点是解析SVG元素的 points 或 d 属性的问题.但是请注意，坐标是经度和纬度.

Its a little unclear about what you are looking for exactly, but you can draw a polygon or polyline on Google Maps per the API. Google also gives helpful interactive examples here (check the drawing on the map section). Getting the points from an SVG is a matter of parsing the points or d attribute of the SVG element. But note that the coordinates are in latitude and longitude.

我有一个解析SVG路径并将其绘制在地图上的代码示例.您可以调整 toLatitude 和 toLongitude 函数，以将SVG坐标的比例调整为映射坐标以适应您的需求.通过更改

I have a code example of parsing an SVG path and drawing it on the map. You can adjust the toLatitude and toLongitude functions to adjust the scale from SVG coordinates to map coordinates to fit your needs. This should also work for SVG polygons and polylines by changing

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);
}

如果要绘制高质量区域，则在Google地图上绘制多边形可能不是最佳选择.或者，您可以使用jVectorMap库(已链接到该库)，Google的Geomap API或d3.

Edit 2: If you want to draw high quality regions, drawing polygons on Google maps may not be the best option. Alternatively, iyou could use the jVectorMap library (which you linked to), Google's Geomap API, or d3.

尽管，如果您确实想使用Google地图，我还是建议您使用FusionTables.我要包括一个基于此功能的修改后的 onLoad 函数网站.

Although, if you do want to use Google maps, I would recommend using FusionTables. I'm including a modified onLoad function is based on this site.

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;
    });
}  

这篇关于Google Maps:如何从SVG路径创建多边形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！