在網頁中插入百度地圖(實例)

如何在網頁中插入百度地圖呢?

2.切換城市,搜尋需標註位置。(如下圖

方法/步驟

1.進入:http://dev.baidu.com/wiki/static/map/API/tool/creatMap/ (創建地圖-百度地圖API所見即所得工具,百度官方地址,大家放心使用)

切換城市,搜尋需標註位置。(如下圖:)

設置地圖:大家可以對網站顯示地圖的寬高進行設置,其餘選項不動。

添加標註:點擊第一個圖標後,在右側找到自己的位置,單擊滑鼠左鍵可定位。標記圖標處可更換圖標形狀,名稱和備註填入位置相關信息。(如下圖:)

完成以上4步後,點獲取代碼。

獲取代碼如下:(注意:通常我們在網頁中只要插入以下代碼,小蟲標註出來,其餘的可不用。)

1.在<head></head>間插入下面代碼:這是樣式和JS腳本。
<!--引用百度地圖API-->
<style type="text/css">
   html,body{margin:0;padding:0;}
   .iw_poi_title {color:#CC5522;font-size:14px;font-weight:bold;overflow:hidden;padding-right:13px;white-space:nowrap}
   .iw_poi_content {font:12px arial,sans-serif;overflow:visible;padding-top:4px;white-space:-moz-pre-wrap;word-wrap:break-word}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?key=&v=1.1&services=true"></script>

2.在<body></body>間需要顯示地圖的位置放入以下代碼:(該代碼調用地圖)

<!--百度地圖容器-->
 <div style="width:697px;height:550px;border:#ccc solid 1px;" id="dituContent"></div>

3.以下代碼放在頁面最底端(其實可放在頁面任意位置。)
<script type="text/javascript">
   //創建和初始化地圖函數:
   function initMap(){
       createMap();//創建地圖
       setMapEvent();//設置地圖事件
       addMapControl();//向地圖添加控制項
       addMarker();//向地圖中添加marker
   }
   
   //創建地圖函數:
   function createMap(){
       var map = new BMap.Map("dituContent");//在百度地圖容器中創建一個地圖
       var point = new BMap.Point(115.949652,28.693851);//定義一個中心點坐標
       map.centerAndZoom(point,18);//設定地圖的中心點和坐標並將地圖顯示在地圖容器中
       window.map = map;//將map變量存儲在全局
   }
   
   //地圖事件設置函數:
   function setMapEvent(){
       map.enableDragging();//啟用地圖拖拽事件,默認啟用(可不寫)
       map.enableScrollWheelZoom();//啟用地圖滾輪放大縮小
       map.enableDoubleClickZoom();//啟用滑鼠雙擊放大,默認啟用(可不寫)
       map.enableKeyboard();//啟用鍵盤上下左右鍵移動地圖
   }
   
   //地圖控制項添加函數:
   function addMapControl(){
       //向地圖中添加縮放控制項
var ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});
map.addControl(ctrl_nav);
       //向地圖中添加縮略圖控制項
var ctrl_ove = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:1});
map.addControl(ctrl_ove);
       //向地圖中添加比例尺控制項
var ctrl_sca = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
map.addControl(ctrl_sca);
   }
   
   //標註點數組
   var markerArr = [{title:"百恆網絡",content:"電話:0791-88117053<br/>手機:15079002975",point:"115.950312|28.693447",isOpen:1,icon:{w:23,h:25,l:46,t:21,x:9,lb:12}}
  ];
   //創建marker
   function addMarker(){
       for(var i=0;i<markerArr.length;i++){
           var json = markerArr[i];
           var p0 = json.point.split("|")[0];
           var p1 = json.point.split("|")[1];
           var point = new BMap.Point(p0,p1);
  var iconImg = createIcon(json.icon);
           var marker = new BMap.Marker(point,{icon:iconImg});
  var iw = createInfoWindow(i);
  var label = new BMap.Label(json.title,{"offset":new BMap.Size(json.icon.lb-json.icon.x+10,-20)});
  marker.setLabel(label);
           map.addOverlay(marker);
           label.setStyle({
                       borderColor:"#808080",
                       color:"#333",
                       cursor:"pointer"
           });
 
  (function(){
   var index = i;
   var _iw = createInfoWindow(i);
   var _marker = marker;
   _marker.addEventListener("click",function(){
       this.openInfoWindow(_iw);
      });
      _iw.addEventListener("open",function(){
       _marker.getLabel().hide();
      })
      _iw.addEventListener("close",function(){
       _marker.getLabel().show();
      })
   label.addEventListener("click",function(){
       _marker.openInfoWindow(_iw);
      })
   if(!!json.isOpen){
    label.hide();
    _marker.openInfoWindow(_iw);
   }
  })()
       }
   }
   //創建InfoWindow
   function createInfoWindow(i){
       var json = markerArr[i];
       var iw = new BMap.InfoWindow("<b class='iw_poi_title' title='" + json.title + "'>" + json.title + "</b><div class='iw_poi_content'>"+json.content+"</div>");
       return iw;
   }
   //創建一個Icon
   function createIcon(json){
       var icon = new BMap.Icon("http://map.baidu.com/image/us_cursor.gif", new BMap.Size(json.w,json.h),{imageOffset: new BMap.Size(-json.l,-json.t),infoWindowOffset:new BMap.Size(json.lb+5,1),offset:new BMap.Size(json.x,json.h)})
       return icon;
   }
   
   initMap();//創建和初始化地圖
</script>

當然,如果你想偷懶,將以上對應代碼全放在<body></body>間也是沒問題的,呵呵。

相關文章

  1. 在網頁中插入百度地圖

    使用百度提供的"百度地圖生成器"快速生成百度地圖,並把生成的地圖插入到自己的網頁中. 方法/步驟 打開"百度地圖生成器"的網址:http://api.map.b ...
  2. 網頁中插入百度地圖

    現在百度地圖的功能越來越牛了,很小的地方也能幫你快速找到,對我們的生活越來越方便了,所以很多企業及個人都想在自己的網站中加入百度地圖代碼,但是一時間不知道如何在網站中加入百度地圖.具體的操作方法: 工 ...
  3. 在網頁中嵌入百度地圖

    在自己的網頁中添加百度地圖,方便自己的頁面使用 工具/原料 一台電腦 方法/步驟 定位中心點,就是你想要作為中心的位置.點擊切換城市,輸入就行 再選具體位置 設置地圖寬高等參數 添加標記等 獲取代碼 ...
  4. 如何在網頁中添加百度地圖名片

    本例介紹如何在網頁中添加百度地圖,效果如圖所示,網頁是自己開發的一個網站聯繫界面,為遵守百度規則網站標識已抹去 工具/原料 電腦 網際網路 方法/步驟 在百度首頁可找到[更多]或[更多產品]一項,點擊打 ...
  5. 怎麼在網頁中嵌入百度地圖?

    做過站長的朋友想必都見過在網頁中有個div顯示的是一個區域地圖,這個是怎麼做到的呢?下面就讓小編為大家介紹下製作方法! 方法/步驟 首先打開百度地圖API 網站:api.map.baidu.com , ...
  6. 怎麼在自己的網頁中插入百度搜尋風雲榜

    百度搜尋風雲榜一定程度上反映了當前網際網路上的熱點話題.在設計網頁的時候可能需要在頁面中插入百度搜尋風雲榜,以便讓用戶了解實時熱點,或者引導用戶進行檢索.那麼怎麼快速插入百度風雲榜呢?而且要使榜單實時更 ...
  7. 如何在網頁中嵌入百度地圖

    小夥伴們,你們好啊! 很多時候一些網站中需要加入百度地圖,要告訴瀏覽者地址的!!! 通常會在聯繫我們中加入位置的百度地圖,其實關於如何在網頁中加入百度地圖,其實並沒有想像中那麼複雜,因為,這是一個開源 ...
  8. 怎麼在網站中插入百度地圖

    現在越來越多的網站需要插入地圖,但是也會有很多的不兼容,今天教大家在網站中插入百度地圖. 方法/步驟 首先在百度中搜尋百度地圖創建器,百度檢索後出現兩個連結,第一個是只缺錢版本的創建器,下邊這個是新版 ...
  9. 網頁中插入地圖

    網頁插入地圖,網頁加入地圖,網頁如何加入地圖,網頁百度地圖 工具/原料 百度地圖API 方法/步驟 Web2.0 則更注重用戶的交互作用,用戶既是網站內容的瀏覽者,也是網站內容的製造者.越來越多的用戶 ...
  10. 在網頁中插入地圖信息

    當前很多網站都需要把地址顯示出來,我們可以利用百度地圖開放平台來實現地圖的插入. 工具/原料 電腦 網絡 方法/步驟 打開網址:http://api.map.baidu.com/lbsapi/crea ...
  11. 怎樣在網頁中插入透明flash背景

    在網頁製作過程中,我們常常需要實現一種效果,就是將flash效果(通常是粒子效果) 疊加到圖片之上,從而表現出更加逼真.形象的效果來.同時用好透明flash背景也是網頁設計人員必備的基本技能.下面小編 ...
  12. 【網頁製作】怎樣在網頁中插入音樂

    在網頁製作中插入音樂是最常見的製作.下面小編與大家分享一下在網頁製作過程中幾種常見插入音樂文件的方法. 工具/原料 Dreamweaver 方法/步驟 網頁背景音樂的插入方法: 如果我們想給網頁插入背 ...
  13. wordpress中安裝百度地圖插件

    百度地圖插件的目的就是為了讓訪問網站的用戶能夠清晰的了解網站的布局,起著一個引導作用,也對百度蜘蛛爬行抓取有利. 工具/原料 wordpress模板的一個網站 方法/步驟 首先登陸網站的後台 ,wor ...
  14. 在網頁中插入簡單驗證碼 ASP

    驗證碼在網頁製作中必不可少,發展到現在有很多種形式,例如: 1.數字.字母 2.漢字 3.數學計算 4.九宮格 這裡介紹一下在ASP中,最簡單的驗證碼的使用方法 方法/步驟 把下面的代碼另存為code ...
  15. 怎樣在網頁中插入ie低版本升級js代碼提示

    隨著網際網路的發達,如今的ie6.ie7.ie8.ie9.ie10等相對版本低的瀏覽器已經處於一種存在著安全隱患的瀏覽器,就微軟官方也表明不再對ie11以下版本瀏覽器提供補丁升級.因此,作為網站商們有必 ...
  16. Dreamwavear技巧:[3]網頁中插入FLV視頻

    網頁中經常會出現一些視頻.電影.動畫等媒體文件,那麼究竟用Dreamwavear軟體如何給網頁插入FLV視頻文件呢?現在我們就一起來看看. 工具/原料 Dreamwavear軟體 Flv視頻文件 方法 ...
  17. Dreamweaver CS5在網頁中插入時間

    大家在瀏覽網頁時經常會在網頁上看到最近一次修改網頁的時間,這說明網頁時在不斷更新的,從而吸引瀏覽者下次再來關顧.Dreamweaver CS5提供了一個方便的日期對象,改對象可以任何格式插入當前日期. ...
  18. 如何在網站中加入百度地圖名片

    最近給企業進行網站建設的過程中,很多企業都會要求在"聯繫我們"欄目中加入百度地圖.加入百度地圖的方式有三種,第一種是直接截取圖片將圖片加入到網站就可以了.第二種是在百度地圖生成器中 ...
  19. 在網頁中插入右側固定的浮動窗口 fixed

    網頁製作中經常要用到,在網頁的右側固定一個窗口,用來放一些在線客服.聯繫電話之類的信息. 方法/步驟 對於Firefox.Chrome.IE7以上版本的瀏覽器,要實現這個效果比較簡單: 只要在CSS中 ...
  20. 怎樣使用iframe,在網頁中插入頁面

    這兩天在忙著做一個小的網站,有幾個已經做好的頁面,不想在對齊進行更改,想著直接嵌入到對應的頁面中就好了,於是乎大膽嘗試使用iframe框架,沒想到第一次做竟然成功了,現在就來將經驗分享給大家哈 工具/ ...