通过 document.getElementById(idPopUPImage).innerHTML 在传单中为设置值创建静态弹出窗口？

Question

我有传单地图 - Codpen

我已经放置了一个按钮键，当我点击它时会在弹出窗口中显示图像。但是当我关闭弹出窗口并再次打开时，图片没有显示，我必须再次点击按钮键才能显示图像。

如何设置直到页面不刷新显示在弹出窗口中？

请记住，我必须使用按钮来执行此操作，并且我不想在创建标记时在弹出窗口中设置照片地址。

var map = L.map('mapid').setView([51.505, -0.09], 13);

L.tileLayer('//maps.wikimedia.org/osm-intl/{z}/{x}/{y}.png', {
   attribution: 'Wikimedia maps beta | Map data &copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap contributors</a>'
  }).addTo(map);

// Создаем новый pane, который не вложен в mapPane => независимый от transform
var pane = map.createPane('fixed', document.getElementById('mapid'));

var marker = L.marker([51.5, -0.09]).addTo(map);
 
var popup = L.popup({
  pane: 'fixed', // Указываем нужный pane
  className: 'popup-fixed',
  autoPan: false,
}).setContent('<p id="popupid" style="text-align:center;position: inherit;color: #EA2D62;font-size: 15px;">  hiiiii!</p>  ');

 

marker.bindPopup(popup);
 

// Остальное добиваем стилями

function img(){
 
  document.getElementById('popupid').innerHTML='<img src="https://images.unsplash.com/photo-1503356380949-02bb0fb9474c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=600&q=60"   width="70" height="70">' ;
};

html,
body {
  height: 100%;
}

#mapid {
  height: 100%;
}

<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"> </script> 
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" type="text/css" ></link> 

 <button   type="button"  onclick="img()" > <p style="text-align:center;position: inherit;color: #EA2D62;font-size: 32px;">  picture </p> </button>

<div id="mapid"></div>

Answer 1

设置弹出内容而不是覆盖html。

function img(){
 popup.setContent('<img src="https://images.unsplash.com/photo-1503356380949-02bb0fb9474c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=600&q=60"   width="70" height="70">') ;
};

https://jsfiddle.net/falkedesign/y72s3c6x/

通过 document.getElementById(idPopUPImage).innerHTML 在传单中为设置值创建静态弹出窗口？

Create popup static in leaflet for set value by document.getElementById(idPopUPImage).innerHTML?

html

javascript

popup

leaflet