1.開篇說說
百度地圖開放api ，免費使用，功能強大啊.
2.示例代碼
下面示例 提供地圖展示 ，標註地點，地點信息展示，和拖拽事件保存座標 。
該示例完全依賴百度地圖的 javascript 庫
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body, html {width: 100%;height: 100%;margin:0;font-family:"微軟雅黑";}
#allmap{width:100%;height:500px;}
#r-result{width:100%;margin-top:5px;}
p{margin:5px; font-size:14px;}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的百度地圖key"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js"></script>
<link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css" />
<title>添加/刪除工具條、比例尺控件</title>
</head>
<body>
<div id="allmap" style="width:600px;height:500px; margin:auto;"></div>
<p>在地圖的左上、右上分別展示完整、縮略樣式的縮放平移控件；同時在地圖的左上方展示比例尺控件，點擊按鈕查看效果</p>
</body>
</html>
<script type="text/javascript">
// 百度地圖API功能
var map = new BMap.Map("allmap");
var point = new BMap.Point(113.252949,23.119689);
map.centerAndZoom(point, 20);
//添加控件
var top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT});// 左上角，添加比例尺
var top_left_navigation = new BMap.NavigationControl(); //左上角，添加默認縮放平移控件
var top_right_navigation = new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_RIGHT, type: BMAP_NAVIGATION_CONTROL_SMALL}); //右上角，僅包含平移和縮放按鈕
map.addControl(top_left_control);
map.addControl(top_left_navigation);
map.addControl(top_right_navigation);
//添加標註
//var myIcon = new BMap.Icon("http://lbsyun.baidu.com/jsdemo/img/fox.gif", new BMap.Size(300,157));
//var marker = new BMap.Marker(new BMap.Point(113.252949,23.119689),{icon:myIcon});
var marker = new BMap.Marker(new BMap.Point(113.252949,23.119689));
map.addOverlay(marker);
marker.setAnimation(BMAP_ANIMATION_BOUNCE);//彈跳動畫
//
var searchInfoWindow1 = new BMapLib.SearchInfoWindow(map, "上下九步行街", {
title: "上下九步行街", //標題
panel : "panel", //檢索結果面板
enableAutoPan : true, //自動平移
searchTypes :[
BMAPLIB_TAB_FROM_HERE, //從這裏出發
BMAPLIB_TAB_SEARCH //周邊檢索
]
});
marker.addEventListener("click", function(){
searchInfoWindow1.open(new BMap.Point(113.252949,23.119689));
});
/*縮放控件type有四種類型:
BMAP_NAVIGATION_CONTROL_SMALL：僅包含平移和縮放按鈕；BMAP_NAVIGATION_CONTROL_PAN:僅包含平移按鈕；BMAP_NAVIGATION_CONTROL_ZOOM：僅包含縮放按鈕*/
//添加拖動事件
marker.enableDragging();
marker.addEventListener("dragend", function(e){
alert("當前位置：" + e.point.lng + ", " + e.point.lat);
})
</script>
下面是上下九步行街的位置圖
3.參考
http://lbsyun.baidu.com/index.php?title=jspopular3.0/guide/mark
http://lbsyun.baidu.com/jsdemo.htm#d0_3
http://lbsyun.baidu.com/jsdemo.htm#d0_4
http://lbsyun.baidu.com/index.php?title=jspopular3.0/guide/widget