Клуб API Карт

Добавление произвольного HTML кода в балун пользователем

Пост в архиве.

Пытаюсь дать пользователю возможность при создании им метки добавлять в балун медиа контент(изображение.видео)

Как дать ему возможность добавлять произвольный html код в балун?

 

P.S.>>как я понял за вывод названия метки отвечает эта строка

placemark.description= '<html>'+json.markers[i].name+'</html>';

но она находится внутри блока с ява скрипт и наверное поэтому при написании тегов они отбражаются как текст 

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<title>yandex</title>
 
 <style type="text/css">
         html, body {
           width: 100%;
           height: 100%;
           margin: 0;
           padding: 0;
        }
        #YMapsID { 
            width: 100%;
           height: 100%;
            min-height:170px;
            min-width:690px;
        }
       
       
    </style>
<script type="text/javascript">
  
var map, flag = false;
 
window.onload = function () {
            map = new YMaps.Map(document.getElementById("YMapsID")
            map.setCenter(new YMaps.GeoPoint(50.232509,50.915218), 2, YMaps.MapType.SATELLITE);
 map.addControl(new YMaps.TypeControl()
map.addControl(new YMaps.ScaleLine()
map.addControl(new YMaps.Zoom()
map.addControl(new YMaps.SearchControl()
map.enableScrollZoom(
            var toolbar = new YMaps.ToolBar(
            // Создание кнопки
            var button = new YMaps.ToolBarButton({ 
                caption: "Добавить место", 
                hint: "Добавляет метку в центр карты"
            }
            // При щелчке на кнопке добавляется новая кнопка
            YMaps.Events.observe(button, button.Events.Click, function () {  flag = !flag;
            }
            // Добавление кнопки на панель инструментов
            toolbar.add(button);
            // Добавление панели инструментов на карту
            map.addControl(toolbar);
        
            
var zoomControl = new YMaps.Zoom(
//Запрос данных и вывод маркеров на карту
YMaps.jQuery.getJSON("vivodpointsmap.php",
function(json){
for (i = 0; i < json.markers.length; i++) {
var placemark=new YMaps.Placemark(new YMaps.GeoPoint(json.markers[i].lat,json.markers[i].lng), {style: "default#buildingsIcon"}
placemark.description= '<html>'+json.markers[i].name+'</html>';
placemark.description = placemark.description+'<strong>Описание:</strong> '+json.markers[i].descriptions;
map.addOverlay(placemark);
}
 
}
 
var myLayout = function (geoPoint) {
   var $element = YMaps.jQuery('<div>Название: <input type="text" id="name"/><br />Описание: <textarea id="descriptpoint" cols="20" rows="5"></textarea><br /><input type="button" value="Добавить" id="submit"/></div>');
   this.onAddToParent = function (parent) {
        $element.find('#submit').bind('click', function () {
              YMaps.jQuery.ajax({
                  url: 'addpoint.php',
                  data: {
                       namepoint: $element.find('#name')[0].value,
                      descriptpoint: $element.find('#descriptpoint')[0].value,
                       pcoord: geoPoint.toString()
                  },
 
            dataType: 'json',
                  // Это функция обработки ответа сервера
                  success: function (res) {
                       if (res.success) {
                             // если точка сохранилась, закрываем балун
                             map.closeBalloon(
                             // и ставим точку на карту
                             map.addOverlay(new YMaps.Placemark(geoPoint)
 
                       } else {
                             // иначе выдаем сообщение об ошибке
                            // YMaps.jQuery('<p style="color:red">' + e.message + '</p>').appendTo("#scriptmes");
                            YMaps.jQuery("#scriptmes").html('<p style="color:red">' + e.message + '</p>');
                       }
                  }
              }
 
        }
        $element.appendTo(parent);
   };
   this.onRemoveFromParent = function () {
        $element.remove(
   };
 
   this.update = function () {};
}
 
YMaps.Events.observe(map, map.Events.Click, function (map, e) { if (flag) {
     map.openBalloon(e.getCoordPoint(), new myLayout(e.getCoordPoint())
}}
 
</script>   
 
</head>
 
<body>
 
<div id="YMapsID"></div>
<div id="scriptmes"></div>
 
</body>
</html>
 

 

4 комментария

установить произвольное html-содержимое в балун можно методом setBalloonContent()

или с помощью шаблонов

 

Отображается как текст потому что здесь у вас написана чушь:

placemark.description= ''+json.markers[i].name+'';placemark.description = placemark.description+'Описание: '+json.markers[i].descriptions;

 

в документе может быть только один тэг html  за исключением содержимого iframe

 а какой тогда тег использовать нужен вида ссылка на контент

чтобы я задавал тип контента а пользователь указывал лишь ссылку в текстовом поле?

перерыл весь справочник на htmlbook.ru  нашел тег

но он работает не во всех браузерах

 

перепробовал еще кучу тегов но результа не получил

На помощь!

placemark.setBalloonContent('' + json.markers[i].descriptions + '');