我需要创建将使用 GeoJSON 数据(MultiLineString 格式)作为 Google map 上的数据层的 map 。我已经创建了一个 Google Maps JavaScript API 项目,并且拥有一个 API key 。
我尝试了以下示例:
示例一:
https://developers.google.com/maps/documentation/javascript/examples/layer-data-simple
(这会渲染一个多边形,但似乎不支持 MultiLineString 的样式)。
示例二:
https://developers.google.com/maps/documentation/javascript/examples/layer-data-dragndrop
(此示例允许通过拖放添加 GeoJSON,但我不知道如何保存 map 和数据层。)
示例 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
]
]
]
}
最佳答案
遵循example in the documentation
Data class
google.maps.Data class
A layer for displaying geospatial data. Points, line-strings and polygons can be displayed.
Every Map has a Data object by default, so most of the time there is no need to construct one. For example:
var myMap = new google.maps.Map(...);
myMap.data.addGeoJson(...);
myMap.data.setStyle(...);
代码片段:
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>
关于javascript - 如何将 GeoJSON(MultiLineString) 图层添加到 Google map ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38491370/