CTAPbIu_MABP's BLOG

Совсем коротенький пост о том как подружить Google Maps v3 и Raphaël

Я упомянул в прошлом посте, что я хотел нарисовать десяточку на улыбке Моны Лизы, но из-за стечения обстоятельств так этого и не сделал. И не сделаю сегодня ;) Но покажу куда копать.

В третьей (3.1 если быть точнее) версии API появились встроенные объекты, попробуем их использовать для рисования.

	for (var i=0,j=11;i&ly;j;i++){
		new google.maps.Circle({
			strokeWeight: 2,
			strokeColor : "#ffffff",
			map : map,
			center : new google.maps.LatLng(0, 0),
			radius : i*1000000
		});
	}

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

В рот мне ноги! Да это же квадратичный круг! Не-не-не Дэвид Блэйн ты нас не проведешь!

Вобщем вы поняли что это лажа и при больших радиусах круг становиться не очень круглым. Хотя идея хороша.

Ну думаю самое время перейти к рисованию кругов при помощи Raphaël

function RaphaelCircle(options) {
	this.options = options;
	this.setMap(options.map);
}

RaphaelCircle.prototype = new google.maps.OverlayView();

RaphaelCircle.prototype.onAdd = function() {
	this.div = document.createElement('DIV');
	this.div.style.border = '0px solid';
	this.div.style.position = 'absolute';
	this.div.style.overflow = 'visible';
	
	this.getPanes().overlayImage.appendChild(this.div);
	this.canvas = Raphael(this.div, 100, 100);
};

RaphaelCircle.prototype.draw = function() {

	var radius = (1 << this.getMap().getZoom()) * this.options.radius,
		center = this.getProjection().fromLatLngToDivPixel(this.options.position);
	this.div.style.left = center.x - radius / 2 + 'px';
	this.div.style.top = center.y - radius / 2 + 'px';
	this.div.style.width = radius + 'px';
	this.div.style.height = radius + 'px';
	this.canvas.setSize(radius, radius);
	if (this.circle) {
		this.circle.remove();
	}
	this.circle = this.canvas.circle(radius / 2, radius / 2, radius / 2)
	this.circle.attr({stroke: '#fff', "stroke-width":2, fill: '#000', "fill-opacity": 0.3});

};

RaphaelCircle.prototype.onRemove = function() {
	this.circle.remove();
	this.div.parentNode.removeChild(this.div);
};

Если забить на то как я обошёлся с опциями при создании объекта, то в принципе все нормально. Можно запускать!

С таким подходом можно создать новый overlay который будет рисовать не просто круг а сразу всю десяточку. Успехов!