Намалюйте радіус навколо точки на карті Google

Я використовую API Карт Google і додав маркери. Тепер я хочу додати радіус 10 миль навколо кожного маркера, тобто коло, яке поводиться належним чином під час масштабування. Я поняття не маю, як це зробити, і, здається, це не щось загальне.

Я знайшов один приклад, який добре виглядає , і ви також можете подивитися на Google Latitude. Там вони використовують маркери з радіусом, як я їх хочу.

Оновлення: Google Latitude використовує зображення, яке масштабується, як це буде працювати? _{^{(функція застаріла)}}

За допомогою API Карт Google V3 створіть об’єкт Circle, а потім за допомогою bindTo () прив’яжіть його до позиції Вашого маркера (оскільки вони обидва є екземплярами 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');

Ви можете зробити його схожим на коло Google Latitude, змінивши fillColor, strokeColor, strokeWeight тощо ( повний API ).

Див. Більше вихідного коду та приклади знімків екрана .

Здається, найпоширеніший метод досягнення цього - намалювати GPolygon з достатньою кількістю точок, щоб імітувати коло. У прикладі, на який ви посилаєтесь, використовується цей метод. Ця сторінка має хороший приклад - шукайте функцію drawCircle у вихідному коді.

У сферичній геометрії фігури визначаються точками, лініями та кутами між цими лініями. У вас є лише ті елементарні цінності, з якими слід працювати.

Тому коло (з точки зору форми, що проектується на сферу) - це те, що необхідно апроксимувати за допомогою точок. Чим більше очок, тим більше це буде виглядати як коло.

Сказавши це, зрозумійте, що Google Maps проектує землю на рівну поверхню (подумайте, як "розкрутити" землю і розтягнути + розрівняти, поки вона не виглядає "квадратною"). А якщо у вас є плоска система координат, ви можете намалювати на ній 2D об'єкти все, що вам потрібно.

Іншими словами, ви можете намалювати масштабоване векторне коло на карті Google. Проблема полягає в тому, що google maps не дає вам її поза полем (вони хочуть залишатися наближеними до значень GIS, наскільки це можливо прагматично). Вони дають вам лише GPolygon, який вони хочуть, щоб ви використовували для наближення кола. Однак цей хлопець це зробив, використовуючи vml для IE та svg для інших браузерів (див. Розділ «СКАЛІРНІ КОЛИ»).

Тепер, повернувшись до вашого запитання про Google Latitude, використовуючи масштабоване зображення кола (і це, мабуть, найкорисніше для вас): якщо ви знаєте, радіус вашого кола ніколи не зміниться (наприклад, це завжди 10 миль навколо якоїсь точки), тоді найпростішим рішенням було б використовувати GGroundOverlay , який є лише URL-адресою зображення + GLatLngBounds, яке зображує зображення. Єдиною роботою, яку вам потрібно зробити, - це зарахувати GLatLngBounds, що представляє ваш радіус 10 миль. Після цього програма api google Maps обробляє масштабування вашого зображення, коли користувач збільшує та зменшує зображення.

У мене була ця проблема в минулому, тому я додав цю дискусію в закладки .

Підсумовуючи це, ви можете:

1. Погляньте на вихідний код цього фільтра для кола та з’ясуйте, як його включити у свій проект.
2. Намалюйте GPolygon з достатньою кількістю точок, щоб імітувати коло.
3. Створіть файл KML, змінивши http://www.nearby.org.uk/google/circle.kml.php?radius=30miles&lat=40.173&long=-105.1024, а потім імпортуючи його. На Картах Google можна просто вставити URI у вікно пошуку, і він відобразиться на карті. Я не впевнений, як ви можете це зробити за допомогою API.

Я щойно написав статтю в блозі, яка стосується саме цього, що вам може бути корисним: http://seewah.blogspot.com/2009/10/circle-overlay-on-google-map.html

В основному, вам потрібно створити GGroundOverlay з правильними GLatLngBounds. Хитрий біт полягає у розробці координат південно-західного кута та північно-східного кута цього уявного квадрата (GLatLngBounds), що обмежує це коло, на основі бажаного радіуса. Математика досить складна, але ви можете просто звернутися до функції getDestLatLng у блозі. Решта повинна бути досить простою.

Для рішення API v3 зверніться до:

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

Він створює коло навколо точок, а потім відображає маркери всередині та поза діапазоном різними кольорами. Вони також обчислюють динамічний радіус, але у вашому випадку радіус фіксований, тому може бути менше роботи.