今天公司項目要做一個基於地圖的位置展示，在網上找了下，發現高德地圖開放api能滿足功能，現對其應用做一下簡單的記錄。
1.首先在高德開發平台上注冊，簡單填寫相關信息后，可以獲得key，拿到key后可以調用高德地圖api的相關接口。
2.在調用api的相關頁面引入高德api，eg：
<script type="text/javascript"
src="http://webapi.amap.com/maps?v=1.3&key=youKey">
</script>
3.根據初始位置創建地圖實例，eg：
var position = new AMap.LngLat(x, y);
//創建地圖實例
mapObj = new AMap.Map("container", {
view : new AMap.View2D({//創建地圖二維視口
center : position,//創建中心點坐標
zoom : 10, //設置地圖縮放級別
rotation : 0
//設置地圖旋轉角度
}),
lang : "zh_cn"//設置地圖語言類型，默認：中文簡體
});
4.在頁面上進行初始化，一般在body上eg：
<body onload="initialize('121.476753','31.224349')">
地圖顯示位置在div中定義：
<div id="container" style="width:85%; height:500px;margin:0;"></div>
需要說明的是，顯示位置放在table中會有顯示不出來的問題，推薦放在div中進行位置改變。
5.在地圖特定位置顯示信息，eg：
var info = [];
info.push("<div><div><img width='67px' height='16px' style=\"float:left;\" src=\"${ctx}/images/main/logo.png \"/></div> ");
info.push("<div style=\"padding:0px 0px 0px 4px;\"><b>上海北斗</b>");
info.push("x坐標："+x);
info.push("y坐標："+y);
info.push("地址 : 上海市虹口區歐陽路法蘭橋創意園196號</div></div>");
infoWindow = new AMap.InfoWindow({
content:info.join("<br/>") //使用默認信息窗體框樣式，顯示信息內容
});
infoWindow.open(mapObj,new AMap.LngLat(x,y));
6.自定義圖標點圖標
//創建點圖標
var marker = new AMap.Marker({
icon:"http://webapi.amap.com/images/marker_sprite.png",
position:new AMap.LngLat(x,y),
offset:new AMap.Pixel(-26,-13),
autoRotation:true
});
marker.setMap(mapObj); //在地圖上添加點
7.上面是一些簡單的api調用，詳細的高德開放平台都有提供相應的api，可具體情況具體對待。