高德地图JavaScript API是一套用JavaScript 语言编写的应用程序接口，可以通过各种API接口向地图添加内容，创建功能丰富、交互性强的地图应用。高德地图JavaScript API 提供了大量的实用工具和富有特色的插件功能，并提供了搜索和路线规划等服务。
1、首先
2、然后
3、最后就是看官方文档开发
高德地图API使用介绍：http://lbs.amap.com/api/javascript-api/guide-2/map_show/
直接上代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1.1,user-scalable=no">
<title>锦福地图</title>
<link rel="shortcut icon" type="image/x-icon" href="img/fav.png" />
<link href="css/map.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="map"></div>
<div class="search">
<input id="City" type="text" />
<button id="Ok">搜索</button>
</div>
<div id="zoomIn" class="zoomIn">放大</div>
<div id="zoomOut" class="zoomOut">缩小</div>
<script type="text/javascript" src="js/jquery-1.11.2.min.js" ></script>
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=430307684d2fa5fea91a9e6fe00c828d"></script>
<script type="text/javascript">
$(function(){
var map=new AMap.Map("map",{
level:12
}); //map.setCity("武汉市"); //设置地图要显示的城市 //map.getCenter(); //获取当前地图中心点地理坐标 //放大
$("#zoomIn").click(function () {
map.zoomIn();
}); //缩小
$("#zoomOut").click(function () {
map.zoomOut();
}); //搜索城市
$("#Ok").click(function () {
var city=$("#City").val();
map.setCity(city);
}); //地图比例尺
map.plugin(["AMap.Scale"],function(){
var scale = new AMap.Scale();
map.addControl(scale);
}); //加载鹰眼
map.plugin(["AMap.OverView"],function(){
var view = new AMap.OverView();
view.open();
map.addControl(view);
}); //地图类型切换
map.plugin(["AMap.MapType"],function(){
//地图类型切换
var type= new AMap.MapType({
defaultType:0 //使用2D地图
});
map.addControl(type);
}); //地图操作工具条
map.plugin(["AMap.ToolBar"],function(){
//加载工具条
var tool = new AMap.ToolBar();
map.addControl(tool);
}); map.plugin('AMap.Geolocation', function () {
geolocation = new AMap.Geolocation({
enableHighAccuracy: true,//是否使用高精度定位，默认:true
timeout: 10000, //超过10秒后停止定位，默认：无穷大
maximumAge: 0, //定位结果缓存0毫秒，默认：0
convert: true, //自动偏移坐标，偏移后的坐标为高德坐标，默认：true
showButton: true, //显示定位按钮，默认：true
buttonPosition: 'LB', //定位按钮停靠位置，默认：'LB'，左下角
buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
showMarker: true, //定位成功后在定位到的位置显示点标记，默认：true
showCircle: true, //定位成功后用圆圈表示定位精度范围，默认：true
panToLocation: true, //定位成功后将定位到的位置作为地图中心点，默认：true
zoomToAccuracy:true //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
});
map.addControl(geolocation);
AMap.event.addListener(geolocation, 'complete', onComplete);//返回定位信息
AMap.event.addListener(geolocation, 'error', onError); //返回定位出错信息
}); //搜索附近餐厅
map.plugin(["AMap.PlaceSearch"],function(){
var pl = new AMap.PlaceSearch();
pl.searchNearBy('餐厅',map.getCenter(),3000); AMap.event.addListener(pl,'complete',function(e){
console.log(e);
});
}); }); </script>
</body>
</html>