Rysuj promień wokół punktu na mapie Google

Używam Google Maps API i dodałem znaczniki. Teraz chcę dodać Promień 10 mil wokół każdego znacznika, co oznacza okrąg, który zachowuje się odpowiednio podczas powiększania. Nie mam pojęcia, jak to zrobić i wydaje się, że to nie jest coś wspólnego.

Znalazłem jeden przykład, który wygląda dobrze, możesz też rzucić okiem na Google Latitude. Tam używają znaczników o promieniu, tak jak ja chcę.

Update: Google Latitude używa obrazu , który jest skalowane, jak to działa?

Author: webjunkie, 2009-05-05
Source

6 answers

Używając Google Maps API V3, Utwórz obiekt Circle, a następnie użyj bindTo (), aby powiązać go z pozycją markera (ponieważ oba są google.mapy.Instancje MVCObject).

// Create marker 
var marker = new google.maps.Marker({
  map: map,
  position: new google.maps.LatLng(53, -2.5),
  title: 'Some location'
});

// Add circle overlay and bind to marker
var circle = new google.maps.Circle({
  map: map,
  radius: 16093,    // 10 miles in metres
  fillColor: '#AA0000'
});
circle.bindTo('center', marker, 'position');

Możesz sprawić, że będzie wyglądał tak samo jak Google Latitude circle, zmieniając fillcolor, strokeColor, strokeWeight itp ( full API ).

Zobacz więcej kod źródłowy i przykładowe screeny .

 219
Author: Dunc,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2010-11-25 17:21:34

Wydaje się, że najczęstszą metodą osiągnięcia tego jest narysowanie GPolygon{[2] } z wystarczającą ilością punktów, aby symulować okrąg. Przykład, do którego się odwołujesz, używa tej metody. ta strona ma dobry przykład-poszukaj funkcji drawCircle w kodzie źródłowym.

 10
Author: Chris B,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-05-05 17:47:58

W geometrii sferycznej kształty są definiowane przez punkty, linie i kąty między tymi liniami. Masz tylko te podstawowe wartości do pracy.

Zatem okrąg (w sensie kształtu a rzutowanego na sferę) jest czymś, co należy aproksymować za pomocą punktów. Im więcej punktów, tym bardziej będzie wyglądać jak koło.

Skoro to powiedziawszy, uświadom sobie, że google maps rzutuje ziemię na płaską powierzchnię (pomyśl "rozwijając" ziemię i rozciągając+spłaszczając aż będzie wyglądać "kwadratowo"). A jeśli masz płaski układ współrzędnych, możesz rysować na nim obiekty 2D, ile chcesz.

Innymi słowy możesz narysować skalowany okrąg wektorowy na mapie google. Haczyk polega na tym, że google maps nie daje Ci go po wyjęciu z pudełka (chcą pozostać jak najbliżej wartości GIS, jak to pragmatycznie możliwe). Dają Ci tylko GPolygon, którego chcą, abyś użył do przybliżenia okręgu. Jednak ten facet zrobił to używając vml dla IE i svg dla innych przeglądarek (patrz sekcja" skalowane okręgi").

Teraz, wracając do twojego pytania o Google Latitude używając skalowanego obrazu okręgu (i to jest prawdopodobnie najbardziej przydatne dla Ciebie): jeśli wiesz, że promień twojego okręgu nigdy się nie zmieni (np. zawsze jest to 10 mil wokół jakiegoś punktu), to najprostszym rozwiązaniem byłoby użycie GGroundOverlay, który jest tylko adresem URL obrazu + GLatLngBounds obraz reprezentuje. Jedyne, co musisz zrobić, to wykonać cacluate GLatLngBounds reprezentuję Twój Promień 10 mil. Gdy już to masz, interfejs API Map google obsługuje skalowanie obrazu podczas powiększania i pomniejszania.

 9
Author: Crescent Fresh,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-05-30 13:16:51

Miałem ten problem w przeszłości, więc zaznaczyłem tę dyskusję .

Podsumowując można:

  1. spójrz na kod źródłowy circle filter i dowiedz się, jak włączyć go do swojego projektu.
  2. narysuj GPolygon z wystarczającą ilością punktów, aby symulować okrąg.
  3. Wygeneruj plik KML modyfikując http://www.nearby.org.uk/google/circle.kml.php?radius=30miles&lat=40.173&long=-105.1024 a następnie zaimportować go. W Google Mapy, możesz po prostu wkleić URI w polu wyszukiwania i wyświetli się na mapie. Nie jestem pewien, jak możesz to zrobić za pomocą API.
 4
Author: Sean,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-05-05 19:59:49

Dla rozwiązania API v3, zobacz:

Http://blog.enbake.com/draw-circle-with-google-maps-api-v3

Tworzy okrąg wokół punktów, a następnie pokazuje znaczniki w zakresie i poza nim w różnych kolorach. Obliczają również promień dynamiczny, ale w Twoim przypadku promień jest stały, więc może być mniej pracy.

 2
Author: Arpan Aggarwal,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-06-21 05:06:17

Właśnie napisałem artykuł na blogu, który odnosi się dokładnie do tego, co może okazać się przydatne: http://seewah.blogspot.com/2009/10/circle-overlay-on-google-map.html

Zasadniczo, musisz utworzyć GGroundOverlay z prawidłowym GLatLngBounds. Trudnym bitem jest wypracowanie współrzędnych południowo-zachodniego narożnika i współrzędnych północno-wschodniego narożnika tego kwadratu obrazu (GLatLngBounds) ograniczającego ten okrąg, w oparciu o pożądany promień. Matematyka jest dość skomplikowana, ale możesz po prostu odwołać się do funkcji getDestLatLng na blogu. Reszta powinna być dość prosta.

 1
Author: user98463,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-10-07 11:56:30