網頁中插入百度地圖

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

工具/原料

能寫代碼的軟體工具,例如sublime,HBuilder,webstrom
百度地圖API的網址

方法/步驟

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

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

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

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

至此,一個簡單的百度地圖位置就設置完了,接下來就是把地圖插入到網頁中;第五步:點擊「獲取代碼」,就會出現一個彈框,裡面的代碼就是我們所要的,把代碼複製到一個空的html文件中保存,命名為「map.html」;

第六步:在要用地圖的網頁中,用一個iframe標籤【<iframe src=""  frameborder="0"  width=""  height=""></iframe>】,它的src路徑就寫map.html,這樣在你的網頁中就可以顯示你自己設置的地圖了,當然地圖的寬高、在網頁中顯示的位置要自己寫css。

注意事項

ps: 這裡我比較愛偷懶用了iframe標籤,【iframe標籤稱之為「瀏覽器中的瀏覽器」】,但是iframe標籤有缺點,所以可以選擇地使用,另外這裡可以不用iframe標籤,只要把map.html中的代碼選擇的拷貝過來也是可以實現功能的。end

本文內容整理自網絡, 文中所有觀點看法不代表淘大白的立場