我有一个geoJSON文件，其中有多条折线是滑雪道。当用户点击路径时，我希望标记出现在每条路径的开头和结尾。当用户点击它时，我可以轻松地让每条路径改变颜色，但是如何显示开始和结束标记？我在尝试解析数据时遇到错误。任何帮助，将不胜感激！
loadMap(){
var latLng = new google.maps.LatLng(46.6061645, -87.4732042);
var mapOptions = {
center: latLng,
zoom: 11,
mapTypeId: google.maps.MapTypeId.TERRAIN
}
this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);
var data = this.map.data.loadGeoJson('../assets/trails2018.geojson');
JSON.parse(data);
var trailCordinates = new Array();
for (i=0; i<data.length; i++){
trailCordinates = new google.maps.LatLng(data.features[i].geometry.coordinates);
trailPath = new google.maps.Polyline({
path: trailCordinates,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
}
trailPath.setMap(this.map);
// Set the fill color to red when the feature is clicked.
// Stroke weight remains 3.
this.map.data.addListener('click', function(event) {
this.map.data.overrideStyle(event.feature, {strokeColor: 'purple'});
var startMarker = new google.maps.Marker({
position:trailPath.getPath().getAt(0),
map:this.map
});
var endMarker = new google.maps.Marker({
position: trailPath.getPath().getAt(trailPath.getPath().getLength()-1),
map:this.map
});
});
}
以GeoJSON
{"type": "FeatureCollection", "features": [{"type":"Feature","geometry":{"type":"MultiLineString","coordinates":[[[-87.432601,46.530931],[-87.432602,46.530981],[-87.432599,46.531005],[-87.432593,46.531026],[-87.432585,46.531047],[-87.432574,46.531066],[-87.43256,46.531084],[-87.432545,46.531101],[-87.43253,46.531112],[-87.432513,46.531123],[-87.432469,46.531143],[-87.432415,46.531161],[-87.432315,46.531188],[-87.432268,46.5312],[-87.432147,46.531225],[-87.432038,46.531255],[-87.431991,46.531265],[-87.431913,46.531278],[-87.431885,46.53128],[-87.43186,46.531281],[-87.431831,46.531278],[-87.431798,46.531272],[-87.431763,46.531263],[-87.43171,46.531246],[-87.43164,46.531221],[-87.431607,46.531209],[-87.43159,46.531205],[-87.431571,46.531205],[-87.431542,46.531207],[-87.431493,46.531215],[-87.431465,46.531222],[-87.431452,46.531223],[-87.431438,46.531222],[-87.431406,46.531216],[-87.431356,46.531212],[-87.431306,46.531209],[-87.431266,46.531216],[-87.431252,46.531216],[-87.431238,46.531213],[-87.431208,46.531203],[-87.431147,46.531188],[-87.431089,46.53118],[-87.431056,46.531179],[-87.431023,46.531181],[-87.430968,46.53119],[-87.430938,46.531189],[-87.430906,46.531183],[-87.430854,46.531165],[-87.430822,46.531161],[-87.430798,46.531161],[-87.430773,46.531168],[-87.430753,46.53117],[-87.430714,46.531169],[-87.430659,46.53117],[-87.430621,46.531173],[-87.430594,46.531177],[-87.430537,46.531195],[-87.430481,46.531199],[-87.430435,46.531207],[-87.430397,46.531214],[-87.430348,46.531217],[-87.430306,46.531222],[-87.430268,46.531231],[-87.430244,46.531232],[-87.43021,46.531228],[-87.43018,46.531223],[-87.43017,46.531222],[-87.430171,46.531224],[-87.43017,46.531227],[-87.430165,46.531227],[-87.430132,46.531221],[-87.430078,46.531215],[-87.430036,46.531212],[-87.430017,46.531209],[-87.429957,46.531188],[-87.429904,46.531181],[-87.429862,46.531175],[-87.429826,46.531163],[-87.429806,46.531151],[-87.429784,46.531132],[-87.429761,46.531109],[-87.429749,46.531088],[-87.429744,46.531065],[-87.429748,46.53103],[-87.429755,46.530997],[-87.429768,46.530963],[-87.429787,46.530928],[-87.429809,46.5309],[-87.42982,46.530891],[-87.429854,46.53087],[-87.429862,46.530863],[-87.429866,46.530856],[-87.429868,46.530837],[-87.429864,46.530817],[-87.429856,46.530808],[-87.42983,46.530783],[-87.429815,46.530762],[-87.429807,46.530742],[-87.429803,46.530707],[-87.429793,46.530669],[-87.429786,46.530649],[-87.42978,46.530638],[-87.429764,46.530626],[-87.429739,46.530615],[-87.429719,46.530611],[-87.429663,46.530605],[-87.429592,46.530582],[-87.429563,46.530577],[-87.429518,46.53057],[-87.429437,46.530561],[-87.429399,46.530553],[-87.429361,46.530542],[-87.429293,46.530516],[-87.429223,46.530488],[-87.429146,46.530453],[-87.429074,46.53042],[-87.429023,46.530394],[-87.428984,46.530369],[-87.428931,46.530348],[-87.428864,46.530323],[-87.428815,46.530302],[-87.428792,46.530294],[-87.428757,46.530289],[-87.428711,46.530288],[-87.428638,46.530294],[-87.428571,46.5303],[-87.428511,46.530309],[-87.428448,46.530317],[-87.428375,46.530324],[-87.428303,46.530337],[-87.428218,46.530345],[-87.428135,46.530351],[-87.428049,46.530353],[-87.427992,46.530349],[-87.427971,46.530349],[-87.427937,46.530352],[-87.427911,46.530357],[-87.427865,46.530375],[-87.427823,46.530393],[-87.427787,46.530411],[-87.42774,46.530444],[-87.427684,46.530473],[-87.427637,46.53051],[-87.427586,46.530549],[-87.427551,46.53057],[-87.427524,46.530581],[-87.427495,46.530589],[-87.427472,46.530591],[-87.427452,46.530589],[-87.427407,46.530575],[-87.427354,46.530566],[-87.42728,46.530557],[-87.42724,46.530556],[-87.427208,46.530557],[-87.427161,46.530564],[-87.427132,46.530572],[-87.427126,46.530572],[-87.427122,46.53057],[-87.42712,46.530568],[-87.427114,46.530563],[-87.427106,46.530565],[-87.427098,46.530573],[-87.427097,46.530587],[-87.427099,46.530602],[-87.427104,46.530615],[-87.427118,46.530634],[-87.427136,46.530648],[-87.427166,46.530659],[-87.427182,46.530676],[-87.42719,46.530689],[-87.427189,46.530708],[-87.4272,46.530742],[-87.427198,46.530759],[-87.427192,46.530776],[-87.427178,46.530796],[-87.427152,46.530821],[-87.427129,46.530841],[-87.427113,46.53085],[-87.427091,46.530855],[-87.427056,46.530857],[-87.427034,46.530857],[-87.42698,46.530853],[-87.426895,46.530854],[-87.426857,46.530851],[-87.426817,46.530844],[-87.426752,46.530828],[-87.426693,46.53082],[-87.426661,46.530812],[-87.426643,46.530804],[-87.426633,46.530798],[-87.426629,46.530793],[-87.426628,46.530789],[-87.426624,46.530784],[-87.426613,46.530778],[-87.426577,46.530766],[-87.42657,46.530762],[-87.426535,46.530744],[-87.42652,46.530732],[-87.426503,46.53071],[-87.426477,46.530669],[-87.426442,46.530635],[-87.426407,46.530603],[-87.426368,46.530578],[-87.426318,46.530544],[-87.426292,46.530525],[-87.426279,46.530517],[-87.426261,46.530512],[-87.426218,46.530503],[-87.426192,46.530497],[-87.426179,46.530492],[-87.426169,46.530486],[-87.426153,46.530467],[-87.426145,46.530459],[-87.426124,46.530449],[-87.4261,46.530441],[-87.42607,46.530437],[-87.426035,46.530437],[-87.426017,46.53044],[-87.425978,46.530449],[-87.425963,46.530451],[-87.425921,46.530451],[-87.425886,46.530444],[-87.425865,46.530436],[-87.42583,46.530416],[-87.425796,46.530396],[-87.42578,46.530388],[-87.425746,46.53038],[-87.425718,46.530376],[-87.425695,46.530368],[-87.425656,46.530361],[-87.425597,46.530353],[-87.425558,46.530349],[-87.42554,46.530345],[-87.425516,46.530336],[-87.425482,46.530316],[-87.425441,46.53029],[-87.425405,46.530266],[-87.42535,46.530241],[-87.425296,46.53022],[-87.425237,46.530207],[-87.425153,46.530194],[-87.425061,46.530176],[-87.425011,46.530167],[-87.424987,46.530161],[-87.424962,46.530152],[-87.424921,46.530134],[-87.424863,46.530108],[-87.424832,46.5301],[-87.424788,46.530092],[-87.424727,46.530085],[-87.424654,46.530087],[-87.424626,46.530084],[-87.424587,46.530071],[-87.424573,46.530064],[-87.424563,46.530056],[-87.424556,46.530046],[-87.424552,46.530033],[-87.424551,46.530019],[-87.424553,46.530006],[-87.424565,46.529983],[-87.424573,46.529974],[-87.424583,46.529968],[-87.424604,46.529961],[-87.424629,46.529958],[-87.424654,46.529961],[-87.424691,46.529975],[-87.424717,46.529986],[-87.424759,46.530009],[-87.42479,46.530033],[-87.424797,46.530035],[-87.424801,46.530032],[-87.424802,46.53003],[-87.424808,46.530022],[-87.424819,46.530014],[-87.424824,46.530011],[-87.424828,46.530012],[-87.424827,46.53001],[-87.424817,46.53],[-87.424789,46.529988],[-87.424784,46.529982],[-87.424785,46.529971],[-87.424795,46.529957],[-87.424806,46.52995],[-87.42483,46.529939],[-87.424881,46.529919],[-87.424904,46.529907],[-87.42492,46.529895],[-87.424931,46.529884],[-87.424942,46.529869],[-87.42495,46.529855],[-87.424954,46.529845],[-87.424954,46.529829],[-87.424948,46.529813],[-87.424938,46.529802],[-87.424918,46.529786],[-87.424875,46.529761],[-87.424861,46.529749],[-87.424851,46.529736],[-87.424841,46.529715],[-87.424827,46.5297],[-87.424809,46.529687],[-87.424794,46.52968],[-87.424772,46.529672],[-87.424722,46.52966],[-87.424662,46.529645],[-87.424628,46.529634],[-87.424623,46.529632],[-87.424605,46.529622],[-87.424603,46.529621],[-87.424592,46.52961],[-87.424578,46.529591],[-87.424568,46.529585],[-87.424549,46.529577],[-87.424486,46.52956],[-87.424458,46.529549],[-87.424427,46.529534],[-87.424402,46.529522],[-87.42439,46.529513],[-87.424389,46.529512],[-87.424371,46.529497],[-87.424359,46.529483],[-87.424345,46.529461],[-87.424334,46.529437],[-87.424328,46.529427],[-87.424313,46.529418],[-87.424274,46.529403],[-87.424218,46.529373],[-87.424183,46.529361],[-87.424156,46.529355],[-87.424128,46.529354],[-87.424096,46.529357],[-87.424043,46.529371],[-87.424011,46.529378],[-87.423993,46.529378],[-87.423976,46.529373],[-87.423945,46.529355],[-87.423912,46.529337],[-87.423896,46.52933],[-87.423866,46.529322],[-87.423838,46.529319],[-87.423814,46.529321],[-87.423772,46.529329],[-87.423711,46.529342],[-87.423652,46.529353],[-87.423613,46.529357],[-87.423585,46.529356],[-87.423566,46.529353],[-87.423525,46.529341],[-87.423498,46.529335],[-87.423485,46.529333],[-87.423474,46.529335],[-87.423444,46.529347],[-87.423418,46.529351],[-87.423399,46.529349],[-87.423382,46.529344],[-87.423371,46.529337],[-87.423363,46.529318],[-87.423358,46.529308],[-87.423353,46.529304],[-87.42335,46.529303],[-87.423352,46.529301],[-87.423365,46.529296],[-87.423387,46.529294],[-87.423397,46.529287],[-87.423406,46.529273],[-87.423407,46.529264],[-87.423403,46.529242],[-87.423402,46.529222],[-87.423391,46.52921],[-87.423368,46.529196],[-87.423353,46.529191],[-87.423318,46.529182],[-87.423284,46.529172],[-87.423266,46.529164],[-87.423236,46.52914],[-87.423206,46.529126],[-87.423176,46.529118],[-87.423156,46.529116],[-87.423136,46.529116],[-87.423118,46.529118],[-87.423102,46.529121],[-87.423086,46.529129],[-87.423054,46.529151],[-87.42301,46.529173],[-87.422973,46.529185],[-87.42295,46.52919],[-87.42293,46.529191],[-87.422907,46.52919],[-87.422881,46.529186],[-87.422854,46.529179],[-87.422827,46.529168],[-87.422805,46.529157],[-87.422783,46.529141],[-87.422758,46.529119],[-87.422716,46.529091],[-87.422682,46.529073],[-87.422655,46.529063],[-87.42263,46.529059],[-87.422569,46.529056],[-87.422499,46.52905],[-87.42248,46.529046],[-87.422465,46.52904],[-87.422447,46.52903],[-87.422432,46.529019],[-87.422421,46.529007],[-87.422416,46.528996],[-87.422415,46.528985],[-87.422419,46.528972],[-87.422427,46.528956],[-87.42244,46.52894],[-87.42245,46.52893],[-87.422465,46.52892],[-87.422508,46.528897],[-87.422549,46.528881],[-87.422606,46.528865],[-87.422671,46.528856],[-87.422684,46.528853],[-87.422695,46.528848],[-87.422721,46.52883],[-87.422729,46.52882],[-87.422734,46.528811],[-87.422733,46.5288],[-87.422726,46.528788],[-87.422712,46.528773],[-87.422688,46.528753],[-87.422666,46.528739],[-87.422621,46.528715],[-87.422559,46.52869],[-87.422546,46.528682],[-87.422538,46.528674],[-87.422532,46.528664],[-87.422532,46.528658],[-87.422538,46.528651],[-87.42255,46.528644],[-87.422562,46.528642],[-87.422586,46.528643],[-87.422656,46.528651],[-87.422674,46.528651],[-87.422717,46.528647],[-87.422738,46.528647],[-87.422759,46.528654],[-87.422806,46.528684],[-87.422818,46.52869],[-87.422829,46.528693],[-87.422849,46.528695],[-87.422871,46.528695],[-87.422895,46.528693],[-87.422918,46.52869],[-87.422941,46.528685],[-87.42295,46.528681],[-87.42295,46.528672],[-87.422941,46.528656],[-87.422929,46.528645],[-87.422908,46.528632],[-87.422895,46.528627],[-87.422879,46.528624],[-87.422806,46.52862],[-87.422777,46.528614],[-87.422762,46.528607],[-87.422728,46.528586],[-87.42271,46.528579],[-87.422688,46.528575],[-87.422645,46.528573],[-87.422542,46.528569],[-87.422431,46.528568],[-87.422258,46.528556],[-87.422217,46.528556],[-87.422199,46.528554],[-87.422174,46.528547],[-87.422142,46.528531],[-87.422125,46.528521],[-87.422086,46.528491],[-87.422036,46.528463],[-87.422019,46.528451],[-87.422001,46.528435],[-87.42196,46.528388],[-87.421906,46.528343],[-87.421863,46.528316],[-87.421855,46.528309],[-87.421851,46.528302],[-87.42185,46.528295],[-87.421853,46.528287],[-87.421873,46.528256],[-87.421879,46.528244],[-87.421883,46.528223],[-87.421885,46.528186],[-87.421888,46.528149],[-87.421886,46.528128],[-87.42188,46.528114],[-87.421858,46.528078],[-87.42184,46.528028],[-87.421807,46.527974],[-87.421784,46.527928],[-87.42178,46.527913],[-87.421781,46.527899],[-87.421787,46.527885],[-87.421809,46.527857],[-87.421816,46.527845],[-87.421823,46.527827],[-87.421824,46.527816],[-87.421818,46.527804],[-87.421793,46.527779],[-87.421777,46.527741],[-87.421771,46.527734],[-87.421765,46.527729],[-87.421747,46.527724],[-87.421699,46.52772],[-87.421615,46.527701],[-87.421547,46.527686],[-87.421518,46.527679],[-87.421504,46.527675],[-87.421493,46.527668],[-87.421471,46.527651],[-87.421422,46.527621],[-87.421378,46.527583],[-87.421349,46.527567],[-87.421325,46.527558],[-87.421307,46.527556],[-87.42127,46.527554],[-87.421211,46.52755],[-87.42115,46.527537],[-87.421083,46.527519],[-87.421057,46.52751],[-87.421042,46.527503],[-87.421023,46.52749],[-87.421014,46.527479],[-87.421012,46.52747],[-87.421017,46.527455],[-87.421018,46.52744],[-87.421016,46.527423],[-87.421011,46.527405],[-87.421004,46.527395],[-87.420994,46.527389],[-87.42099,46.527385],[-87.420989,46.527378],[-87.420995,46.527363],[-87.42101,46.527347],[-87.421018,46.527342],[-87.421027,46.527339],[-87.421052,46.527342],[-87.42106,46.52734],[-87.421061,46.527339],[-87.421062,46.527339],[-87.421064,46.527338],[-87.421065,46.527338],[-87.421066,46.527337],[-87.421067,46.527337],[-87.421068,46.527336],[-87.42107,46.527336],[-87.421071,46.527335],[-87.421073,46.527335],[-87.421075,46.527334],[-87.421077,46.527334],[-87.42108,46.527333],[-87.421088,46.527331],[-87.421096,46.527331],[-87.421104,46.527333],[-87.421106,46.527334],[-87.421106,46.527337],[-87.421107,46.52734],[-87.421108,46.527342],[-87.42111,46.527344],[-87.421114,46.527343],[-87.421135,46.527334],[-87.421167,46.527325],[-87.421213,46.527305],[-87.421266,46.527281],[-87.421318,46.527252],[-87.421376,46.527232],[-87.421404,46.52722],[-87.421425,46.527208],[-87.421442,46.527196],[-87.421463,46.527177],[-87.421498,46.52714],[-87.421514,46.527129],[-87.421552,46.527108],[-87.42159,46.527085],[-87.421641,46.52705],[-87.421666,46.527038],[-87.421701,46.527023],[-87.421754,46.527004],[-87.421814,46.526975],[-87.421866,46.526942],[-87.421925,46.526919],[-87.421961,46.526905],[-87.421979,46.526896],[-87.422006,46.526876],[-87.422042,46.526863],[-87.422079,46.526847],[-87.422147,46.526827],[-87.422164,46.526818],[-87.422201,46.526795],[-87.422232,46.526776],[-87.422251,46.526769],[-87.42227,46.526765],[-87.422295,46.526763],[-87.42232,46.526763],[-87.422355,46.526765],[-87.422406,46.526771],[-87.42244,46.526771],[-87.422479,46.526767],[-87.42251,46.526763],[-87.422528,46.526758],[-87.422547,46.526749],[-87.422583,46.526734],[-87.422593,46.526731],[-87.42262,46.526725],[-87.422643,46.526723],[-87.422661,46.526724],[-87.422681,46.526727],[-87.422723,46.52674],[-87.422746,46.52674],[-87.42279,46.526732],[-87.422808,46.52673],[-87.42285,46.52673],[-87.422875,46.526734],[-87.422909,46.526755],[-87.422924,46.526759],[-87.422948,46.526763],[-87.422984,46.526768],[-87.423006,46.526767],[-87.423025,46.526759],[-87.423061,46.526735],[-87.423117,46.526703],[-87.423132,46.52669],[-87.423161,46.526653],[-87.423177,46.526638],[-87.423229,46.526606],[-87.423279,46.526584],[-87.423289,46.526578],[-87.423296,46.526571],[-87.423308,46.52655],[-87.42331,46.526538],[-87.423309,46.526509],[-87.42331,46.526485],[-87.423315,46.526474],[-87.423327,46.526465],[-87.42334,46.526458],[-87.423361,46.526455],[-87.423384,46.526458],[-87.423399,46.526463],[-87.423416,46.526475],[-87.423427,46.526486],[-87.423448,46.526518],[-87.423461,46.526534],[-87.423471,46.526542],[-87.423483,46.526544],[-87.423516,46.526544],[-87.423529,46.526546],[-87.42356,46.52656],[-87.42359,46.526569],[-87.423624,46.526576],[-87.423656,46.52658],[-87.423681,46.52658],[-87.423713,46.526576],[-87.423737,46.526568],[-87.423758,46.526554]]]},"properties":{"cartodb_id":32,"objectid":72,"loop_name":"PIONEER LOOP","caretaker":"NOQUEMANON TRAIL NETWORK (NTN)","yr_built":2010,"trl_sys":"SOUTH MARQUETTE TRAIL SYSTEM (SOUTH TRAILS)","trail_name":"GREYWALLS TRAIL","name2":null,"name3":null,"website":"http://www.noquetrails.org/","summer_use":"MOUNTAIN BIKING, TRAIL RUNNING, HIKING (NON MOTORIZED)","winter_use":"SNOWSHOEING (NON MOTORIZED)","approx_wid":"1 to 2 FEET WIDE","surface_ty":"DIRT","trail_type":"SINGLETRACK","name":"PIONEER LOOP","shape_leng":5641.44443071,"info":null,"groomed":null,"riding_dir":"TWO DIRECTIONS","skill_leve":"INTERMEDIATE","trailhead":"SOUTH TRAILS COUNTY ROAD 553"}}]}
答案 0 :(得分：-1)
没有经过测试，你的代码中有些东西我不清楚，但我想你会想要为折线而不是地图本身分配一个click处理程序
loadMap(){
var trail,path;
var markers=[];
var clearMarkers=function(){
markers.forEach(function(mkr){
mkr.setMap( null );
});
markers=[];
};
var latLng = new google.maps.LatLng(46.6061645, -87.4732042);
var mapOptions = {
center: latLng,
zoom: 11,
mapTypeId: google.maps.MapTypeId.TERRAIN
}
this.map = new google.maps.Map( this.mapElement.nativeElement, mapOptions );
var _map = this.map;/* used as a reference within path click event handler */
var data = this.map.data.loadGeoJson( '../assets/trails2018.geojson' );
/* do you need to parse the data??? */
data = JSON.parse( data );
for( i=0; i < data.length; i++ ){
trail = new google.maps.LatLng( data.features[i].geometry.coordinates );
path = new google.maps.Polyline({
path: trail,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
/* add listener to the path - callback bound to the path */
path.addListener( 'click', function(event){
_map.overrideStyle( event.feature, { strokeColor:'purple' } );
clearMarkers.call( this );
markers.push( new google.maps.Marker({
position:this.getPath().getAt(0),
map:_map
}));
markers.push( new google.maps.Marker({
position: this.getPath().getAt( this.getPath().getLength() - 1 ),
map:_map
}));
}.bind( path ) );
}
}
<强>更新
添加地理数据样本后，我使用了这些数据。我复制并保存到文件并使用PHP而不是上面的方法加载 - 即map.data.loadGeoJson(url)并且它工作正常。最初我认为这是你的设计的功能，但在谷歌搜索时发现。然后我研究了这个方法是什么（我之前从未使用过它）并且发现它非常非常容易加载数据（正如你在注释中建议的那样出现了路径，但是读取json数据会出现语法错误）〜我花了更长的时间在这方面，我应该但是找不到如何从这些数据中提取特定点以用于在路径的开始/结束时构建标记。那说我在下面包含了我用来显示数据的代码，希望你可以从中收集你所需要的东西（我猜想你有php运行，如果没有那么这将是没用的）
<?php
$file=__DIR__ . '/skitrails.json';
$json=trim( file_get_contents( $file ) );
?>
<html>
<head>
<meta charset='utf-8' />
<title>Google Maps: Polyline Paths</title>
<script>
<?php
/*
add trails as javascript object
*/
echo "
var skitrails={$json};";
?>
</script>
<script async defer src="//maps.google.com/maps/api/js?key=<KEY>&callback=initMap"></script>
<script>
var map;
function initMap(){
'use strict';
var div,startMarker,endMarker,trails,trail,path,paths,_trails,_features;
var options,latlng,marker,markers,colours,colour,_properties;
colours=['green','blue','red','black'];
markers=[];
paths=[];
var clearMarkers=function(){
markers.forEach(function(mkr){
mkr.setMap( null );
}.bind( markers ));
markers=[];
};
var resetPaths=function(obj){
obj.forEach( function( path ){
path.setOptions({ strokeColor:path.origStrokeColour });
});
};
div=document.getElementById('map');
var usa=new google.maps.LatLng( 46.5292104377584, -87.42428541183472 );
var infoWindow = new google.maps.InfoWindow();
options = {
zoom: 15,
center: usa,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map( div, options );
/* add complex ski-trails */
_features = skitrails.features;
for( var j=0; j < _features.length; j++ ){
_trails = _features[ j ].geometry.coordinates;
_properties = _features[ j ].properties;
for( var i=0; i < _trails.length; i++ ){
trail=[];
_trails[ i ].forEach(function(obj){
trail.push( new google.maps.LatLng( obj[1], obj[0] ) );
});
colour=colours[ Math.floor( Math.random() * colours.length ) ];
/* create new polyline */
path = new google.maps.Polyline({
path: trail,
title: [ _properties.trail_name, _properties.trail_type ].join(', '),
geodesic: true,
strokeColor: colour,
strokeOpacity: 1.0,
strokeWeight: 3,
origStrokeColour:colour,
properties:_properties
});
path.setMap( map );
paths.push( path );
path.addListener( 'click', function( event ){
/* remove other markers */
clearMarkers.call( this );
/* reset colours of paths */
resetPaths.call( this, paths );
/* set this path colour */
this.setOptions( { strokeColor:'purple' } );
/* add markers at start & end */
markers.push( new google.maps.Marker({
position:this.getPath().getAt(0),
title:'Trail start',
map:map
}));
markers.push( new google.maps.Marker({
position: this.getPath().getAt( this.getPath().getLength() - 1 ),
title:'Trail end',
map:map
}));
/* Infowindow @ halfway point along trail */
infoWindow.open( map, this );
infoWindow.setContent( this.title );
infoWindow.setPosition( this.getPath().getAt( Math.floor( this.getPath().getLength() / 2 ) ) );
}.bind( path ) );
}
}
}
</script>
<style>
#container{
width: 80%;
height: 80vh;
box-sizing:border-box;
margin: auto;
float:none;
margin:1rem auto;
}
#map {
width: 100%;
height: 100%;
clear:none;
display:block;
}
</style>
</head>
<body>
<div id='container'>
<div id='map'></div>
</div>
</body>
</html>
希望你能理解上述内容并发现它有用。如果我发现如何使用谷歌方法从数据中提取相关点，我将更新。
在看到关于feature.getGeometry()的最后一条消息后，快速重新散列了演示产生了这一点 - 似乎有效（尽管我认为不止一条路径需要额外的逻辑）
<html>
<head>
<meta charset='utf-8' />
<title>Google Maps: Polyline Paths</title>
<script async defer src='//maps.google.com/maps/api/js?key=AIzaSyAo5sJjK2fPTSX1Px3ukaTnzBdDextWai4&callback=initMap'></script>
<script>
var map;
var datafile='skitrails.json';/* change this to suit */
function initMap(){
'use strict';
var div,path,usa,infoWindow,_path,_start,_end;
var options,latlng,marker,markers;
markers=[];
var clearMarkers=function(){
markers.forEach( function( mkr ){
mkr.setMap( null );
}.bind( markers ) );
markers=[];
};
div=document.getElementById('map');
usa=new google.maps.LatLng( 46.5292104377584, -87.42428541183472 );
infoWindow = new google.maps.InfoWindow();
options = {
zoom: 15,
center: usa,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map( div, options );
var data = map.data.loadGeoJson( datafile );
map.data.addListener('click', function(event) {
clearMarkers.call( this );
_path = event.feature.getGeometry().getAt(0).getArray();
_start= event.feature.getGeometry().getAt(0).getAt( 0 );
_end = event.feature.getGeometry().getAt(0).getAt( _path.length-1 );
markers.push( new google.maps.Marker({
position:_start,
title:'Trail start',
map:map
}));
markers.push( new google.maps.Marker({
position:_end,
title:'Trail end',
map:map
}));
map.data.overrideStyle( event.feature, { strokeColor: 'purple' } );
});
}
</script>
<style>
#container{
width: 80%;
height: 80vh;
box-sizing:border-box;
margin: auto;
float:none;
margin:1rem auto;
}
#map {
width: 100%;
height: 100%;
clear:none;
display:block;
}
</style>
</head>
<body>
<div id='container'>
<div id='map'></div>
</div>
</body>
</html>