<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
时需要有width
、height
属性,要不 宽高默认为0。一定要仔细阅读文档,一个xml的标签很多都是想关联的。少设置一个会出现问题。