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

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

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

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

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

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

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

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

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

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

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

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

13、二簡(jiǎn)單樣式處理一下 body， html，#map width 100%height 100%overflow hiddenmargin0 三html代碼布局 下面的代碼是用來(lái)顯示地圖的 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)建一個(gè)標(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中保存即可使用。