Совсем недавно я придумал другое решение, в котором не нужны полилинии, а вместо этого используется значение пути для значков маркеров, которое можно вычислить на лету.
В двух словах: вы просто создаете строку пути SVG для квадратичной кривой Безье от 0 до p2 — p1 и прикрепляете ее в качестве значка маркера к p1.
Длинная версия: координаты пикселей внутри контейнера можно получить, вызвав google.maps.Projection.fromLatLngToContainerPixel()
. Строка для квадратичной кривой Безье выглядит так:
M [startX] [startY] q [controlX] [controlY] [endX] [endY]
Мы выберем (0,0)
в качестве начальной точки, так как позже маркер будет размещен в этой точке. Относительное положение p2
теперь равно e = (p2.x - p1.x, p2.y - p1.y)
, а относительное положение точки на полпути между ними равно m = (e.x/2, e.y/2)
. Ортогональный вектор к e
равен o = s * norm(-e.x / e.y, 1)
, где s
— некоторый коэффициент масштабирования, а s = |e|/4
— хорошая отправная точка. Теперь у нас есть контрольная точка с c = (m.x + o.x, m.y + o.y)
и путь:
path = „M 0 0 q c.x c.y e.x e.y“
Теперь, когда у нас есть этот путь, мы можем просто объявить значок:
var icon = {
path : path,
fillOpacity : 0,//important
scale : 1,
strokeOpacity: //yours,
strokeColor : //yours,
strokeWeight : //yours,
clickable : false //important
};
Установка clickable
в false необходима, потому что в противном случае область, заключенная в кривую, станет кликабельной, а основная карта не будет получать события мыши. Теперь мы можем добавить на карту маркер со значком пути в качестве параметра и позицией точки p1:
var marker = new google.maps.Marker({
position : p1,
icon : icon,
map : map,
clickable : false,
zIndex : -100 //make the line appear behind ‚real’ markers
});
Несколько замечаний:
- знак масштабного коэффициента ортогонала o определяет «направление» дуги («выше» или «ниже» e)
- При изменении уровня масштабирования необходимо настроить масштаб значков следующим образом:
marker.icon.scale = 1 / 2^(initialZoom -
currentZoom)
нет необходимости пересчитывать путь.
Образец:
![Пример кривых Безье на картах Google](https://i.stack.imgur.com/nd6rJ.png)
jsfiddle с жестко запрограммированным примером с использованием исходных пунктов вопроса
соответствующий код:
var p1 = new google.maps.LatLng(23.634501, -102.552783);
var p2 = new google.maps.LatLng(17.987557, -92.929147);
var markerP1 = new google.maps.Marker({
position: p1,
map: map
});
var markerP2 = new google.maps.Marker({
position: p2,
map: map
});
google.maps.event.addListener(map, 'projection_changed', function () {
var p1 = map.getProjection().fromLatLngToPoint(markerP1.getPosition());
var p2 = map.getProjection().fromLatLngToPoint(markerP2.getPosition());
var e = new google.maps.Point(p1.x - p2.x, p1.y - p2.y);
var m = new google.maps.Point(e.x / 2, e.y / 2);
var o = new google.maps.Point(0, 7);
var c = new google.maps.Point(m.x + o.x, m.y + o.y);
var curveMarker2 = new google.maps.Marker({
position: markerP1.getPosition(),
icon: {
path: "M 0 0 q " + c.x + " " + c.y + " " + e.x + " " + e.y,
scale: 24,
strokeWeight: 2,
fillColor: '#009933',
fillOpacity: 0,
rotation: 180,
anchor: new google.maps.Point(0, 0)
}
});
curveMarker2.setMap(map);
google.maps.event.addListener(map, 'zoom_changed', function () {
var zoom = map.getZoom();
var scale = 1 / (Math.pow(2, -zoom));
var icon = {
path: "M 0 0 q " + c.x + " " + c.y + " " + e.x + " " + e.y,
scale: scale,
strokeWeight: 2,
fillColor: '#009933',
fillOpacity: 0,
rotation: 180,
anchor: new google.maps.Point(0, 0)
};
curveMarker2.setIcon(icon);
});
});
04.07.2014