1、首先，我們創(chuàng)建一個html文件，在head標(biāo)簽中依次引入echartsjs和chinajs文件，在body標(biāo)簽中創(chuàng)建一個div容器，用于放置繪制的地圖，代碼如下接著，我們需要js隨機(jī)生成一些測試數(shù)據(jù)，用于在繪制地圖時，根據(jù)數(shù)值顯示不同顏色的地區(qū)，代碼如下，這里放在body標(biāo)簽里就行然后，就是繪制地圖，配置相關(guān)數(shù)據(jù)和屬。

2、1注冊百度地圖開發(fā)者，這個直接到官網(wǎng)注冊就行，或者使用百度賬號直接登錄也行，登錄成功后，依次點(diǎn)擊“控制臺”“創(chuàng)建應(yīng)用”，在跳轉(zhuǎn)的頁面選擇“瀏覽器端”，輸入應(yīng)用名稱，設(shè)置白名單，如下創(chuàng)建成功后，當(dāng)前的應(yīng)用就會顯示在應(yīng)用列表中，這里我們需要記住應(yīng)用的AK值，后面的html代碼中需要用到，如。

3、v=20ak=您的密鑰quotltscriptlttitle個性化地圖lttitleltheadltbodyltdiv id=quotallmapquotltdivltbodylthtmlltscript type=quottextjavascriptquotvar map = new BMapMap#39allmap#39mapcenterAndZoomnew BMapPoint116，39， 12var mapStyle = features quot。

4、你需要做的就是創(chuàng)建一個新的地圖模板，模板添加自定義頁面模板這是里面的代碼！DOCTYPEhtmlPUBLICW3CDTDXHTML10TransitionalDTDxhtml1transitionaldtd內(nèi)容類型charset=utf8 selfinfo showclasstempselfinfo#39，13，0，0showclasstemp是被。

5、5設(shè)置以后查看效果6另外兩個也是標(biāo)注工具，使用方法和這個是一樣的7獲取代碼，以上都設(shè)置好了以后，就可以獲取地圖代碼了 8復(fù)制地圖代碼插入到網(wǎng)站的頁面源文件中，如果你是在網(wǎng)站后臺編輯中想要插入地圖，就點(diǎn)擊后臺的源代碼按鈕，直接將地圖代碼復(fù)制進(jìn)去就可以。

6、3最后就是編寫代碼，在html頁面中引入3D地圖了，如下，代碼很簡單，主要是創(chuàng)建div容器，然后通過JS引入地圖到這個容器中，這里需要JSAPI版本在140以上，指定地圖模式為3D，key值替換成自己應(yīng)用的key值用瀏覽器打開這個html頁面，效果如下，已經(jīng)成功引入3D地圖至此，我們就完成了在html頁面中引入。

7、2應(yīng)用創(chuàng)建成功后，我們就可以在網(wǎng)頁中引入地圖了，代碼其實(shí)很簡單，主要是創(chuàng)建一個div容器，然后通過JS導(dǎo)入地圖，完整代碼如下接著我們用瀏覽器打開這個html頁面，就能正常顯示地圖了，如下3這里也可以引入地鐵圖，代碼和上面的地圖類似，也是需要創(chuàng)建一個div容器，然后再通過JS導(dǎo)入地鐵圖到div容器中。

8、如下圖把上一步生成的代碼保存為html文件我這里保存為maphtml，在瀏覽器中打開就可以看到自己定義的百度地圖了如果要把地圖添加到現(xiàn)有的網(wǎng)頁中，可以使用iframe標(biāo)簽，如ltiframe src=quotmaphtmlquot width=quot600quot height=quot300quot frameborder=quot0quot scrolling=quotnoquotltiframe。

9、HTML5提供了地理位置定位功能Geolocation API，能確定用戶位置，我們可以借助HTML5的該特性開發(fā)基于地理位置信息的應(yīng)用本文結(jié)合實(shí)例給大家分享如何使用HTML5，借助百度谷歌地圖接口來獲取用戶準(zhǔn)確的地理位置信息定位功能Geolocation是HTML5的新特性，因此只有在支持HTML5的現(xiàn)代瀏覽器上運(yùn)行，特別是。

10、我以顯示浙江省的地圖為例，寫段代碼 首先我們需要兩個文件1 2zhejiangjs lt！doctype htmllthtmllthead ltmeta charset=quotutf8quot lttitleecharts圖形插件使用lttitleltheadltbodyltdiv id=quotmainquot style=quotheight800pxquotltdivltscript type=quottextJavaScript。

11、第一步在瀏覽器中打開百度地圖生成器 第二步圖中右側(cè)為自定義，根據(jù)自己的需求填寫相關(guān)信息 第三步點(diǎn)擊獲取代碼按鈕，會自動生成代碼，將代碼寫入頁面中即可，也可以使用iframe標(biāo)簽完成引用。

12、lthtml xmlns=quot lthead lttitle百度地圖API顯示多個標(biāo)注點(diǎn)帶提示的代碼lttitle lt！css ltlink href=quotstyledemocssquot rel=quotstylesheetquot type=quottextcssquot lt！javascript ltscript src=quotscriptsjquery191jsquot type=quottextjavascriptquotltscr。

13、二簡單樣式處理一下 body， html，#map width 100%height 100%overflow hiddenmargin0 三html代碼布局 下面的代碼是用來顯示地圖的 ltdiv id=quotmapquotltdiv 四js代碼如下 創(chuàng)建Map地圖實(shí)例 var map = new BMapMapquotallmapquot設(shè)置中心點(diǎn)坐標(biāo) var point = new BMap。

14、這里需要設(shè)定一下標(biāo)注的位置，想居中的話基本都是和地圖的坐標(biāo)一樣的這下面是創(chuàng)建一個標(biāo)注和定位var marker = new BMapMarkernew BMapPoint1163964，399093mapaddOverlaymarker。

15、切換城市輸入具體地理位置名稱，比如平?jīng)鍪衅嚃|站，點(diǎn)擊查找定位經(jīng)緯度點(diǎn)擊設(shè)置地圖具體參數(shù)，可自由設(shè)置添加標(biāo)注，鼠標(biāo)點(diǎn)擊點(diǎn)標(biāo)記圖標(biāo)，然后在地圖中找到具體位置，點(diǎn)擊鼠標(biāo)左鍵進(jìn)行標(biāo)注輸入標(biāo)記名稱，和備注，點(diǎn)擊保存預(yù)覽點(diǎn)擊獲取代碼，然后復(fù)制代碼將代碼粘貼到新建的HTML中保存即可使用。