Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [google maps] odcztytywanie kliniętego obszaru
Forum PHP.pl > Forum > Po stronie przeglądarki
waldemi
15.10.2012, 17:53:15
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źć.
lukasz1985
15.10.2012, 18:49:40
Tak, to możliwe, pod warunkiem, że każdy obszar na mapie ma odpowiednie id do tego w bazie.


http://jsfiddle.net/5j4WN/1/

Mega_88
16.10.2012, 08:25:51
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
waldemi
18.10.2012, 14:42:17
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.
lukasz1985
19.10.2012, 11:43:30
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.
waldemi
21.10.2012, 18:04:21
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?
lukasz1985
23.10.2012, 11:25:03
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
waldemi
24.10.2012, 11:56:57
Wielkie dzięki, chyba właśnie o to mi chodziło. Spróbuję to teraz dopasować do swojej strony.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.