<!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 new AMap.PlaceSearch ({
the pageSize: . 5 , // show up to five
the pageIndex: . 1 , // on the second page
city: ' 010 ' , // which city Search
citylimit: to true , // whether to limit in urban search and
map: map, // display the map in which the
Panel: ' setCenterNode ' // which element is placed under
.}) Search (searchInput.value); // search for content
}
});
</ Script>
</ body>
</ HTML>
