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

Question 1

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

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

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

Question 2

Используя Google Maps API 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 ).

См. Дополнительные исходный код и примеры снимков экрана .

Question 3

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

Question 4

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

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

Сказав это, помните, что карты Google проецируют Землю на плоскую поверхность (представьте себе «разворачивание» земли и растяжение + выравнивание, пока она не станет «квадратной»). А если у вас плоская система координат, вы можете рисовать на ней 2D-объекты сколько угодно.

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

Теперь, возвращаясь к вашему вопросу о Google Latitude с использованием изображения масштабированного круга (и это, вероятно, наиболее полезно для вас): если вы знаете, что радиус вашего круга никогда не изменится (например, он всегда составляет 10 миль вокруг некоторой точки), тогда Самым простым решением было бы использовать GGroundOverlay , который представляет собой просто URL-адрес изображения + GLatLngBounds, которое представляет изображение. Единственная работа, которую вам нужно сделать, - это cacluate GLatLngBounds, представляющий ваш радиус 10 миль. Как только у вас есть это, API карт Google обрабатывает масштабирование вашего изображения, когда пользователь увеличивает или уменьшает масштаб.

Question 5

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

Подводя итог, вы можете:

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

Question 6

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

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

Question 7

Для решения API v3 обратитесь к:

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

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