Я использую API Карт Google и добавил маркеры. Теперь я хочу добавить радиус в 10 миль вокруг каждого маркера, а это означает, что он ведет себя хорошо, при масштабировании. Я не знаю, как это сделать, и кажется, что это не что-то общее.
Я нашел один пример, который хорошо выглядит, и вы также можете взглянуть на Google Latitude. Там они используют маркеры с радиусом, точно так же, как я хочу.
Обновление: Локатор Google использует изображение, которое масштабируется, как это работает?
Используя 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 проецируют землю на плоскую поверхность (подумайте "разворачивая" землю и растягивая + сплющивание пока он не станет "квадратным" ). И если у вас есть плоская система координат, вы можете нарисовать на ней 2D-объекты, которые вы хотите.
Другими словами, вы можете нарисовать масштабированный векторный круг на карте google. Уловка, карты google не дают его вам из коробки (они хотят оставаться как можно ближе к значениям GIS, как это возможно прагматично). Они дают вам только GPolygon, который они хотят использовать для приближения круга. Тем не менее, этот парень сделал это, используя vml для IE и svg для других браузеров (см. Раздел "SCALED CIRCLES" ).
Теперь, возвращаясь к вашему вопросу о Локаторе Google, используя изображение с масштабированным кругом (и это, вероятно, наиболее полезно для вас): если вы знаете, что радиус вашего круга никогда не изменится (например, он всегда 10 миль вокруг некоторой точки), то самым простым решением было бы использовать GGroundOverlay, который представляет собой только изображение url + GLatLngBounds, которое представляет изображение. Единственная работа, которую вам нужно сделать, - это cacluate GLatLngBounds, представляющий ваш 10-мильный радиус. После того, как вы это сделаете, карты Google api обрабатывают масштабирование вашего изображения, когда пользователь увеличивает и уменьшает масштаб.
У меня была эта проблема в прошлом, поэтому я сделал закладку .
Подводя итог, вы можете:
Для решения API v3 обратитесь к:
http://blog.enbake.com/draw-circle-with-google-maps-api-v3
Он создает круг вокруг точек, а затем показывает маркеры внутри и вне диапазона с разными цветами. Они также вычисляют динамический радиус, но в вашем случае радиус исправлен, поэтому может быть меньше работы.
Вот еще один (рабочий) пример по кругам Google, маркерам и событиям. См. Здесь
Я только что написал статью в блоге, которая касается именно этого, что может показаться вам полезным: http://seewah.blogspot.com/2009/10/circle-overlay-on-google-map.html
В принципе, вам нужно создать GGroundOverlay с правильным GLatLngBounds. Трудный бит заключается в разработке юго-западной угловой координаты и северо-восточной угловой координаты этой площади воображения (GLatLngBounds), ограничивающей этот круг, на основе желаемого радиуса. Математика довольно сложная, но вы можете просто ссылаться на функцию getDestLatLng в блоге. Остальное должно быть довольно простым.