Narysuj 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ś powszechnego.

Znalazłem jeden przykład, który wygląda dobrze. Możesz też rzucić okiem na Współrzędne Google. Tam używają markerów z promieniem, tak jak ja ich chcę.

Aktualizacja: Współrzędne Google używają skalowanego obrazu , jak to działa? _{^{(funkcja wycofana)}}

Korzystając z Google Maps API V3, utwórz obiekt Circle, a następnie użyj bindTo (), aby powiązać go z pozycją swojego Markera (ponieważ są to instancje google.maps.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ć, by wyglądało jak koło Google Latitude, zmieniając fillColor, strokeColor, strokeWeight itp. ( Pełne API ).

Zobacz więcej kodu źródłowego i przykładowe zrzuty ekranu .

Wydaje się, że najczęstszą metodą osiągnięcia tego jest narysowanie GPolygonu z wystarczającą liczbą punktów, aby zasymulować 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.

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.

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

Powiedziawszy to, zdaj sobie sprawę, że mapy Google rzutują ziemię na płaską powierzchnię (pomyśl „rozwijanie” ziemi i rozciąganie + spłaszczanie, 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ć skalowane koło wektorowe na mapie Google. Haczyk polega na tym, że mapy Google nie dają tego od razu po wyjęciu z pudełka (chcą pozostać tak blisko wartości GIS, jak jest to pragmatycznie możliwe). Dają ci tylko GPolygon, którego chcesz użyć do przybliżenia okręgu. Jednak ten facet zrobił to używając vml dla IE i svg dla innych przeglądarek (zobacz sekcję "SKALOWANE KRĘGI").

Wracając teraz do pytania o Google Latitude, używając skalowanego obrazu koła (i jest to prawdopodobnie najbardziej przydatne dla Ciebie): jeśli wiesz, że promień Twojego okręgu nigdy się nie zmieni (np. Zawsze jest 10 mil wokół jakiegoś punktu), najłatwiejszym rozwiązaniem byłoby użycie GGroundOverlay , który jest po prostu adresem URL obrazu + GLatLngBounds reprezentowanym przez obraz. Jedyną pracą, którą musisz wtedy wykonać, jest obliczenie GLatLngBounds reprezentujących twój promień 10 mil. Gdy to zrobisz, interfejs API map Google obsługuje skalowanie obrazu, gdy użytkownik powiększa i pomniejsza.

Miałem ten problem w przeszłości, więc dodałem tę dyskusję do zakładek .

Podsumowując, możesz:

1. Spójrz na kod źródłowy tego filtra kołowego i dowiedz się, jak włączyć go do swojego projektu.
2. Narysuj GPolygon z wystarczającą liczbą punktów, aby zasymulować 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 importując go. W Mapach Google możesz po prostu wkleić identyfikator URI w polu wyszukiwania, a zostanie on wyświetlony na mapie. Nie jestem jednak pewien, jak możesz to zrobić za pomocą interfejsu API.

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

Zasadniczo musisz utworzyć GGroundOverlay z poprawnymi GLatLngBounds. Najtrudniejsze jest obliczenie współrzędnej południowo-zachodniego narożnika i północno-wschodniego narożnika tego wyobrażonego kwadratu (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ć całkiem prosta.

Aby uzyskać rozwiązanie 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 obrębie i poza zakresem w różnych kolorach. Obliczają również promień dynamiczny, ale w twoim przypadku promień jest stały, więc może być mniej pracy.