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

Question

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

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

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

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

1891 6

javascript google-maps

6 ответов:

Comments

Ничего не найдено.

Dunc · Accepted Answer · 2010-11-25 19:21:34

используя Google Maps API V3, создайте объект Circle, а затем используйте 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, изменив fillColor, strokeColor, strokeWeight и т. д. ( полный API).

Посмотреть подробнее исходный код и пример скриншоты.

Chris B · Accepted Answer · 2009-05-05 20:47:58

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

Crescent Fresh · Accepted Answer · 2013-05-30 16:16:51

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

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

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

другими словами,можете нарисуйте масштабированный векторный круг на карте google. Загвоздка в том, что google maps не дает вам его из коробки (они хотят оставаться как можно ближе к значениям ГИС, насколько это прагматично возможно). Они только дают вам GPolygon, который они хотят, чтобы вы использовали для аппроксимации круга. Однако,этот парень сделал это использование vml для IE и svg для других браузеров (см. раздел "масштабированные круги").

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

Sean · Accepted Answer · 2009-05-05 22:59:49

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

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

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

нарисуйте GPolygon с достаточным количеством точек для имитации круга.

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

Arpan Aggarwal · Accepted Answer · 2012-06-21 08:06:17

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

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

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

user98463 · Accepted Answer · 2009-10-07 14:56:30

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

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