krpano hotspot 使用html

发布于:2025-06-27 ⋅ 阅读:(16) ⋅ 点赞:(0)
<hotspot name="spot2" type="html"  html="get:data[dataMakerLabel].content" width="150" height="150" ath="-64.99" atv="19" onclick="js(openImage('images/pic/0-1.jpg'););"/>

<data name="dataMakerLabel"><![CDATA[
		<div class="marker">
			<div class="marker-label">
			  <span>王员工</span>
			</div>
			<div class="marker-icon">
			  <img src="/images/pic/point.png" alt="定位点" ></img>
			</div>
		</div>
	]]></data>

	<cssstyles><![CDATA[
		.marker{
			width: 100%;
		  	height: 100%;
		  	display: flex;
		  	flex-wrap: nowrap;
		  	flex-direction: column;
		  	align-items: center;
		  	justify-content: center;
		}

		.marker-icon img {
		  width: 48px;
		  height: 48px;
		  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
		  margin-top: 10px;
		}

		.marker-label {
		  white-space: nowrap;
		  letter-spacing: 3px;
		  box-sizing: border-box;
		  padding: 7px 15px 7px 15px;
		  background: linear-gradient(180deg, rgba(5, 126, 173, .5), rgba(5, 126, 173, .8) 90%, #057ead);
		  border: 2px solid #ddd;
		  border-radius: 10px 10px 10px 10px / 20px 20px 20px 20px;
		  text-align: center;
		  font-size: 18px;
		  font-weight: 700;
		  text-shadow: none;
		  box-shadow: 0 5px 5px rgba(6, 0, 1, .3);
		  background-repeat: no-repeat;
		  color: #fff;
		}

		.marker-label:after {
		  position: absolute;
    	  bottom: 76px;
    	  left: 50%;
		  display:block;
		  content: "";
		  width: 28px;
		  height: 10px;
		  background: url(data:image/png;base64,iVB) no-repeat 50%;
		  background-size: 100% 100%;
		  margin-left: -14px;
		}
	]]></cssstyles>

hotspot 设置为html时需要有widthheight属性,要不 宽高默认为0。一定要仔细阅读文档,一个xml的标签很多都是想关联的。少设置一个会出现问题。
在这里插入图片描述


网站公告

今日签到

点亮在社区的每一天
去签到