Здесь Maps Javascript API - информационный пузырь, перекрывающий ломаную линию маршрута?

Я визуализирую карту с маршрутом от точки A до точки B и увеличиваю масштаб до ограничивающей рамки маршрута.

Я также визуализирую связанный информационный пузырь для точки B (пункт назначения). Эта конкретная часть моего приложения не требует вмешательства пользователя, поэтому она полностью автоматическая. Карта также печатается. Точка B всегда отличается при использовании Enterprise Javascript API v2.5.4

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

Я вижу параметры выравнивания InfoBubble слева, справа, сверху и снизу, но это не поможет, поскольку точки являются динамическими.

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


javascript api here-api
person dc79    schedule 09.04.2015    source источник
comment
Используйте абзацы для абзацев, а не маркеры   -  person meagar    schedule 09.04.2015

Ответы (1)


arrow_upward
1
arrow_downward

Свойства defaultXAlignment и defaultYAlignment можно использовать для установки предпочтительного положения информационного пузыря.

Вы можете использовать свойства defaultXAlignment и defaultYAlignment, чтобы изменить предпочтительное смещение для Infobubble, например:

var infoBubbles = new nokia.maps.map.component.InfoBubbles();
infoBubbles.options.set("defaultXAlignment", 
    nokia.maps.map.component.InfoBubbles.ALIGNMENT_RIGHT);
infoBubbles.options.set("defaultYAlignment",
     nokia.maps.map.component.InfoBubbles.ALIGNMENT_ABOVE);
map.components.add(infoBubbles);

В вашем случае я бы предложил следующее.

  • Когда вы увеличиваете масштаб до bounding box маршрута, добавьте коэффициент заполнения, чтобы обеспечить место для отображения информационного пузыря. Самый простой способ - уменьшить масштаб еще на одну остановку, но вы можете использовать свойство padding объекта nokia.maps.map.Display, чтобы обеспечить достаточно места, когда вы zoom(). См. nokia.maps.map.Display.setPadding ()

  • Во-вторых, вычислите азимут между начальной и конечной точками:

    Number.prototype.toRad = function() { 
  // convert degrees to radians
  return this * Math.PI / 180;
}

function bearing(lat1, lon1, lat2, lon2) {
  lat1 = lat1.toRad(); lat2 = lat2.toRad();
  var dLon = (lon2-lon1).toRad();
  var y = Math.sin(dLon) * Math.cos(lat2);
  var x = Math.cos(lat1) * Math.sin(lat2) -
  Math.sin(lat1) * Math.cos(lat2) * Math.cos(dLon);
  return Math.atan2(y, x);
}

  • Если результат находится в диапазоне от 0 до Math.PI/2, вы путешествуете на северо-восток, исправьте информационный пузырь, чтобы он отображался справа и вверху.

  • Если результат находится между Math.PI/2 и Math.PI, вы путешествуете на юго-восток, исправьте информационный пузырь, чтобы он отображался справа и внизу.
  • Если результат находится между -Math.PI и -Math.PI/2, вы путешествуете на юго-запад, исправьте информационный пузырь, чтобы он отображался слева и внизу.
  • Если результат находится между -Math.PI/2 и 0, вы путешествуете на северо-запад, исправьте всплывающее окно, чтобы оно отображалось слева и вверху.

Дополнительную информацию о том, как полностью исправить InfoBubble ответ, можно найти здесь

person Jason Fox    schedule 10.04.2015