<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>高德地圖</title>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.11&key=9de88a718781910c9a1c81230827d1ce"></script>
<style type="text/css">
*{
margin: 0;
padding: 0;
list-style: none;
}
#container{
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
#setZoomNode,#setCenterNode{
width: 280px;
position: absolute;
z-index: 99;
right: 20px;
top: 50px;
border: 1px solid black;
box-shadow: 0 0 5px black;
background: white;
}
#setCenterNode{
top: 50px;
}
#node li{
cursor: pointer;
}
#searchNode{
width: 280px;
height: 30px;
background: white;
position: absolute;
top: 20px;
right: 20px;
}
</style>
</head>
<body>
<div id="container"></div>
<div id="searchNode">
<input type="" name="" id="searchInput" />
<button id="btn">搜索</button>
</div>
<div id="setCenterNode">
</div>
<script type="text/javascript">
var map = new AMap.Map('container',{
zoom:10,
center:[121,30]
});
AMap.service(['AMap.PlaceSearch'],function(){
btn.onclick = function(){
new AMap.PlaceSearch({
pageSize:5, //最多顯示五條
pageIndex:1, //在第二頁顯示
city:'010', //在哪個城市搜索
citylimit:true, //是否限制在城市內搜索
map:map, //展示在哪個地圖里
panel:'setCenterNode' //放在哪個元素下
}).search(searchInput.value); //搜索內容
}
});
</script>
</body>
</html>
