tutorials.de Buch-Aktion 05/2012
ERLEDIGT
JA
ANTWORTEN
2
ZUGRIFFE
1083
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
AUF DIESES THEMA
ANTWORTEN
  1. 28.03.10 15:22 #1
    jbender jbender ist offline Grünschnabel
    Registriert seit
    Mar 2010
    Beiträge
    2
    Hallo,

    ich möchte das Bsp. über Reverse Geocoding auf meine Seite anwenden, die jedoch im Gegensatz zum Bsp. mehrere Maps enthält. (Jede Map zeigt eine andere Location an.)
    Dieses Bsp. habe ich daher ausgesucht, weil ich folg. Funktionalitäten nützlich fand:
    - Event-handler GEvent.addListener checkt evtl. Klicks auf eine best. Map und öffnet in dieser Map ein Info-Window "openInfoWindowHtml()"
    - Info-Window enthält (human-readable) Adressen (reversely geocoded aus der geklickten Location/Geocode)

    Mein Problem als Anfänger ist, wie ich das Bsp. auf meinen Fall (mehrere Maps) übertragen kann:
    Benötige ich ein Array von map-Variablen, wie z.B.
    Code :
    1

    var maps=new Array(map1, map2, ...);
    ?
    Und wie müssen dann die Funktionen "getAddress()" und "showAddress()" geändert werden, die ja nur mit einer Var. map arbeiten?

    Vielen Dank schon mal für eure Hilfe!
    Jonathan
     
    Zitieren Zitieren
  2. 29.03.10 02:52 #2
    Avatar von Sven Mintel
    Sven Mintel Sven Mintel ist offline Mitglied
    Registriert seit
    Aug 2003
    Beiträge
    18.238
    Blog-Einträge
    6
    Moin,

    dies Beispiel(wie eigentlich die meisten Beispiele zu Google-Maps) ist dafür ansich ungeeignet, weil es generell davon ausgeht, dass es nur 1 Map gibt.

    Um es für mehrere Maps tauglich zu Machen, muss man ein wenig mit Objekten arbeiten, anders ist es da kaum möglich, den Bezug zwischen Funktion und passender Map herzustellen.

    Habs mal umgefummelt.

    Das Skript:
    Code :
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

    <script type="text/javascript">
 
 
    function initialize()
    {
      for(var i=0;i<arguments.length;++i)
      {
        new map(arguments[i].id,arguments[i].opts)
      }
    }
    
    
    function map(id,opts)
    { 
      
      this.map=new GMap2(document.getElementById(id));
      this.map.setCenter(new GLatLng(opts.lat,opts.lng),opts.zoom);
      this.map.setUIToDefault();
      this.geocoder = new GClientGeocoder();
      var _this=this;
      
      this.getAddress=function(overlay, latlng)
                      {
                        if (latlng != null) 
                        {
                          _this.geocoder.getLocations(latlng, _this.showAddress);
                        }
                      };
      this.showAddress=function(response) 
                      {
                        _this.map.clearOverlays();
                        if (!response || response.Status.code != 200) 
                        {
                          alert("Status Code:" + response.Status.code);
                        } 
                        else 
                        {
                          var place = response.Placemark[0];
                          var point = new GLatLng(place.Point.coordinates[1],
                                                  place.Point.coordinates[0]);
                          var marker = new GMarker(point);
                          _this.map.addOverlay(marker);
                          marker
                            .openInfoWindowHtml(
                              '<b>orig latlng:</b>' + response.name + '<br/>' + 
                              '<b>latlng:</b>' + place.Point.coordinates[1] + "," + place.Point.coordinates[0] + '<br>' +
                              '<b>Status Code:</b>' + response.Status.code + '<br>' +
                              '<b>Status Request:</b>' + response.Status.request + '<br>' +
                              '<b>Address:</b>' + place.address + '<br>' +
                              '<b>Accuracy:</b>' + place.AddressDetails.Accuracy + '<br>' +
                              '<b>Country code:</b> ' + place.AddressDetails.Country.CountryNameCode);
                        }
                      }
      
        GEvent.addListener(_this.map, "click", _this.getAddress);
    }
    </script>

    Beispiel-HTML:

    Code :
    1
2
3
4
5
6
7
8
9
10

    <body onload="initialize({id:'paris'  ,opts:{lat:48.8580124,  lng:2.2941951,  zoom:15}},
                         {id:'rom'    ,opts:{lat:41.8907348,  lng:12.4890636, zoom:15}},
                         {id:'erkner' ,opts:{lat:52.4221579,  lng:13.753152,  zoom:15}})">
    <h4>Paris</h4>  
      <div id="paris"   style="width: 1100px; height: 250px"></div>
    <h4>Rom</h4>    
      <div id="rom"     style="width: 1100px; height: 250px"></div>
    <h4>Erkner</h4>
      <div id="erkner"  style="width: 1100px; height: 250px"></div>
  </body>

    Die Funktion initialize erwartet jetzt diverse Parameter in Objektform.
    Als Beispiel:
    Code :
    1

    {id:'paris'  ,opts:{lat:48.8580124,  lng:2.2941951,  zoom:15}}
    1. id:'paris'
      ...die ID der Map(<div id="paris" ....>)
    2. lat:48.8580124
      Center-Latitude
    3. lng:2.2941951
      Center-Longitude
    4. zoom:15
      Zoomfaktor

    Das wars eigentlich schon, ich hoff es passt.
     
    Zitieren Zitieren
  3. 30.03.10 21:06 #3
    jbender jbender ist offline Grünschnabel
    Registriert seit
    Mar 2010
    Beiträge
    2
    Hallo Sven Mintel!

    Super nett von dir, dass du es gecoded hast! Habs damit jetzt auch hinbekommen.

    Besten Dank!
     
    Zitieren Zitieren
« [jQuery] Gruppierung anhand Inhalt von span Element | Ajax.Updater im IE »

Ähnliche Themen

  1. Google Maps api
    Von Aurora-One im Forum Javascript & Ajax
    Antworten: 1
    Letzter Beitrag: 01.02.10, 21:15
  2. Google Maps API
    Von walle_89 im Forum Javascript & Ajax
    Antworten: 2
    Letzter Beitrag: 08.09.09, 10:15
  3. Google Maps
    Von weissi im Forum PHP
    Antworten: 12
    Letzter Beitrag: 03.02.09, 08:07
  4. Google Maps API: Kontrast im "Firmenschild" verbessern
    Von rockpianist im Forum Javascript & Ajax
    Antworten: 2
    Letzter Beitrag: 22.12.08, 01:51
  5. google maps - API( Autozoom )
    Von Razr84 im Forum Javascript & Ajax
    Antworten: 13
    Letzter Beitrag: 30.10.08, 23:45

Stichworte