我遇到了GeoJSON和Google Maps API的问题。
如何使用...来绘制MultiLineString
1）每条线都有自己的颜色和
2）每条线都有自己的属性和
3）每一行都应该是可点击的，并显示一个信息窗口，其中包含它的属性
样品Javascript：
var dataGEOJSON=[];
function LoadMyGEOJSON(key)
{
dataGEOJSON[key] = new google.maps.Data();
dataGEOJSON[key].loadGeoJson('GetLatLngGEOJSON.aspx?key=' + key);
dataGEOJSON[key].setMap(map);
}
阵列的原因是，我可以跟踪他们加载的密钥，因为用户可以在用户界面中从地图加载或卸载密钥。
示例GeoJSON：
{
"type":"FeatureCollection",
"features":[
{
"type":"Feature",
"properties":{
"Key":"007",
"Line1":"<this is line 1 desc>",
"Line2":"<this is line 2 desc>",
"Line3":"<this is line 3 desc>",
"Line4":"<this is line 4 desc>",
"Line5":"<this is line 5 desc>",
"Line6":"<this is line 6 desc>",
"Line7":"<this is line 7 desc>"
},
"geometry":{
"type":"MultiLineString",
"coordinates":[
[
[
-79.7066775992172,
43.6462189758028
],
[
-79.7066939830514,
43.6461985074393
],
[
-79.7066378408013,
43.6461605607267
],
[
-79.7066097743239,
43.6461403201406
],
[
-79.7064548987452,
43.6460566901385
],
[
-79.7063956692058,
43.6460219372408
]
],
[
[
-79.7063956692058,
43.6460219372408
],
[
-79.7063852230813,
43.646033518772
],
[
-79.7063166536656,
43.6461172032157
],
[
-79.7064079964431,
43.6461815121163
],
[
-79.7060589374119,
43.646518038823
],
[
-79.7060054211382,
43.6465600820263
]
],
[
[
-79.7060054211382,
43.6465600820263
],
[
-79.7052588394648,
43.6471387374653
],
[
-79.7048261689477,
43.6474817773536
],
[
-79.7043239742464,
43.6474733374216
],
[
-79.7041128202014,
43.6476608859429
],
[
-79.703901284037,
43.6478509811517
],
[
-79.7030237720306,
43.6486568653637
],
[
-79.7029267563095,
43.6486965678914
]
],
[
[
-79.7029267563091,
43.6486965678909
],
[
-79.7028702942784,
43.6487267896104
],
[
-79.7028019515802,
43.6487884267869
]
],
[
[
-79.6949803205847,
43.6554816862022
],
[
-79.6946328513629,
43.6552226727517
],
[
-79.6945439505269,
43.6551559442016
]
],
[
[
-79.6945439505269,
43.6551559442016
],
[
-79.694066895687,
43.654797865403
],
[
-79.6934193769725,
43.6543136334174
],
[
-79.6924271403494,
43.6535711706703
],
[
-79.6920107752268,
43.6532605761111
],
[
-79.6919943721596,
43.6532604342567
]
],
[
[
-79.6919943721591,
43.6532604342562
],
[
-79.6914713751595,
43.6536247980162
],
[
-79.6911279733848,
43.6533992300817
]
],
[
[
-79.6959960003114,
43.6400049378117
],
[
-79.6960571265341,
43.6400850012767
],
[
-79.6961629127738,
43.640012603549
],
[
-79.6962380127401,
43.6399612066507
],
[
-79.6964991971409,
43.6401581219518
],
[
-79.6965504313169,
43.6403222661559
]
],
[
[
-79.6965504313164,
43.6403222661554
],
[
-79.6963411179014,
43.6405181683405
]
],
[
[
-79.6973635087052,
43.6393434514529
],
[
-79.6975152035274,
43.6394534198075
],
[
-79.6974394413309,
43.6393984974797
],
[
-79.6977214702725,
43.6396029481089
]
],
[
[
-79.7037279098659,
43.6441816734685
],
[
-79.7038116627627,
43.6442425378655
],
[
-79.7043663390943,
43.6446488071586
],
[
-79.7048680167224,
43.645024186195
],
[
-79.7053904212546,
43.6454260322038
],
[
-79.7059251921243,
43.6458354437457
],
[
-79.7065612964782,
43.6461582999466
],
[
-79.7065835802603,
43.6461492141531
],
[
-79.7066775992172,
43.6462189758028
]
],
[
[
-79.6973112420145,
43.6393143090171
],
[
-79.6972862146857,
43.6393319663604
],
[
-79.6971872210635,
43.6392588377729
],
[
-79.6968127129063,
43.6395272639245
],
[
-79.6966669835105,
43.6395263250713
],
[
-79.6960609039152,
43.6399594999986
]
],
[
[
-79.6960609039152,
43.6399594999986
],
[
-79.6960181044663,
43.639990047741
]
],
[
[
-79.7032573776668,
43.6438035217788
],
[
-79.7032773647046,
43.6438182749637
],
[
-79.7032968727787,
43.6438287137889
]
],
[
[
-79.6982280590368,
43.6399996458065
],
[
-79.6983123840689,
43.6400655275078
],
[
-79.6988209765837,
43.6404574862051
],
[
-79.6997681798983,
43.6411574341786
],
[
-79.699722618622,
43.6411857721075
],
[
-79.7003863588722,
43.641677233397
],
[
-79.7008842734269,
43.6420484764154
],
[
-79.7014070294285,
43.6424381587765
],
[
-79.7024395226368,
43.643210754341
],
[
-79.7029823771679,
43.643602976107
],
[
-79.7032573776668,
43.6438035217788
]
]
]
}
}
]
}
这是我第一次使用GeoJSON，所以我需要帮助添加属性和样式所需的GeoJSON格式。加上javascript和Google Map API代码。 如果任何人都可以提供一些代码或链接到一些提供详细示例的资源，那将非常感激。
答案 0 :(得分：2)
一个选项是在加载GeoJSON时处理它，从行的每个部分创建google.maps.Polyline个对象。使用函数闭包（就像用于this question答案中的标记一样，将infowindow的位置设置为折线段的第一个点。
代码段
var colors = ["#FF0000", "#800000", "#00FF00", "#008000", "#0000FF", " #8A2BE2", "#A52A2A", "#DEB887", "#5F9EA0", "#000080", "#FFFF00", "#808000", "#FF00FF", "#800080", "#00FFFF", "#7FFFD4", "#008080", "#000000"];
var infowindow = new google.maps.InfoWindow();
function initialize() {
// Create a simple map.
features = [];
map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 14,
center: {
lat: 43.65,
lng: -79.7
}
});
// process the loaded GeoJSON data.
var bounds = new google.maps.LatLngBounds();
google.maps.event.addListener(map.data, 'addfeature', function(e) {
if (e.feature.getGeometry().getType() === 'MultiLineString') {
var polys = e.feature.getGeometry().getArray();
for (var i = 0; i < polys.length; i++) {
for (var j = 0; j < polys[i].getLength(); j++) {
var poly = new google.maps.Polyline({
map: map,
path: polys[i].getArray(),
strokeColor: colors[i % colors.length]
});
google.maps.event.addListener(poly, 'click', (function(poly, i, feature) {
return function() {
infowindow.setContent("polyline " + i+"<br>"+feature.getProperty("Line"+i));
infowindow.setPosition(polys[i].getAt(0));
infowindow.open(map);
}
})(poly, i, e.feature));
bounds.extend(polys[i].getAt(j));
}
}
map.fitBounds(bounds);
map.data.setMap(null);
} else if (e.feature.getGeometry().getType() === 'GeometryCollection') {
var polys = e.feature.getGeometry().getArray();
for (var i = 0; i < polys.length; i++) {
for (var j = 0; j < polys[i].getLength(); j++) {
bounds.extend(polys[i].getAt(j));
}
}
map.fitBounds(bounds);
}
});
map.data.addGeoJson(data);
}
google.maps.event.addDomListener(window, 'load', initialize);
var data = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"properties": {
"Key": "007",
"Line1": "<this is line 1 desc>",
"Line2": "<this is line 2 desc>",
"Line3": "<this is line 3 desc>",
"Line4": "<this is line 4 desc>",
"Line5": "<this is line 5 desc>",
"Line6": "<this is line 6 desc>",
"Line7": "<this is line 7 desc>"
},
"geometry": {
"type": "MultiLineString",
"coordinates": [
[
[-79.7066775992172,
43.6462189758028
],
[-79.7066939830514,
43.6461985074393
],
[-79.7066378408013,
43.6461605607267
],
[-79.7066097743239,
43.6461403201406
],
[-79.7064548987452,
43.6460566901385
],
[-79.7063956692058,
43.6460219372408
]
],
[
[-79.7063956692058,
43.6460219372408
],
[-79.7063852230813,
43.646033518772
],
[-79.7063166536656,
43.6461172032157
],
[-79.7064079964431,
43.6461815121163
],
[-79.7060589374119,
43.646518038823
],
[-79.7060054211382,
43.6465600820263
]
],
[
[-79.7060054211382,
43.6465600820263
],
[-79.7052588394648,
43.6471387374653
],
[-79.7048261689477,
43.6474817773536
],
[-79.7043239742464,
43.6474733374216
],
[-79.7041128202014,
43.6476608859429
],
[-79.703901284037,
43.6478509811517
],
[-79.7030237720306,
43.6486568653637
],
[-79.7029267563095,
43.6486965678914
]
],
[
[-79.7029267563091,
43.6486965678909
],
[-79.7028702942784,
43.6487267896104
],
[-79.7028019515802,
43.6487884267869
]
],
[
[-79.6949803205847,
43.6554816862022
],
[-79.6946328513629,
43.6552226727517
],
[-79.6945439505269,
43.6551559442016
]
],
[
[-79.6945439505269,
43.6551559442016
],
[-79.694066895687,
43.654797865403
],
[-79.6934193769725,
43.6543136334174
],
[-79.6924271403494,
43.6535711706703
],
[-79.6920107752268,
43.6532605761111
],
[-79.6919943721596,
43.6532604342567
]
],
[
[-79.6919943721591,
43.6532604342562
],
[-79.6914713751595,
43.6536247980162
],
[-79.6911279733848,
43.6533992300817
]
],
[
[-79.6959960003114,
43.6400049378117
],
[-79.6960571265341,
43.6400850012767
],
[-79.6961629127738,
43.640012603549
],
[-79.6962380127401,
43.6399612066507
],
[-79.6964991971409,
43.6401581219518
],
[-79.6965504313169,
43.6403222661559
]
],
[
[-79.6965504313164,
43.6403222661554
],
[-79.6963411179014,
43.6405181683405
]
],
[
[-79.6973635087052,
43.6393434514529
],
[-79.6975152035274,
43.6394534198075
],
[-79.6974394413309,
43.6393984974797
],
[-79.6977214702725,
43.6396029481089
]
],
[
[-79.7037279098659,
43.6441816734685
],
[-79.7038116627627,
43.6442425378655
],
[-79.7043663390943,
43.6446488071586
],
[-79.7048680167224,
43.645024186195
],
[-79.7053904212546,
43.6454260322038
],
[-79.7059251921243,
43.6458354437457
],
[-79.7065612964782,
43.6461582999466
],
[-79.7065835802603,
43.6461492141531
],
[-79.7066775992172,
43.6462189758028
]
],
[
[-79.6973112420145,
43.6393143090171
],
[-79.6972862146857,
43.6393319663604
],
[-79.6971872210635,
43.6392588377729
],
[-79.6968127129063,
43.6395272639245
],
[-79.6966669835105,
43.6395263250713
],
[-79.6960609039152,
43.6399594999986
]
],
[
[-79.6960609039152,
43.6399594999986
],
[-79.6960181044663,
43.639990047741
]
],
[
[-79.7032573776668,
43.6438035217788
],
[-79.7032773647046,
43.6438182749637
],
[-79.7032968727787,
43.6438287137889
]
],
[
[-79.6982280590368,
43.6399996458065
],
[-79.6983123840689,
43.6400655275078
],
[-79.6988209765837,
43.6404574862051
],
[-79.6997681798983,
43.6411574341786
],
[-79.699722618622,
43.6411857721075
],
[-79.7003863588722,
43.641677233397
],
[-79.7008842734269,
43.6420484764154
],
[-79.7014070294285,
43.6424381587765
],
[-79.7024395226368,
43.643210754341
],
[-79.7029823771679,
43.643602976107
],
[-79.7032573776668,
43.6438035217788
]
]
]
}
}]
}html,
body,
#map-canvas {
height: 100%;
margin: 0px;
padding: 0px;
width: 100%;
}<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map-canvas"></div>