如何在Google地图上显示此多边形?

时间:2010-08-19 05:13:49

标签: javascript jquery google-maps google-maps-api-3

我有一些 MultiPolygon 数据(美国加利福尼亚州),我正试图在谷歌地图(v3 Javascript API)上显示。

data is here on CodePaste.NET的链接。 (注意:我把它粘贴在那里因为数据会垃圾邮件)。

所以我试图把它变成一些Json数据..然后在谷歌地图上显示那个MultiPolygon。它挂起/不起作用:(

这是我用过的jQuery ......

function getTestData() {
    // Grab the California state data.
    var request = $.getJSON("/Foo/Bar?format=json", function (results) {
            // map it.
            var polygon = createGeoJsonPolygon(results, "#FF7800", "#46461F");
            polygon.setMap(map);
    });
}

function createGeoJsonPolygon(geojson, strokeColour, fillColour) {
    var coords = geojson.coordinates; // Array of polygons.
    var paths = [];

    $.each(coords, function (i, n) {
        $.each(n, function (j, o) {
            var path = [];
            $.each(o, function (k, p) {
                var ll = new google.maps.LatLng(p[1], p[0]);
                path.push(ll);
            });
            paths.push(path);
        });
    });

    return new google.maps.Polygon({
        paths: paths,
        strokeColor: strokeColour,
        strokeOpacity: 1,
        strokeWeight: 2,
        fillColor: fillColour,
        fillOpacity: 0.25
    });
}

有人可以帮忙吗?任何人都有一秒钟给它一个去看看他们是否可以在谷歌地图上绘制我的样本数据?我不确定我的代码是错误还是数据被错误提取。

3 个答案:

答案 0 :(得分:1)

My post on Google Groups来帮助拯救这一天。

这是建议的:

function createGeoJsonPolygon(geojson, strokeColour, fillColour) {
    var coords = geojson.coordinates; // Array of polygons.
    var paths = [];

    $.each(coords, function (i, n) { 
        var path = []; 
        $.each(n, function (j, p) { 
            var ll = new google.maps.LatLng(p[1], p[0]); 
            path.push(ll); 
        }); 
        paths.push(path); 
    }); 

    return new google.maps.Polygon({ 
        paths: paths, 
        strokeColor: "#FF0000", 
        strokeOpacity: 0.8, 
        strokeWeight: 1, 
        fillColor: "#FF0000", 
        fillOpacity: 0.35, 
        map: map 
    }); 
} 

答案 1 :(得分:0)

你做了多边形;你没有把它添加到任何地图。

假设mapgoogle.maps.Map类型的变量,请执行以下操作:

var poly = createGeoJsonPolygon( arg1, arg2, arg3 );
poly.setMap( map );

另外,请注意您的数据(链接到的)(如您所述)点数组;它是一组点数组数组。

答案 2 :(得分:0)

如果不编码多边形轮廓,每个多边形只能使用一个轮廓,请参阅文档:http://code.google.com/intl/ru/apis/maps/documentation/javascript/v2/reference.html#GPolygon。 它只接受一系列点,而不是轮廓。

了解谷歌地图的多边形编码,有一个现成的js。

编辑: v3的文档: http://code.google.com/intl/ru/apis/maps/documentation/javascript/reference.html#PolygonOptions