在高德地图上增加按钮,通过点击按钮进行某些操作。
其实是非常简单的,但是网上没有搜到类似的文章,所以在写这个功能的时候,出现一刷新才会显示按钮,然后按钮消失不见。
这是因为自定义的按钮层级不够,被高德地图覆盖了,在css样式里把层级提高就行
<div style="position: relative;height: 500px;">
<div id="container" style="height:100%">
<a-button class="btn1" @click="ontimeImg">实时数据</a-button>
<a-button class="btn2" @click="ontimeHeatmap">实时图表</a-button>
<a-button class="btn3" @click="ontimeNumbers">实时人数</a-button>
</div>
</div>
#container {
height: 100%;
position: relative;
.btn1 {
position: absolute;
width: 120px;
height: 30px;
top: 13px;
left: 10px;
cursor: pointer;
z-index: 10;
}
.btn2 {
position: absolute;
width: 120px;
height: 30px;
top: 13px;
left: 150px;
cursor: pointer;
z-index: 10;
}
.btn3 {
position: absolute;
width: 180px;
height: 30px;
top: 13px;
left: 290px;
cursor: pointer;
z-index: 10;
}
}