arcgis js 地图混合天地图实现范围内搜索功能，弹框显示

最新推荐文章于 2023-12-14 14:42:32 发布

VIP文章 huang_jin_yi_

最新推荐文章于 2023-12-14 14:42:32 发布

阅读量2.1k

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/huang_jin_yi/article/details/91947651

版权

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <title>Test Map</title>
    <link rel="stylesheet" href="https://js.arcgis.com/3.24/esri/css/esri.css">
    <script src="https://js.arcgis.com/3.24/"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
 
    <style>
        html,
        body,
        #map {
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0;
        }

        .positionBtn {
            position: absolute;
            z-index: 999;
            top: 20px;
            right: 10px;
        }
        /*搜索框*/
        .search {
            position: fixed;
            z-index: 9999;
            left: 60px;
            top: 52px;
            width: 80%;
        }
        .search input {
            border: 1px solid #20a5f4;
            border-radius: 5px 0 0 5px; 
            background: #fff;
            top: 0;
            right: 0;
            height: 32px;
            width: 70%;
            padding-left: 5px;
            outline: none;
            font-size: 14px;
        }
        .search button {
            background: #20a5f4;
            border-radius: 0 5px 5px 0;
            position: relative;
            top: 0px;
            right: 4px;
            height: 37px;
            width: 46px;
            left: -6px;
            border: none; 
            outline: none;
            color: #fff;
        }

        #mapTest {
            height: 100%;
            width: 100%;
            display: none;
        }
        .esriPopupWrapper .content {
            padding: 0;
        }

        .actionsPane,.maximize {
            display:none;
        }

        .contentPane {
            line-height: 22px;
        }
        .esriPopup .titlePane {
            background: #20a5f4;
        }
        .esriPopup .contentPane {
            padding-top: 0;
        }

        .msg {
            position: fixed;
            width:80%;
            height:100px;
            z-index: 9999;
            background:#fff;
            left: 50%;
            margin-left: -40%;
            top: 40%;
            border-radius: 10px;
            padding:15px;
            -webkit-box-sizing: border-box;
               -moz-box-sizing: border-box;
                    box-sizing: border-box;
            font-size: 12px;
            line-height: 24px;
            display:none;
        }
        .msg img {
            float: right; 
            cursor:pointer;
        }
    </style>
    </head>
<body>
<div id="search"></div>

<div id="map">
   
    <div id="zoom"></div>
    <div class="positionBtn">
        <button id="img">影像</button>
        <button id="vec">矢量</button>
    </div>
    <div class="msg">
        <img class="msgClose" src="delete.png" alt="" />
        <div>名称:<span class="name">吉首市政府</span></div>
        <div>地址:<span class="addr">吉首市政府</span></div>
        <div>网格:<span class="grid">第一网格</span></div>
    </div>
</div>


<div id="mapTest"></div>

<div class="search">
   <input type="text" placeholder="地点" id="place">
   <button type="button" id="sear

最低0.47元/天解锁文章

huang_jin_yi_

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
arcgis js 地图混合天地图实现范围内搜索功能，弹框显示

<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta name="viewport" content="width=device-width, user-scalable...
复制链接

扫一扫