Нарисовать радиус вокруг точки на карте Google

Я использую Google Maps API и добавил маркеры. Теперь я хочу добавить радиус 10 миль вокруг каждого маркера, то есть круг, который ведет себя соответствующим образом при масштабировании. Я понятия не имею, как это сделать, и, похоже, это не является чем-то обычным.

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

Обновление: Google Latitude использует изображение, которое масштабируется, как это может работать?

webjunkie
Редактировал вопрос 5-го мая 2009 в 6:15
Программирование
javascript google-maps
5-го мая 2009 в 4:35
25 просмотров
Комментарии к вопросу (1)
Решение

С помощью Google API Карт В3, создать объект круг, а затем использовать bindTo (), чтобы связать его с положением маркера (так как они оба находятся в Google.карты.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 круг широты, изменив цвет заливки, strokeColor, strokeWeight и т. д. (полным API).

Увидеть больше исходный код и пример Скриншоты.

Комментарии (1)

Похоже, что наиболее распространенным методом достижения этого является рисование GPolygon с достаточным количеством точек для имитации окружности. В примере, на который вы ссылались, используется этот метод. На этой странице есть хороший пример - поищите функцию drawCircle в исходном коде.

Chris B
Редактировал ответ 5-го мая 2009 в 5:47
Комментарии (1)

В сферической геометрии формы определяются точками, линиями и углами между этими линиями. У вас есть только эти элементарные значения для работы.

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

Сказав это, поймите, что google maps - это проецирование Земли на плоскую поверхность (представьте себе "разворачивание" Земли и растягивание+сплющивание, пока она не станет выглядеть "квадратной"). И если у вас есть плоская система координат, вы можете рисовать на ней двумерные объекты сколько угодно.

Другими словами, вы можете нарисовать масштабированный векторный круг на карте google. Проблема в том, что карты google не дают вам этого из коробки (они хотят оставаться настолько близкими к значениям ГИС, насколько это возможно с практической точки зрения). Они дают только GPolygon, который нужно использовать для аппроксимации окружности. Однако этот парень сделал это, используя vml для IE и svg для других браузеров (см. раздел "МАСШТАБИРОВАННЫЕ КРУГИ").

Теперь, возвращаясь к вашему вопросу о том, как Google Latitude использует масштабированное изображение круга (и это, вероятно, наиболее полезно для вас): если вы знаете, что радиус вашего круга никогда не изменится (например, он всегда 10 миль вокруг некоторой точки), то самым простым решением будет использование GGroundOverlay, который представляет собой просто url изображения + GLatLngBounds, которые представляет изображение. Единственное, что вам нужно сделать, это создать GLatLngBounds, представляющий ваш радиус в 10 миль. После этого google maps api обработает масштабирование изображения, когда пользователь увеличивает или уменьшает масштаб.

Rob Evans
Редактировал ответ 30-го мая 2013 в 1:16
Комментарии (1)

У меня'была такая проблема в прошлом, поэтому я добавил это обсуждение в закладки.

Если подвести итог, то вы можете:

  1. Посмотреть на исходный код этого кругового фильтра'и понять, как включить его в свой проект.
  2. Нарисовать GP-полигон с достаточным количеством точек, чтобы смоделировать окружность.
  3. Создайте файл KML, изменив http://www.nearby.org.uk/google/circle.kml.php?radius=30miles&lat=40.173&long=-105.1024, а затем импортируйте его. В Google Maps вы можете просто вставить URI в поле поиска, и он отобразится на карте. Однако я не уверен, как это можно сделать с помощью API.
Комментарии (0)

Для решения API для В3 см.:

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

Он создает круг вокруг точки, а затем показать метки в диапазоне с различными цветами. Они также вычислить динамический радиус, но в вашем случае радиус фиксируется, так что может быть меньше работы.

CrazyTim
Редактировал ответ 21-го июня 2012 в 5:06
Комментарии (1)

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

По сути, вам нужно создать GGroundOverlay с правильным GLatLngBounds. Сложность заключается в отработке юго-западного угла координат и северо-восточной угловой координатой этой площади imaginery (в GLatLngBounds), ограничивающей этот круг, в зависимости от желаемого радиуса. Математика довольно сложная, но вы можете просто сослаться на функцию getDestLatLng в блоге. Остальное должно быть довольно просто.

Комментарии (0)