You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
234 lines
6.1 KiB
HTML
234 lines
6.1 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
|
|
<title>输入提示后查询</title>
|
|
<link rel="stylesheet" href="https://cache.amap.com/lbs/static/main1119.css" />
|
|
<style>
|
|
#myPageTop{
|
|
position: absolute;
|
|
top: 66px;
|
|
width: 280px;
|
|
border: none;
|
|
right: 368px;
|
|
padding: 0;
|
|
}
|
|
.g_flex_1 {
|
|
flex: 1;
|
|
}
|
|
.g_flex_none {
|
|
flex: none;
|
|
}
|
|
.g_flex_c {
|
|
display: flex;
|
|
display: -webkit-flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
.g_flex_rowRight_columnCenter {
|
|
display: flex;
|
|
display: -webkit-flex;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
}
|
|
.g_flex_rowRight_columnEnd {
|
|
display: flex;
|
|
display: -webkit-flex;
|
|
justify-content: flex-end;
|
|
align-items: flex-end;
|
|
}
|
|
.g_flex_row_start {
|
|
display: flex;
|
|
display: -webkit-flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
justify-content: flex-start;
|
|
}
|
|
.g_flex_row_start_none {
|
|
display: flex;
|
|
display: -webkit-flex;
|
|
flex-direction: row;
|
|
flex-wrap: nowrap;
|
|
justify-content: flex-start;
|
|
}
|
|
.g_flex_row_start_c {
|
|
display: flex;
|
|
display: -webkit-flex;
|
|
flex-direction: row;
|
|
flex-wrap: nowrap;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
}
|
|
.g_flex_row_between {
|
|
display: flex;
|
|
display: -webkit-flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
}
|
|
.g_flex_row_around {
|
|
display: flex;
|
|
display: -webkit-flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
justify-content: space-around;
|
|
}
|
|
.g_flex_row_center {
|
|
display: flex;
|
|
display: -webkit-flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
}
|
|
.g_flex_row_end {
|
|
display: flex;
|
|
display: -webkit-flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
justify-content: flex-end;
|
|
}
|
|
.g_flex_column_start {
|
|
display: flex;
|
|
display: -webkit-flex;
|
|
flex-direction: column;
|
|
flex-wrap: wrap;
|
|
justify-content: flex-start;
|
|
}
|
|
.g_flex_column_between {
|
|
display: flex;
|
|
display: -webkit-flex;
|
|
flex-direction: column;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
}
|
|
.g_flex_column_end {
|
|
display: flex;
|
|
display: -webkit-flex;
|
|
flex-direction: column;
|
|
flex-wrap: wrap;
|
|
justify-content: flex-end;
|
|
}
|
|
.g_flex_column_center {
|
|
display: flex;
|
|
display: -webkit-flex;
|
|
flex-direction: column;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
}
|
|
#myPageTop input{
|
|
-webkit-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
font-variant: tabular-nums;
|
|
list-style: none;
|
|
-webkit-font-feature-settings: "tnum";
|
|
font-feature-settings: "tnum";
|
|
position: relative;
|
|
display: inline-block;
|
|
width: 100%;
|
|
height: 32px;
|
|
padding: 4px 11px;
|
|
color: rgba(0,0,0,.65);
|
|
font-size: 14px;
|
|
line-height: 1.5;
|
|
background-color: #fff;
|
|
background-image: none;
|
|
border: 1px solid #d9d9d9;
|
|
border-radius: 4px;
|
|
-webkit-transition: all .3s;
|
|
transition: all .3s;
|
|
width: 280px;
|
|
outline: #1677ff;
|
|
}
|
|
#myPageTop input:focus{
|
|
border-color: #40a9ff;
|
|
border-right-width: 1px!important;
|
|
}
|
|
#myPageTop .btn{
|
|
cursor: pointer;
|
|
width: 32px;
|
|
height: 32px;
|
|
background-color: #1677ff;
|
|
color: #fff;
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
border-top-right-radius: 4px;
|
|
border-bottom-right-radius: 4px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="container"></div>
|
|
<div id="myPageTop" >
|
|
<div class="g_flex_row_center" style="position: relative;">
|
|
<div>
|
|
<input id="tipinput" placeholder="请输入关键词搜索" />
|
|
</div>
|
|
<div class="btn g_flex_c">
|
|
<svg focusable="false" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="output" class="output">
|
|
|
|
</div>
|
|
<script type="text/javascript">
|
|
window._AMapSecurityConfig = {
|
|
securityJsCode:'d2cc124abc816af959dc3cd2279792a0',
|
|
}
|
|
</script>
|
|
<script
|
|
src="https://webapi.amap.com/maps?v=2.0&key=b07c4f869f1abf510e59a94bd50699d8&&plugin=AMap.Scale,AMap.HawkEye,AMap.ToolBar,AMap.ControlBar"
|
|
type="text/javascript">
|
|
</script>
|
|
<script type="text/javascript">
|
|
//地图加载
|
|
var map = new AMap.Map("container", {
|
|
resizeEnable: true
|
|
});
|
|
|
|
var scale = new AMap.Scale(),
|
|
toolBar = new AMap.ToolBar({
|
|
position: {
|
|
top: '110px',
|
|
right: '40px'
|
|
}
|
|
}),
|
|
controlBar = new AMap.ControlBar({
|
|
position: {
|
|
top: '10px',
|
|
right: '10px',
|
|
}
|
|
}),
|
|
overView = new AMap.HawkEye({
|
|
opened: false
|
|
});
|
|
map.addControl(scale);
|
|
map.addControl(toolBar);
|
|
map.addControl(controlBar);
|
|
map.addControl(overView);
|
|
|
|
//输入提示
|
|
var autoOptions = {
|
|
input: "tipinput",
|
|
output: "output"
|
|
};
|
|
var auto;
|
|
AMap.plugin(['AMap.PlaceSearch', 'AMap.AutoComplete'], function() {
|
|
auto = new AMap.AutoComplete(autoOptions);
|
|
var placeSearch = new AMap.PlaceSearch({
|
|
map: map
|
|
}); //构造地点查询类
|
|
auto.on("select", select); //注册监听，当选中某条记录时会触发
|
|
function select(e) {
|
|
placeSearch.setCity(e.poi.adcode);
|
|
placeSearch.search(e.poi.name); //关键字查询查询
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |