Question

我尝试使用数据库中的存储值自动绘制多边形。我的python文件将json结果返回给ajax调用。在ajax成功部分我想迭代json结果数据然后我想在谷歌地图上自动绘制多边形。

我的python文件结果如下所示

{u'poly1': ((47.5317790059, 7.70534455782), (47.5319557221, 7.70540356642), 
(47.5317892503, 7.70558059221), (47.5317790059, 7.70534455782)), u'poly2': 
((47.5321093878, 7.70504951483), (47.5321452431, 7.70517826086), (47.5319403555, 
7.70537674432), (47.5321093878, 7.70504951483))}

在另一个js文件中初始化的地图如下：

    my_map = new GMaps({
        div: '#map-canvas',
        lat: 47.53187912201915,
        lng: 7.705222390807307,
        zoom: 20,
        zoomControl : true,
        mapTypeId: 'satellite'

    });

\此处GMaps来自另一个名为gmaps.js的文件，其中定义了所有谷歌地图功能。

在javascript文件中我有一些像这样的代码

$.ajax({
    url: "getPolygon",
    data: ({
        'id': id,
        'as_json': 1
    }),
    async: false,
    dataType: "json",
    success: function (data) {
    // i want to loop through the data and then i want to pass the value to the path
    //poly1 should be like this
    // poly1 =[[47.5317790059, 7.70534455782],[47.5319557221, 7.70540356642],
    //          [47.5317892503, 7.70558059221],[47.5317790059, 7.70534455782]]
    //poly2=same like poly1
    var my_area;
    map = my_map;

    my_area = map.drawPolygon({
            paths: [poly1,poly2],
            draggable: true,
            editable: true,
            strokeColor: 'black',
            strokeOpacity: 0.8,
            strokeWeight: 2,
            fillColor: '#FF0000',
            fillOpacity: 0.35
        });
    },
    error: function (data, status, e) {
            alert(e);
        } 

});

我想根据数据的长度动态生成poly1，poly2等变量，然后将变量传递给路径：用于绘制多边形。任何人都可以帮忙。

Answer 1

jsFiddle

HTML

<div id="map"></div>

CSS

#map {  
    width: 400px;  
    height: 400px;  
}

JS

$( function() {
    var centerPosition = new google.maps.LatLng( 47.5317892503, 7.70558059221 );
    var options = {
        zoom: 16,
        center: centerPosition,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map($('#map')[0], options);
    var result = "{ u'poly1': ( ( 47.5317790059, 7.70534455782 ), ( 47.5319557221, 7.70540356642 ), ( 47.5317892503, 7.70558059221 ), ( 47.5317790059, 7.70534455782 ) ), u'poly2': ( ( 47.5321093878, 7.70504951483 ), ( 47.5321452431, 7.70517826086 ), ( 47.5319403555, 7.70537674432 ), ( 47.5321093878, 7.70504951483 ) ) }";
    /* var coords = { "poly1": [
        [ 47.5317790059, 7.70534455782],
        [ 47.5319557221, 7.70540356642 ],
        [ 47.5317892503, 7.70558059221 ],
        [ 47.5317790059, 7.70534455782 ]
    ], "poly2":  [
        [ 47.5321093878, 7.70504951483 ],
        [ 47.5321452431, 7.70517826086 ],
        [ 47.5319403555, 7.70537674432 ],
        [ 47.5321093878, 7.70504951483 ]
    ] }; */
    var coords = JSON.parse( result.replace( /u/g, "" ).replace( /'/g, '"' ).replace( /\(/g, "[" ).replace( /\)/g, "]" ) );
    var path;
    var polygon;
    for ( var poly in coords ) {
        console.log( poly );
        path = [];
        for ( var i = 0; i < coords[ poly ].length; i ++ ) {
            console.log( coords[ poly ][ i ] );
            path.push( new google.maps.LatLng( coords[ poly ][ i ][ 0 ], coords[ poly ][ i ][ 1 ] ) );
        }
        polygon = new google.maps.Polygon( {
            paths: path,
            strokeColor: "#FF0000",
            strokeOpacity: 0.8,
            strokeWeight: 2,
            fillColor: "#FF0000",
            fillOpacity: 0.35
        } );
        polygon.setMap( map );
    }
} );

polygon-simple

Answer 2

如何使用返回的data对象：

var my_area = map.drawPolygon({
        paths: [data.poly1, data.poly2],
        // ...

或者如果您有两个以上的多边形：

var i = 1;
var paths = [];
while (data['poly'+i]) {
    paths.push(data['poly'+i]);
    i++;
}
var my_area = map.drawPolygon({
        paths: paths
        // ...

因为您的对象将被JSON转储（例如使用simplejson）：

{"poly2": [[47.5321093878, 7.70504951483], [47.5321452431, 7.70517826086], [47.5319403555, 7.70537674432], [47.5321093878, 7.70504951483]], "poly1": [[47.5317790059, 7.70534455782], [47.5319557221, 7.70540356642], [47.5317892503, 7.70558059221], [47.5317790059, 7.70534455782]]}

如何迭代json值来绘制多边形

2 个答案: