(一)開發背景
超圖和百度地圖各有優勢,但是對於開發者來說,百度地圖更加方便,因爲,不用做數據
(二)萬事開頭難
不想說廢話了,直接上代碼吧,只說一句:js務必寫在html下方,不然會渲染不到
<!DOCTYPE html>
<html>
<head>
<base href="<?php echo base_url();?>"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title>地圖展示</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=dAiSmSs6IHrw03DIrn0YTWWBTenyA9Iy"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/LuShu/1.2/src/LuShu_min.js"></script>
<link href="public/hui_css/initmap_hui.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="allmap"></div>
<div class="funtionbox">
<button id="coordinate" οnclick="showDeliveryPoint()"/>顯示物資點</button>
<button id="coordinate" οnclick="endClickGetMapPoint()"/>點擊獲x取座標</button>
<button id="coordinate" οnclick="getWayPoint()"/>點擊獲取途經點座標</button>
<button id="coordinate" οnclick="mapPath()"/>路徑分析</button>
<button id="coordinate" οnclick="mapMorePointPath()"/>路過點物資配送</button>
<button id="coordinate" οnclick="runMove()">動畫配送</button>
<!-- <button id="coordinate" οnclick="add_control()"/>添加廊坊瓦片圖</button>
<button id="coordinate" οnclick="delete_control()"/>刪除廊坊瓦片圖</button> -->
</div>
</body>
<script type="text/javascript">
function initMap() {
createMap(); // 百度地圖API功能
}
function createMap(){
var map = new BMap.Map("allmap"); // 創建Map實例
map.centerAndZoom(new BMap.Point(116.73468840933,39.5295131919511), 13); // 初始化地圖,設置中心點座標和地圖級別
map.addControl(new BMap.MapTypeControl()); // 添加地圖類型控件
map.setCurrentCity("廊坊"); // 設置地圖顯示的城市 此項是必須設置的
map.enableScrollWheelZoom(true); // 開啓鼠標滾輪縮放
window.map = map;
}
initMap();
</script>
</html>
(三)申請祕鑰
必須要有祕鑰,自己去百度地圖開發者平臺上去申請,如果申請不下來可以先用我的,不過我的祕鑰應該不會存留很長時間
(四)官方文檔
官方文檔,官方文檔,官方文檔,重要的事說三遍