如何将GeoJSON（MultiLineString）图层添加到Google地图

我需要创建将通过Google地图将GeoJSON数据（MultiLineString格式）用作数据图层的地图。我创建了一个Google Maps JavaScript API项目，并且有一个API密钥。如何将GeoJSON（MultiLineString）图层添加到Google地图

我曾尝试下面的例子：

实施例I：
https://developers.google.com/maps/documentation/javascript/examples/layer-data-simple
（这使得一个多边形，但似乎不支持MULTILINESTRING的样式）。

实施例II：（这个例子允许通过拖放此外GeoJSON的，但我不知道如何保存地图和数据层）
https://developers.google.com/maps/documentation/javascript/examples/layer-data-dragndrop

样品以GeoJSON MULTILINESTRING从http://geojsonlint.com ：

{ 
    "type": "MultiLineString", 
    "coordinates": [ 
     [ 
      [ 
       -105.0214433670044, 
       39.57805759162015 
      ], 
      [ 
       -105.02150774002075, 
       39.57780951131517 
      ], 
      [ 
       -105.02157211303711, 
       39.57749527498758 
      ], 
      [ 
       -105.02157211303711, 
       39.57716449836683 
      ], 
      [ 
       -105.02157211303711, 
       39.57703218727656 
      ], 
      [ 
       -105.02152919769287, 
       39.57678410330158 
      ] 
     ], 
     [ 
      [ 
       -105.01989841461182, 
       39.574997872470774 
      ], 
      [ 
       -105.01959800720215, 
       39.57489863607502 
      ], 
      [ 
       -105.01906156539916, 
       39.57478286010041 
      ] 
     ], 
     [ 
      [ 
       -105.01717329025269, 
       39.5744024519653 
      ], 
      [ 
       -105.01698017120361, 
       39.574385912433804 
      ], 
      [ 
       -105.0166368484497, 
       39.574385912433804 
      ], 
      [ 
       -105.01650810241699, 
       39.5744024519653 
      ], 
      [ 
       -105.0159502029419, 
       39.574270135602866 
      ] 
     ], 
     [ 
      [ 
       -105.0142765045166, 
       39.57397242286402 
      ], 
      [ 
       -105.01412630081175, 
       39.57403858136094 
      ], 
      [ 
       -105.0138258934021, 
       39.57417089816531 
      ], 
      [ 
       -105.01331090927124, 
       39.57445207053608 
      ] 
     ] 
    ] 
}

来源

2016-07-20 Mike Stratton

你的例子数据不是'MultiLineString'，它仅仅是一个'线段形式'。 – geocodezip

继example in the documentation

数据类

google.maps.Data类

一种用于显示地理空间数据层。可以显示点，线串和多边形。

默认情况下，每个Map都有一个Data对象，因此大多数时候不需要构造一个。例如：

var myMap = new google.maps.Map(...); 
myMap.data.addGeoJson(...); 
myMap.data.setStyle(...);

proof of concept fiddle

代码片段：

function initialize() { 
 
    var map = new google.maps.Map(
 
    document.getElementById("map_canvas"), { 
 
     center: new google.maps.LatLng(37.4419, 70.1419), 
 
     zoom: 3, 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }); 
 
    map.data.addGeoJson(jsonData); 
 
    map.data.setStyle({ 
 
    strokeColor: "blue" 
 
    }) 
 

 
} 
 
google.maps.event.addDomListener(window, "load", initialize); 
 
var jsonData = { 
 
    "type": "FeatureCollection", 
 
    "features": [{ 
 
    "type": "Feature", 
 
    "properties": { 
 
     "stroke": "#555555", 
 
     "stroke-width": 2, 
 
     "stroke-opacity": 1 
 
    }, 
 
    "geometry": { 
 
     "type": "LineString", 
 
     "coordinates": [ 
 
     [ 
 
      79.8046875, 
 
      45.583289756006316 
 
     ], 
 
     [ 
 
      73.828125, 
 
      48.922499263758255 
 
     ], 
 
     [ 
 
      72.421875, 
 
      46.07323062540838 
 
     ], 
 
     [ 
 
      72.0703125, 
 
      42.553080288955826 
 
     ], 
 
     [ 
 
      79.453125, 
 
      41.77131167976407 
 
     ], 
 
     [ 
 
      78.046875, 
 
      37.71859032558816 
 
     ], 
 
     [ 
 
      72.7734375, 
 
      34.016241889667015 
 
     ], 
 
     [ 
 
      66.796875, 
 
      39.63953756436671 
 
     ], 
 
     [ 
 
      66.4453125, 
 
      48.45835188280866 
 
     ], 
 
     [ 
 
      74.1796875, 
 
      53.74871079689897 
 
     ], 
 
     [ 
 
      55.1953125, 
 
      55.7765730186677 
 
     ], 
 
     [ 
 
      49.92187499999999, 
 
      48.69096039092549 
 
     ], 
 
     [ 
 
      50.625, 
 
      40.17887331434696 
 
     ] 
 
     ] 
 
    } 
 
    }] 
 
};

html, 
 
body, 
 
#map_canvas { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="map_canvas"></div>

来源

2016-07-20 22:05:10 geocodezip

工作正常！谢谢！ –

map.data.addGeoJson（jsonData）;为我做了诡计。真棒！ – Antonis

您可以添加以GeoJSON像

function loadGeoJsonString(geoString) { 
    var geojson = JSON.parse(geoString); 
    map.data.addGeoJson(geojson); 
}

随着

map.data.setStyle({ 
    //Put styling here 
});

你可以风格让您GeoJSON的。因此，在加载GeoJSON时不会应用样式，但可以在之后添加它。

来源

2016-07-20 21:51:00 mxlse

如何将GeoJSON（MultiLineString）图层添加到Google地图

回答

相关问题