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

Question

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

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

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

Answer 1

Используя 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 Локатор, изменив fillColor, strokeColor, strokeWeight и т. Д. ( полный API ).

Подробнее исходный код и примеры снимков экрана .

Answer 2

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

Answer 3

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

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

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

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

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

Answer 4

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

Чтобы подвести итог, вы можете:

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.

Answer 5

Для решения API v3 см.

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

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

Answer 6

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

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