Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [google maps] odcztytywanie kliniętego obszaru
waldemi
post
Post #1





Grupa: Zarejestrowani
Postów: 58
Pomógł: 0
Dołączył: 5.03.2007
Skąd: Leszno

Ostrzeżenie: (0%)
-----

Witam
Potrzebuję zrobić w Google Maps następującą rzecz: na mapie zdefiniowanie są jakieś obszary (Polygone), które nie zachodzą na siebie. Współrzędne wierzchołków zapisane są w bazie danych, każdy z obszarów ma swój identyfikator. Teraz potrzebuję zrobić coś takiego że po kliknięciu na mapę skrypt odczyta współrzędne klikniętego miejsca a następnie z bazy odczyta ID obszaru na którym klinięto.
Czy jest to do zrobienia? Kiedyś widziałem coś takiego na jakiejś stronie ale teraz nie umiem tego znaleźć.
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi (1 - 7)
lukasz1985
post
Post #2





Grupa: Zarejestrowani
Postów: 205
Pomógł: 43
Dołączył: 5.03.2012

Ostrzeżenie: (0%)
-----

Tak, to możliwe, pod warunkiem, że każdy obszar na mapie ma odpowiednie id do tego w bazie.


http://jsfiddle.net/5j4WN/1/
Go to the top of the page
+Quote Post
Mega_88
post
Post #3





Grupa: Zarejestrowani
Postów: 360
Pomógł: 34
Dołączył: 20.08.2011

Ostrzeżenie: (0%)
-----

Cytat(waldemi @ 15.10.2012, 18:53:15 ) *
Kiedyś widziałem coś takiego na jakiejś stronie ale teraz nie umiem tego znaleźć.


Zobacz tutaj, przykład pierwszy: http://gmapsapi.com/poradnik/106_zdarzenia.html?tag=apiv3
Go to the top of the page
+Quote Post
waldemi
post
Post #4





Grupa: Zarejestrowani
Postów: 58
Pomógł: 0
Dołączył: 5.03.2007
Skąd: Leszno

Ostrzeżenie: (0%)
-----

Cytat(Mega_88 @ 16.10.2012, 09:25:51 ) *
Zobacz tutaj, przykład pierwszy: http://gmapsapi.com/poradnik/106_zdarzenia.html?tag=apiv3

Tak, znam to bo z tego kursu się uczyłem. Umiem pobrać współrzędne klikniętego punktu. Chodzi o to żeby przeszukać bazę danych i sprawdzić na którym obszarze się one znajdują (po załadowaniu mapy żadne obszary nie są wyświetlane), następnie ID tego obszaru ma być przekazane do dalszej "obróbki" a obszar ma być wyświetlony na mapie.
Go to the top of the page
+Quote Post
lukasz1985
post
Post #5





Grupa: Zarejestrowani
Postów: 205
Pomógł: 43
Dołączył: 5.03.2012

Ostrzeżenie: (0%)
-----

To jest droga naokoło, jeśli chcesz przetwarzać punkt i obszar po stronie serwera. Do tego służy GMaps Api.
Można zrobić tak, że przy załadowaniu strony wczytywane są wierzchołki przez JSON do JS i na ich podstawie wyświetlane są przezroczyste obszary (alpha:0), każdy obszar ma już przypisane ID, pobrane również z bazy.

Po kliknięciu w obszar, jego alpha zmienia się na 1 - obszar się pojawia na mapie
lub jeśli po kliknięciu potrzebne jest zapytanie na serwer - wysyłane są dane przez Ajax np z numerem ID, po stronie serwera wykonuje się skrypt i w momencie wykonania, po otrzymaniu odpowiedzi z serwera, klientowi zostaje wyświetlony ten obszar - dopiero po otrzymaniu odpowiedzi serera, alpha obszaru zmienia się na 1.

Jeśli interesuje Cię dalsza pomoc, proszę o dookreślenie jakie operacje mają być wykonywane.
Go to the top of the page
+Quote Post
waldemi
post
Post #6





Grupa: Zarejestrowani
Postów: 58
Pomógł: 0
Dołączył: 5.03.2007
Skąd: Leszno

Ostrzeżenie: (0%)
-----

Tak, to by było właśnie to. Niestety nie znam GMaps API na tyle żeby to samemu rozpracować. Możesz podać jakieś przykłady? Jakiś przykładowy skrypt?
Go to the top of the page
+Quote Post
lukasz1985
post
Post #7





Grupa: Zarejestrowani
Postów: 205
Pomógł: 43
Dołączył: 5.03.2012

Ostrzeżenie: (0%)
-----

Najprostsze rozwiązanie jakie widzę, to tak, że serwer wyrzuca obszary oraz ich id przy starcie strony.
Przechwytuje jest JavaScript. Najlepiej wszystko zrobić w formacie JSON.

Napisałem prostą klasę, która może wiele sprostować:

cały kod i demo znajduje się na jsfiddle: http://jsfiddle.net/GDM64/

Obsługa zdarzeń znajduje się w kodzie, można tam dopisać co się ma stać dalej po kliknięciu, jeśli chcesz użyć AJAX.

Myślę, że obszar powinien być wyświetlany od razu po kliknięciu, a nie dopiero po otrzymaniu odpowiedzi z serwera, ponieważ zwłoka może zaskoczyć użytkownika.

Kodu po stronie serwera nie pisałem lecz jeśli będziesz go potrzebował, mogę coś napisać.



[HTML] pobierz, plaintext 
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <title>Google Maps JavaScript API v3 Example: Map Simple</title>
  5.         <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  6.         <meta charset="utf-8">
  7.         <style>
  8.             html, body, #map_canvas {
  9.                 margin: 0;
  10.                 padding: 0;
  11.                 height: 100%;
  12.             }
  13.         </style>
  14.         <script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
  15.         <script>
  16.  
  17.  
  18.             function Obszary () {
  19.  
  20.                 // zmienna 'self' trzymająca referencje do instancji - widoczna w całym kodzie klasy
  21.                 var self = this;
  22.  
  23.                 var ukryty = {
  24.                     strokeOpacity: 0,
  25.                     fillOpacity: 0
  26.                 }
  27.                 var widoczny = {
  28.                     strokeOpacity: 0.5,
  29.                     fillOpacity: 0.5
  30.                 }
  31.                 //// tablica obszarów, do której będą dodawane instancje google.maps.Polygon
  32.                 this.obszary = []  
  33.                 // funkcja odpowiadająca za ukrycie obszarow na mapie
  34.                 this.ukryjObszary = function () {
  35.                     var iter = 0;
  36.                     for (iter = 0; iter < this.obszary.length; iter++) {
  37.                         var obszar = this.obszary[iter];
  38.                         obszar.setOptions(ukryty)
  39.  
  40.                     }
  41.                 }
  42.  
  43.                 // funkcja odpowiadająca za podświetlenie obszaru
  44.                 this.podswietlObszar = function (obszar) {
  45.                     obszar.setOptions(widoczny)
  46.                 }
  47.                 // funkcja zawierająca kod wykonywany po kliknięciu w obszar, przyjmuje kliknięty 
  48.                 // obszar za argument
  49.                 this.klikniecie = function (obszar) {
  50.                     this.ukryjObszary()
  51.                     this.podswietlObszar(obszar);
  52.  
  53.                     var id = obszar.id
  54.                     console.log(obszar.id)
  55.  
  56.                 }
  57.                 // funkcja odpowiadająca za dodanie obszaru do mapy w stanie ukrytym oraz przypisanie zdarzenia
  58.                 // wywoływanego podczas kliknięcia w obszar
  59.                 this.dodajObszar = function (wierzcholki, id) {
  60.                     var alpha = 0;
  61.                     var color = "#ffffff";
  62.                     var nowyObszar = new google.maps.Polygon({
  63.                         paths: wierzcholki,
  64.                         strokeColor: color,
  65.                         fillColor: color,
  66.                         strokeOpacity: alpha,
  67.                         fillOpacity: alpha
  68.                     })
  69.                     nowyObszar.id = id;
  70.                     nowyObszar.setMap(map)
  71.  
  72.  
  73.                     google.maps.event.addListener(nowyObszar, 'click', function (event) {
  74.                         self.klikniecie(nowyObszar);
  75.                     })
  76.                     this.obszary.push(nowyObszar)
  77.                 }
  78.             }
  79.  
  80.             var map;
  81.             function initialize() {
  82.                 var mapOptions = {
  83.                     zoom: 8,
  84.                     center: new google.maps.LatLng(-32.23052345157306, 153.43452734375),
  85.                     mapTypeId: google.maps.MapTypeId.ROADMAP
  86.                 };
  87.                 map = new google.maps.Map(document.getElementById('map_canvas'),mapOptions);
  88.  
  89.  
  90.  
  91.  
  92.                 obszary = new Obszary();
  93.  
  94.  
  95.                 // Dodanie kwadratowych obszarów do mapy w celach demonstracyjnych
  96.                 // W rzeczywistości, jeśli dane mają pochodzić z bazy danych to najlepiej
  97.                 // dodać je przez np w PHP: json_encode() i przechwycić w javascript przez 
  98.                 // JSON.parse() - przy pomocy jakiejś biblioteki lub po prostu biblioteki JSON
  99.                 // [url="https://github.com/douglascrockford/JSON-js"]https://github.com/douglascrockford/JSON-js[/url]
  100.  
  101.                 var iter;
  102.                 for (iter = 0; iter < 7; iter++) {
  103.                     var iterIter 
  104.                     for (iterIter = 0; iterIter < 5; iterIter++) {
  105.                         var x = iter  
  106.                         var y = iterIter
  107.                         var id = iter * iterIter;
  108.  
  109.                         var wierzcholki = [
  110.                             new google.maps.LatLng(-34 + y, 150 + x),
  111.                             new google.maps.LatLng(-35 + y, 150 + x),
  112.                             new google.maps.LatLng(-35 + y, 151 + x),
  113.                             new google.maps.LatLng(-34 + y, 151 + x),
  114.                             new google.maps.LatLng(-34 + y, 150 + x),
  115.                         ];
  116.  
  117.                         obszary.dodajObszar(wierzcholki, id)
  118.                     }
  119.  
  120.                 }
  121.  
  122.  
  123.                 // Construct the polygon
  124.                 // Note that we don't specify an array or arrays, but instead just
  125.                 // a simple array of LatLngs in the paths property
  126. //                bermudaTriangle = new google.maps.Polygon({
  127. //                    paths: triangleCoords,
  128. //                    strokeColor: "#FF0000",
  129. //                    strokeOpacity: 0.0,
  130. //                    strokeWeight: 2,
  131. //                    fillColor: "#FF0000",
  132. //                    fillOpacity: 0.1
  133. //                    
  134. //                });
  135. //
  136. //                bermudaTriangle.setMap(map);
  137.             }
  140.             
  142.             google.maps.event.addDomListener(window, 'load', initialize);
  143.         </script>
  144.     </head>
  145.     <body>
  146.         <div id="map_canvas"></div>
  147.     </body>
  148. </html>
[HTML] pobierz, plaintext


Ten post edytował lukasz1985 23.10.2012, 11:30:11
Go to the top of the page
+Quote Post
waldemi
post
Post #8





Grupa: Zarejestrowani
Postów: 58
Pomógł: 0
Dołączył: 5.03.2007
Skąd: Leszno

Ostrzeżenie: (0%)
-----

Wielkie dzięki, chyba właśnie o to mi chodziło. Spróbuję to teraz dopasować do swojej strony.
Go to the top of the page
+Quote Post
« Następny starszy · Po stronie przeglądarki · Następny nowszy »
 

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Przełącz na: Standardowy · Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 22.08.2025 - 20:48
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn