インターネットで Google マップ スクリプトを見つけました。スクリプトにポリラインの座標を配置すると、そのポリラインに沿って特定の距離 (ボタンをクリックすると) にマーカーが追加されます。これを 2 km から半分ごとに変更しましたマイル。ここで、情報ウィンドウに、クリックされたマーカーの位置の緯度と経度を表示したいと考えています。これは、緯度/経度を表示する方法を考え出して、問題を抱えているところです。
以下は私が使用しているスクリプトです：
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<html>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Rute fra BikeLog.dk</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="scripts/v3_epoly.js" type="text/javascript"></script>
<script type="text/javascript">
var mArray = Array();
var map;
var centerPoint = new google.maps.LatLng(40.078071,-101.689453);
var rutedata="-3.820032711932648,51.63734227099246zz-3.819742787105342,51.63946917210307zz-3.819587985130334,51.64165728538587zz-3.819575926492226,51.6427836208285zz-3.819741177484546,51.64464562646471zz-3.819907235039083,51.6463266084514zz-3.819830084275106,51.64702819692947zz-3.819548526011571,51.64776245925978zz-3.819196814663496,51.64839831625601zz-3.818732452698146,51.64904185666086zz-3.817993403612246,51.6497994735504zz-3.81722674396513,51.65035385690702zz-3.816124812939463,51.65104851646516zz-3.815255599373889,51.65163105491444zz-3.814585325838475,51.65220564695445zz-3.813906536194451,51.65302871494574zz-3.813211406228633,51.65404958446767zz-3.81235071041748,51.65527659733352zz-3.811621565812506,51.6562682505463zz-3.810821913590897,51.65729804965309zz-3.809491484858255,51.65881837221467zz-3.808574750884533,51.65997133820431zz-3.807999391941833,51.66080081077956zz-3.807626667367479,51.66146341122033zz-3.807110192215642,51.66274995560568zz-3.806933242045067,51.66341164111771zz-3.806925096126677,51.66423895415419zz-3.807144818947904,51.66498350940589zz-3.807632916195104,51.66573017071269zz-3.808366191208394,51.66636960798599zz-3.809143804865149,51.66683581702814zz-3.81004437259275,51.66718402996682zz-3.811150858434821,51.66748045697277zz-3.812565663088233,51.6676102847878zz-3.8135498984693,51.66758103288726zz-3.814611689970172,51.66744718541713zz-3.815704445587746,51.6672277862452zz-3.817924746286262,51.66674914733883zz-3.820945274577878,51.66614101562163zz-3.824669551554861,51.66532927939414zz-3.826101481491075,51.66490998813959zz-3.827222166993514,51.66445896151418zz-3.829112269712561,51.66359565010596zz-3.830821166194494,51.66289719755962zz-3.831868693560803,51.6626293345319zz-3.833145385033823,51.66237279591687zz-3.834687700123105,51.66214252050868zz-3.836333863915854,51.66208047766168zz-3.837880659936722,51.66209676737823zz-3.839314754183747,51.66220253720433zz-3.841268215889762,51.66224167732288zz-3.842540350086555,51.66218882515322zz-3.843903891567451,51.66203350482542zz-3.845507545830393,51.66170723041013zz-3.846967899289933,51.66138371325726zz-3.849380070903456,51.66084676279886zz-3.852383029491589,51.66020776525423zz-3.855228430318046,51.65962047807282zz-3.857893308372362,51.65907616503673zz-3.859973882099176,51.65881662057148zz-3.862448887126361,51.65852377690303zz-3.866538527919156,51.65808988240889zz-3.868216477999567,51.65803983848019zz-3.869542873115019,51.65812124867626zz-3.870940016923744,51.65831032270393zz-3.871898753308196,51.65850708049345zz-3.873210983763473,51.65884214107916zz-3.874336331601819,51.65928977339488zz-3.875736389796277,51.6599749604181zz-3.876841142304701,51.66049156538135zz-3.878050918856717,51.6609552347554zz-3.879461903227499,51.66134347491663zz-3.880932388964156,51.66155154995987zz-3.882317167510557,51.66165474955614zz-3.883944241303945,51.66162181780003zz-3.885835261907431,51.66146583003788zz-3.887461426716091,51.66125875936857zz-3.889084010457329,51.66098851393683zz-3.890916820876142,51.66057693733306zz-3.892012133069137,51.66026470044785zz-3.89332654439301,51.65983114010705zz-3.894259906839191,51.65949331393408zz-3.896033488381612,51.6588124639907zz-3.899004635838507,51.65773602083915zz-3.901857980893289,51.65657655435025zz-3.904473297843574,51.65543659593228zz-3.906515975441493,51.65455956238576zz-3.909465385112796,51.65310211551919zz-3.91080955257666,51.65228581024843zz-3.912360851938169,51.65112709386425zz-3.91380856289927,51.64993120451296zz-3.91475431755497,51.64934538552707zz-3.91599426084994,51.64877541873416zz-3.917121732680178,51.64840591238669zz-3.919074654856072,51.64798507538692zz-3.922100051292795,51.64746262953391zz-3.926733953066623,51.64660910511501zz-3.931949484578015,51.6456851494244zz-3.935073036629844,51.64509522062613zz-3.93586511834632,51.64488674713341zz-3.936785371716167,51.64454159684318zz-3.937309558665784,51.64420758139478zz-3.938056163772941,51.64364774301891zz-3.938699685091035,51.64299007210108zz-3.939064361603703,51.64237048537338zz-3.939308588544793,51.64189184234586zz-3.939320652828346,51.64119592129678zz-3.939285023176557,51.64074492859065zz-3.939120901446111,51.64032890534872zz-3.938829976428914,51.63990220144389zz-3.938364563438866,51.6394282839645zz-3.937872005153768,51.6389164212018zz-3.937567217674652,51.63857661420762zz-3.937370608738211,51.63827146814131zz-3.937178442167795,51.63776033595438zz-3.937076855299857,51.63728871145579zz-3.936753386110004,51.63599015714684zz-3.936565920349558,51.63482714365205zz-3.936573956568928,51.63422906929402zz-3.93661095770991,51.63322633914955zz-3.936885588178396,51.63182287005885zz-3.937221290085899,51.63067869338558zz-3.937622065450893,51.62983322435667zz-3.937990207339967,51.62884022399988zz-3.938445336279532,51.62797299059176zz-3.939266024247426,51.62669522579847zz-3.939823628981283,51.62607139646785zz-3.940399852917769,51.62566599964357zz-3.940868167195306,51.62533420556833zz";
var points = new Array();
var coordinates = new Array();
var landmarks = [];
var polyline = null;
var map = null;
var bounds = null;
var infowindow = new google.maps.InfoWindow(
{
size: new google.maps.Size(150,50)
});
function load() {
doLoad();
loaddata();
}
function doLoad() {
var myOptions = {
zoom: 7,
center: new google.maps.LatLng(56.1, 10.7),
mapTypeControl: true,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
navigationControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});
bounds = new google.maps.LatLngBounds();
}
function createMarker(point,html) {
var contentString = html;
var marker = new google.maps.Marker({
position: point,
map: map,
title: name,
zIndex: Math.round(point.lat()*-100000)<<5
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(contentString);
infowindow.open(map,marker);
});
return marker;
}
function km_on() {
if (landmarks.length && (landmarks.length > 0)) {
for (var i=0; i<landmarks.length; i++) landmarks[i].setMap(map);
} else {
for (var i=0; i<polyline.Distance(); i+=804.672) {
var km_point = polyline.GetPointAtDistance(i);
if (km_point) {
var infoWindowContent = "marker "+Math.floor(polyline.Distance()/2000)+"<br>kilometer "+i/1000+" of "+(polyline.Distance()/1000).toFixed(2);
var landmark = createMarker(km_point, infoWindowContent);
landmarks.push(landmark);
}
}
}
}
function km_off() {
for (var i=0; i<landmarks.length; i++)
landmarks[i].setMap(null);
}
function loaddata() {
var pointsud = new Array();
coordinates.lenght = 0;
points = rutedata.split("zz");
for (var i=1; i<(points.length-1); i++) {
var mData = points[i].split(',');
var point = new google.maps.LatLng(parseFloat(mData[1]),parseFloat(mData[0]));
coordinates[ coordinates.length ] = [ point.lat(), point.lng() ];
pointsud.push(point);
}
polyline = new google.maps.Polyline({
path: pointsud,
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 2
});
// topoDrawGraph( document.getElementById("graph"), coordinates, 950, 600 );
polyline.setMap(map);
var bounds = new google.maps.LatLngBounds();
bounds = polyline.Bounds();
map.fitBounds(bounds);
for (var i=0; i<polyline.Distance(); i+=402.336) {
var pointkm = polyline.GetPointAtDistance(i);
if (pointkm) {
// GLog.write(pointkm);
//landmark = new GMarker(pointkm);
//map.addOverlay(landmark);
}
}
}
</script>
</head>
<body onload="load()" >
<table border=0 cellpadding=0 cellspacing=0 width=1000 align=center>
<tr>
<td colspan=3 align=center> <div id="map_canvas" style="width: 1000px; height: 500px; charset=utf8"></div></td>
</tr>
<tr>
<td colspan=3 align=center> <div id="graph"></div></td>
</tr>
</table>
<p style="font-size:18px; float:left;">Mile</p>
<form action="get" method="post">
<div>
<input type="button" name="Reset" value="on" onclick="km_on()"
style="font-size:14px; width:40px; background-color:#B2FF7F; margin-left:5px;" />
<span style="font-size:14px; vertical-align:20%";><b>Half Mile</b></span>
<input type="button" name="Reset" value="off" onclick="km_off()"
style="font-size:14px; width:40px; background-color:#B2FF7F;">
</div>
</form>
</body>
</html>
ありがとうございました。