主页 / 问题 / 798499
Accepted
iwanttobealight
Asked:2020-03-15 15:21:07 +0000 UTC2020-03-15 15:21:07 +0000 UTC

我无法将 html 标记添加到 Yandex 地图上的气球

  • 772
ymaps.ready(init);

var myMap;

function init() {
myMap = new ymaps.Map("map", {
  center: [
    59.959706, 30.406413
  ],
  zoom: 16,
  controls: ['zoomControl', 'fullscreenControl']
});

var balloon = new ymaps.Balloon(myMap,
  {closeButton: false},
  {shadow: true},
  {contentLayout: ymaps.templateLayoutFactory.createClass('<div>CONTENT</div>')}
);
balloon.options.setParent(myMap.options);
balloon.open([59.960822, 30.394090]);
};

我尝试使用参数contentLayout，但什么也没发生 https://tech.yandex.ru/maps/doc/jsapi/2.1/ref/reference/Balloon-docpage/

yandex-maps-jsapi

2 个回答

  1. Best Answer

    如果您不需要自己的布局并且更改气球的内容标记就足够了，您可以简单地设置 contentBody，如示例所示。

    ymaps.ready(init);

function init() {
  var myMap = new ymaps.Map("map", {
    center: [55.733835, 37.588227],
    zoom: 10
  }, {
    searchControlProvider: 'yandex#search'
  });


  // Открываем балун на карт
  myMap.balloon.open([55.733835, 37.588227], {
    contentBody: [
      '<address>',
      '<strong>Офис Яндекса в Москве</strong>',
      '<br/>',
      'Адрес: 119021, Москва, ул. Льва Толстого, 16',
      '<br/>',
      'Подробнее: <a href="https://company.yandex.ru/">https://company.yandex.ru</a>',
      '</address>'
    ].join('')
  });
}
    html,
body,
#map {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}
    <script type="text/javascript" src="https://api-maps.yandex.ru/2.1/?lang=ru_RU"></script>
<div id="map"></div>

    • 0

  2. 结果，结果是这样的：

    ymaps.ready(init);

    var myMap;

function init() {
myMap = new ymaps.Map("map", {
  center: [
    59.959706, 30.406413
  ],
  zoom: 16,
  controls: ['zoomControl', 'fullscreenControl']
});

var balloon = new ymaps.Balloon(myMap,
  {closeButton: false},
  {shadow: true}
);
balloon.options.setParent(myMap.options);
balloon.open([59.960822, 30.394090], {
  contentBody: '<article class="map__contacts contacts">CONTENT</article>'
});
};

    他们的风格也适用。

    • 0

相关问题