<!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
arcgis js 地图混合天地图 实现范围内搜索功能,弹框显示
最新推荐文章于 2024-08-05 14:27:21 发布
这篇博客介绍了如何在ArcGIS JavaScript API中结合天地图,进行地图范围内的搜索功能,并在搜索后弹出框显示结果。重点提到了getscript.js的修改,避免了与arcgis inits.js的命名冲突问题,同时提醒注意使用天地图API时需要密钥。此外,还涉及到地图图标的更换,如flag.png和弹框关闭图标。
摘要由CSDN通过智能技术生成