使用AngularJS和JSON存储坐标在Google地图上绘制多边形

时间:2014-11-28 14:41:57

标签: json angularjs google-maps

我有多个JSON文件(poly1.json,poly2.json),具有以下设置:

{
  "Polygon1": {
    "name": "poly1",
    "specifications": [
      {
        "areaGeometry": {
          "type": "Polygon",
          "coordinates": [
            [
              [
                5.129820025,
                52.085407733
              ],
              [
                5.129117875,
                52.086181679
              ],
              [
                5.128497179,
                52.087946286
              ],
              [
                5.128458022,
                52.088253322
              ],
              [
                5.12866837,
                52.088507157
              ],
              [
                5.129251266,
                52.088976802
              ],
              [
                5.129473861,
                52.08926905
              ],
              [
                5.129385309,
                52.089499203
              ],
              [
                5.12909759,
                52.089698198
              ],
              [
                5.127961124,
                52.090148712
              ],
              [
                5.127685173,
                52.090462912
              ],
              [
                5.127310682,
                52.091653473
              ],
              [
                5.12710699,
                52.092271708
              ],
              [
                5.127126612,
                52.092518366
              ],
              [
                5.128237531,
                52.093468305
              ],
              [
                5.128130926,
                52.093688728
              ],
              [
                5.126525853,
                52.094399058
              ],
              [
                5.126377274,
                52.09459342
              ],
              [
                5.126284571,
                52.095035437
              ],
              [
                5.130996578,
                52.095312264
              ],
              [
                5.137138625,
                52.095591962
              ],
              [
                5.139036247,
                52.095628598
              ],
              [
                5.138962372,
                52.095484813
              ],
              [
                5.137879856,
                52.093651573
              ],
              [
                5.137480747,
                52.093048367
              ],
              [
                5.136997815,
                52.092468872
              ],
              [
                5.13643473,
                52.091917507
              ],
              [
                5.135795776,
                52.091398471
              ],
              [
                5.134288171,
                52.090401311
              ],
              [
                5.133608279,
                52.089984575
              ],
              [
                5.133259679,
                52.089768435
              ],
              [
                5.132932239,
                52.089549796
              ],
              [
                5.132656508,
                52.089342179
              ],
              [
                5.132411195,
                52.089120552
              ],
              [
                5.132198186,
                52.088886599
              ],
              [
                5.132143714,
                52.088818019
              ],
              [
                5.130950838,
                52.087097103
              ],
              [
                5.130737143,
                52.086736442
              ],
              [
                5.130575274,
                52.086365674
              ],
              [
                5.130403794,
                52.085570404
              ],
              [
                5.129783706,
                52.08522338
              ],
              [
                5.129820025,
                52.085407733
              ]
            ]
          ]
        }
      }
    ],
  }
}

现在我想在谷歌地图上绘制用户正在看的所有多边形 - 如果屏幕上有多边形。这样做的最佳方法是什么?我应该为每个人使用还是有更好的方法?你如何迭代它?这会不会让它变慢?

1 个答案:

答案 0 :(得分:0)

根据我的理解,有两种方法可以解决它。首先,您可以制作KML layer。您可以将所有这些多边形放在一个KML file中,然后进行叠加并将该叠加层与地图对象集成。 (这是JQuery参考)

另一种方法是使用您的JSON文件并创建数据层。我建议使用拖放GeoJSON代码示例作为参考。因为这将为您提供具体点的准确性。但是您可以随时使用更简单的实现,您可以在link左侧找到Google提供的其他示例代码。