在現在的很多頁面中，都運用到了百度地圖來定位，例如： 像這樣的地圖，我們可以通過手動來進行放大、縮小、移動等來查找具體的地址，特別方便，在頁面上引用也顯得頁面很有特點，那麼，應該怎麼樣來製作這種地圖呢？ 一、獲取源代碼 網址：http://api.map.baidu.com/lbsapi/creat ...
在現在的很多頁面中，都運用到了百度地圖來定位，例如：
像這樣的地圖，我們可以通過手動來進行放大、縮小、移動等來查找具體的地址，特別方便，在頁面上引用也顯得頁面很有特點，那麼，應該怎麼樣來製作這種地圖呢？
一、獲取源代碼
網址：http://api.map.baidu.com/lbsapi/createmap/index.html?qq-pf-to=pcqq.c2c
1.打開網址，就可以看到一個地圖編輯界面：
2.在頁面右側設置地點等信息：
1）設置地點
2）設置地圖上的基本信息
3）在地圖上添加標誌
點擊標記圖標還可以選擇它的樣式：
4）獲取源代碼
點擊頁面下麵的第二步中的獲取源代碼即可：
——————>
（註意：這裡生成的代碼是顯示不出來的，必須獲取密匙）
二、獲取密匙
1.點擊生成的代碼中的“獲取密匙”：
，然後按照要求一步步填寫資料並提交，一定要註意必須進行認證。
2.將生成的Ak（即密匙）複製到代碼中，替換掉“您的密匙”
三、插入到自己的頁面中
按照自己的頁面要求將生成的代碼插入在頁面代碼中，但是一定要註意載入順序的問題：
方法1：如果js代碼是放在頁面代碼裡面的，註意把生成地圖js代碼放在頁面最下邊。
方法2：如果用的外部js鏈接，應該把地圖的js代碼放在 $(function(){...})裡面。
四、獨立地圖源碼
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <meta name="keywords" content="百度地圖,百度地圖API，百度地圖自定義工具，百度地圖所見即所得工具" /> 6 <meta name="description" content="百度地圖API自定義地圖，幫助用戶在可視化操作下生成百度地圖" /> 7 <title>百度地圖API自定義地圖</title> 8 <!--引用百度地圖API--> 9 <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=4mkBt21xAMGLFNxFo652P5Lq"></script> 10 </head> 11 12 <body> 13 <!--百度地圖容器--> 14 <div style="width:700px;height:550px;border:#ccc solid 1px;font-size:12px" id="map"></div> 15 <p style="color:red;font-weight:600">地圖生成工具基於百度地圖JS api v2.0版本開發，使用請申請密匙。 16 <a href="http://developer.baidu.com/map/index.php?title=jspopular/guide/introduction" style="color:#2f83c7" target="_blank">瞭解如何申請密匙</a> 17 <a href="http://lbsyun.baidu.com/apiconsole/key?application=key" style="color:#2f83c7" target="_blank">申請密匙</a> 18 </p> 19 </body> 20 <script type="text/javascript"> 21 //創建和初始化地圖函數： 22 function initMap(){ 23 createMap();//創建地圖 24 setMapEvent();//設置地圖事件 25 addMapControl();//向地圖添加控制項 26 addMapOverlay();//向地圖添加覆蓋物 27 } 28 function createMap(){ 29 map = new BMap.Map("map"); 30 map.centerAndZoom(new BMap.Point(121.515663,31.315091),18); 31 } 32 function setMapEvent(){ 33 map.enableScrollWheelZoom(); 34 map.enableKeyboard(); 35 map.enableDragging(); 36 map.enableDoubleClickZoom() 37 } 38 function addClickHandler(target,window){ 39 target.addEventListener("click",function(){ 40 target.openInfoWindow(window); 41 }); 42 } 43 function addMapOverlay(){ 44 var markers = [ 45 {content:"公司地址：上海市政立路477號同和國際大廈A座501",title:"同和國際大廈",imageOffset: {width:-46,height:-21},position:{lat:31.314898,lng:121.514693}} 46 ]; 47 for(var index = 0; index < markers.length; index++ ){ 48 var point = new BMap.Point(markers[index].position.lng,markers[index].position.lat); 49 var marker = new BMap.Marker(point,{icon:new BMap.Icon("http://api.map.baidu.com/lbsapi/createmap/images/icon.png",new BMap.Size(20,25),{ 50 imageOffset: new BMap.Size(markers[index].imageOffset.width,markers[index].imageOffset.height) 51 })}); 52 var label = new BMap.Label(markers[index].title,{offset: new BMap.Size(25,5)}); 53 var opts = { 54 width: 200, 55 title: markers[index].title, 56 enableMessage: false 57 }; 58 var infoWindow = new BMap.InfoWindow(markers[index].content,opts); 59 marker.setLabel(label); 60 addClickHandler(marker,infoWindow); 61 map.addOverlay(marker); 62 }; 63 } 64 //向地圖添加控制項 65 function addMapControl(){ 66 var scaleControl = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT}); 67 scaleControl.setUnit(BMAP_UNIT_IMPERIAL); 68 map.addControl(scaleControl); 69 var navControl = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE}); 70 map.addControl(navControl); 71 var overviewControl = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:false}); 72 map.addControl(overviewControl); 73 } 74 var map; 75 initMap(); 76 </script> 77 </html>View Code
