一、前言
在上篇文章中介绍了如何在mapbox上添加图片层。(感兴趣的同学可以点击前面的链接查看原文)
主要任务:我们在上篇文章的基础上,实现点击图片弹出对话框功能。
效果图:
二、弹出窗口api
popup一个弹出组件。
三、对话框功能
完整HTML代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>mapbox添加图片层</title>
<script src='https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css' rel='stylesheet' />
<style>
#mapDiv {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
width: 1920px;
height: 1080px;
background: rgba(0, 0, 0, 0.5);
z-index: -1;
}
.btns {
float: left;
/* width: 100px; */
height: 32px;
z-index: 555;
background-image: url('../img/btn_bg.png');
background-size: 100% 100%;
border-radius: 10px;
text-align: center;
cursor: pointer;
margin-top: 100px;
margin-left: 490