利用高德地图api实现简单的地图功能，包括定位，地图缩放，搜索，列表展示等等基础功能
<!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" />
<script type="text/javascript"
src="https://webapi.amap.com/maps?v=1.4.13&key=1351d632dc1826495e1ae0e97da35baf&plugin=AMap.Autocomplete,AMap.PlaceSearch"></script>
<style type="text/css">
#panel {
position: fixed;
background-color: white;
max-height: 90%;
overflow-y: auto;
top: 10px;
right: 10px;
width: 280px;
border-bottom: solid 1px silver;
}
</style>
</head>
<body>
<div id="container"></div>
<div id="panel"></div>
<div id="myPageTop" style="left:50px;200px">
<table>
<tr>
<td><label>请输入关键字：</label></td>
</tr>
<tr>
<td><input id="tipinput" /></td>
</tr>
</table>
</div>
<div id="closeMaps"></div>
<script type="text/javascript">
var cityCode;
//地图加载
var map = new AMap.Map("container", {
resizeEnable : true
});
map.plugin('AMap.Geolocation', function() {
var geolocation = new AMap.Geolocation({
// 设置定位超时时间，默认：无穷大
timeout : 10000,
buttonOffset : new AMap.Pixel(10, 20),
zoomToAccuracy : false,
// 定位按钮的排放位置, RB表示右下
buttonPosition : 'RB'
})
geolocation.getCurrentPosition()
AMap.event.addListener(geolocation, 'complete', onComplete)
AMap.event.addListener(geolocation, 'error', onError)
function onComplete(data) {
cityCode = data.addressComponent.adcode;
// data是具体的定位信息
}
function onError(data) {
// 定位出错
}
//输入提示
var autoOptions = {
input : "tipinput",
city : "成都"
};
var auto = new AMap.Autocomplete(autoOptions);
var placeSearch = new AMap.PlaceSearch({
pageSize: 5, // 单页显示结果条数
pageIndex: 1, // 页码
type: "汽车服务|汽车销售|汽车维修|摩托车服务|餐饮服务|购物服务|生活服务|体育休闲服务|医疗保健服务|住宿服务|风景名胜|商务住宅|政府机构及社会团体|科教文化服务|交通设施服务|金融保险服务|公司企业|道路附属设施|地名地址信息|公共设施",
citylimit: false,
panel: "panel",
map : map
}); //构造地点查询类
AMap.event.addListener(auto, "select", select);//注册监听，当选中某条记录时会触发
function select(e) {
placeSearch.setCity(cityCode);
placeSearch.search(e.poi.name); //关键字查询查询
}
AMap.plugin('AMap.ToolBar', function() {
var toolbar = new AMap.ToolBar();
map.addControl(toolbar)
})
});
</script>
</body>
</html>