mapbox点击图片弹出对话框

最新推荐文章于 2024-04-26 10:15:50 发布

丶酸酸

最新推荐文章于 2024-04-26 10:15:50 发布

阅读量2.8k

点赞数 3

分类专栏： mapbox使用文章标签： javascript

本文链接：https://blog.csdn.net/a82048195/article/details/108519136

版权

一、前言

在上篇文章中介绍了如何在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: 490px

最低0.47元/天解锁文章

丶酸酸

关注

3
点赞
踩
10

收藏

觉得还不错? 一键收藏
2
评论
mapbox点击图片弹出对话框

一、前言在上篇文章中介绍了如何在mapbox上添加图片层。(感兴趣的同学可以点击前面的链接查看原文)主要任务：我们在上篇文章的基础上，实现点击图片弹出对话框功能。效果图:二、弹出窗口apipopup一个弹出组件。三、对话框功能完整HTML代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" con
复制链接

扫一扫

专栏目录