Google Maps API向信息窗口添加標記的緯度和經度

Question

我在互聯網上找到了Google Maps腳本，您在其中將折線的坐標放置在腳本中，並且沿着該折線在特定距離（一旦單擊按鈕）上添加了標記，我將其從2km更改為每一半英里。 現在，我希望信息窗口顯示單擊的標記所在的緯度和經度。 這是我遇到問題的地方，正在研究如何顯示經緯度。

以下是我正在使用的腳本：

<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>

謝謝。

Answer 1

像這樣將坐標添加到信息窗口：

google.maps.event.addListener(marker, 'click', function() {
    infowindow.setContent("<div style='height:60px;width:200px;'>"+contentString+"<br>coordinates:"+marker.getPosition().toUrlValue(6)+"</div>"); 
    infowindow.open(map,marker);
    });

工作實例

Google Maps API向信息窗口添加標記的緯度和經度

問題描述

1 個解決方案

解決方案1
0 已采納 2013-11-05 13:39:16

Google Maps API向信息窗口添加標記的緯度和經度

問題描述

1 個解決方案

解決方案1 0 已采納 2013-11-05 13:39:16

解決方案1
0 已采納 2013-11-05 13:39:16