在網頁中插入百度地圖

使用百度提供的「百度地圖生成器」快速生成百度地圖,並把生成的地圖插入到自己的網頁中。

方法/步驟

打開「百度地圖生成器」的網址:http://api.map.baidu.com/lbsapi/creatmap/index.html

如下圖:

在「1.定位中心點」中,切換城市,並查找具體位置,如下圖:

在「2.設置地圖」中,可以按照自己的喜好修改地圖的外觀:

1、地圖的寬和高

2、地圖上顯示的按鈕(縮放、縮略圖、比例尺)

3、滑鼠和鍵盤對地圖的操作

如下圖:

在「3.添加標註」中,可以添加自己想要標註的位置和信息,如下圖:

在「第二步 獲取代碼」中,點擊「獲取代碼」按鈕,就會彈出根據上面的設置生成代碼,如下圖:

把上一步生成的代碼保存為html文件(我這裡保存為map.html),在瀏覽器中打開就可以看到自己定義的百度地圖了。

如果要把地圖添加到現有的網頁中,可以使用iframe標籤,如:

<iframe src="map.html" width="600" height="300" frameborder="0" scrolling="no"></iframe>

.

完整的例子放在百度網盤中,需要的請發郵件到 xdhy_dn@foxmail.com

主題寫 「」。自動回復下載地址。

相關文章

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

    如何在網頁中插入百度地圖呢? 2.切換城市,搜尋需標註位置.(如下圖 方法/步驟 1.進入:http://dev.baidu.com/wiki/static/map/API/tool/creatMap ...
  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框架,沒想到第一次做竟然成功了,現在就來將經驗分享給大家哈 工具/ ...