Avatar billede compac Seniormester
14. juni 2010 - 15:48 Der er 6 kommentarer og
1 løsning

Knap oven på Gmap-kort

Jeg kunne tænke mig at sætte en "tilbage-knap" oven på et kort lavet i Google Maps:

Kode:

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps JavaScript API Example</title>
      <style type="text/css">       
            v\:* {
                behavior:url(#default#VML);
            }
        </style>
        <!-- Make the document body take up the full screen -->
        <style type="text/css">
        html, body {width: 100%; height: 100%}
        body {margin-top: 0px; margin-right: 0px; margin-left: 0px; margin-bottom: 0px;}
        </style>                             
    <script type="text/javascript"src="http://maps.google.com/maps?file=api&v&key=ABQIAAAAajCtqqFUu9n7EPvQIA0qUhQ53NEMdPfN9X999eh7XMUF4EbInkK9xST_E2KAUqAVKznR78184JULp9Kwg">
    </script>
    <script type="text/javascript">
    //<![CDATA[
    function load() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map"));
        map.setCenter(new GLatLng(34.019968,-118.289988), 17);
    map.setMapType(G_HYBRID_MAP);
    map.addControl(new GSmallMapControl());
    map.addControl(new GScaleControl());
    map.addControl(new GMapTypeControl());
    map.addControl(new GOverviewMapControl());
    var marker = new GMarker(new GLatLng(34.019968,-118.289988));
    map.addOverlay(marker);
    marker.openInfoWindowHtml("<img src='http://gamepipe.usc.edu/images/GamePipeLogoSmall.jpg' width='128' height='41'/> <br/> USC GamePipe Lab<br/> 3650 McClintock Ave, Los Angeles CA");
      }
    }
    //]]>
    </script>
  </head>
  <body onload="load()" onunload="GUnload()">
  <div id="map" style="width: 100%; height: 100%;"></div>
  </body>
</html>

Knap:

<input type= "button"  value="Tilbage"  onclick="history.back()" style="cursor:pointer;">

Men hvordan får jeg den tilføjet?
Avatar billede jfx Nybegynder
14. juni 2010 - 16:21 #1
<div style="position: absolute; top: 10px; left: 10;">
<input type= "button"  value="Tilbage"  onclick="history.back()" style="cursor:pointer;"></div>


Koden vil placere det der imellem <div> og </div>, 10px nede for top og 10px fra left:

se billede:
http://www.html.dk/tutorials/css/figur017.gif

-----------------------------------------------------------------
Hvordan din kode skal se ud
-----------------------------------------------------------------


<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps JavaScript API Example</title>
      <style type="text/css">     
            v\:* {
                behavior:url(#default#VML);
            }
        </style>
        <!-- Make the document body take up the full screen -->
        <style type="text/css">
        html, body {width: 100%; height: 100%}
        body {margin-top: 0px; margin-right: 0px; margin-left: 0px; margin-bottom: 0px;}
        </style>                           
    <script type="text/javascript"src="http://maps.google.com/maps?file=api&v&key=ABQIAAAAajCtqqFUu9n7EPvQIA0qUhQ53NEMdPfN9X999eh7XMUF4EbInkK9xST_E2KAUqAVKznR78184JULp9Kwg">
    </script>
    <script type="text/javascript">
    //<![CDATA[
    function load() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map"));
        map.setCenter(new GLatLng(34.019968,-118.289988), 17);
    map.setMapType(G_HYBRID_MAP);
    map.addControl(new GSmallMapControl());
    map.addControl(new GScaleControl());
    map.addControl(new GMapTypeControl());
    map.addControl(new GOverviewMapControl());
    var marker = new GMarker(new GLatLng(34.019968,-118.289988));
    map.addOverlay(marker);
    marker.openInfoWindowHtml("<img src='http://gamepipe.usc.edu/images/GamePipeLogoSmall.jpg' width='128' height='41'/> <br/> USC GamePipe Lab<br/> 3650 McClintock Ave, Los Angeles CA");
      }
    }
    //]]>
    </script>
  </head>
  <body onload="load()" onunload="GUnload()">
  <div id="map" style="width: 100%; height: 100%;"></div>


<div style="position: absolute; top: 10px; left: 10;">
<input type= "button"  value="Tilbage"  onclick="history.back()" style="cursor:pointer;"></div>


</body>
</html>
Avatar billede jfx Nybegynder
14. juni 2010 - 16:23 #2
håber det kunne hjælpe :)
Avatar billede intenz Novice
14. juni 2010 - 17:13 #3
->#1
Det vil da kun hjælpe hvis det er en test side man arbejder med. Prøv at centrer kortet på en rigtig hjemmeside, og så lav en absolut position så knappen placeres rigtigt. Prøv så at ændre opløsningen på skærmen og se hvad der sker.

->#0
Du skal hente positionen på dit kort, og så opdatere positionen på din knap. Det kan være lidt tricky, men jeg har lavet en funktion til dig:


function positionElement(target, source, left, top) {

    // hent position på source
    var obj = document.getElementById(source);
    var curleft = curtop = 0;
    if (obj.offsetParent) {
        curleft = obj.offsetLeft
        curtop = obj.offsetTop
        while (obj = obj.offsetParent) {
            curleft += obj.offsetLeft
            curtop += obj.offsetTop
        }
    }

    // sæt position på target
    var e = document.getElementById(target);
    e.style.position = 'absolute';

    // sæt position
    e.style.left = curleft+left;
    e.style.top = curtop+top;
}


Og så skal du køre funktion i din eksisterende load() f.eks. her:

map.addOverlay(marker);
    marker.openInfoWindowHtml("<img src='http://gamepipe.usc.edu/images/GamePipeLogoSmall.jpg' width='128' height='41'/> <br/> USC GamePipe Lab<br/> 3650 McClintock Ave, Los Angeles CA");
      }

      positionElement('map_button', 'map', 10, 10); // <---

    }

Du skal sætte et ID på din knap (f.eks. map_button), så skrive ID på dit kort (map), og hvor du vil have den placeret i forhold til kortet absolute position beregnes fra øverste venstre hjørne. (Her left=10, top=10).

Den kan også bruges til at vælge position på alt muligt andet end et google map.
Avatar billede jfx Nybegynder
14. juni 2010 - 17:51 #4
det virker fint her: http://deplox.dk/chat/chat.php

log ind med "1", "2" eller "3"
Avatar billede intenz Novice
14. juni 2010 - 18:13 #5
#4 -> prøv at flyt boksen et andet sted hen end venstre højre hjørne.
Avatar billede jfx Nybegynder
14. juni 2010 - 19:23 #6
#5 Det er rigtigt :) - men kunne man så ikke bare i compacs tilfælde, sætte kortet ind i et iframe?
Avatar billede intenz Novice
15. juni 2010 - 00:16 #7
Jo måske, men der følger også andre problemer med at bruge en iframe. Iframes bør undgås, da de er svære at kontrollere og svære at implementere på tværs af platforme.

Det smarteste må være at få klienten (broweren) til at finde ud af hvor dén mener den skal placeres, udfra hvor kortets præcise placering er. Så er man sikker på man altid rammer samme sted. Som i den kode jeg skrev i #3.
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester