天天看點

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

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

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

第一步:

進入百度建立地圖的網站 http://api.map.baidu.com/lbsapi/creatmap/ ,打開後如圖:

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

第二步:

看到圖中第一步的下面有1,2,3三個小步驟,打開1.定位中心點→切換裡面的城市按鈕,選擇你要展示的城市位置→在輸入框中輸入具體的位址,點選查找,就能在右邊地圖上顯示你要顯示的位置地圖

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

第三步:

打開2.設定地圖,在裡面可以設定地圖的寬高,決定哪些按鈕是要還是不要,按鈕的位置都是可以設定的

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

第四步:

打開3.添加标注→第一個圖示“點标記”,可以設定具體的位置點,以點标記的形式顯示在地圖中,可以更換點标記的樣式,也可以設定你要顯示的名稱和備注;第二個圖示“線标記”,可以畫出線條路線等;第三個圖示“文字标記”,可以寫些文字;

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

至此,一個簡單的百度地圖位置就設定完了,接下來就是把地圖插入到網頁中;

第五步:

點選“擷取代碼”,就會出現一個彈框,裡面的代碼就是我們所要的,把代碼複制到一個空的html檔案中儲存,命名為 “map.html” ;

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

第六步:

在要用地圖的網頁中,用一個 iframe 标簽;

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

它的src路徑就寫 map.html ,這樣在你的網頁中就可以顯示你自己設定的地圖了,當然地圖的寬高、在網頁中顯示的位置要自己寫css。

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

ps:

這裡我比較愛偷懶用了 iframe 标簽,【 iframe 标簽稱之為“浏覽器中的浏覽器”】,但是 iframe 标簽有缺點,是以可以選擇地使用,另外這裡可以不用 iframe 标簽,隻要把 map.html 中的代碼選擇的拷貝過來也是可以實作功能的。end………

繼續閱讀