1、首先，我们创建一个html文件，在head标签中依次引入echartsjs和chinajs文件，在body标签中创建一个div容器，用于放置绘制的地图，代码如下接着，我们需要js随机生成一些测试数据，用于在绘制地图时，根据数值显示不同颜色的地区，代码如下，这里放在body标签里就行然后，就是绘制地图，配置相关数据和属。

2、1注册百度地图开发者，这个直接到官网注册就行，或者使用百度账号直接登录也行，登录成功后，依次点击“控制台”“创建应用”，在跳转的页面选择“浏览器端”，输入应用名称，设置白名单，如下创建成功后，当前的应用就会显示在应用列表中，这里我们需要记住应用的AK值，后面的html代码中需要用到，如。

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

4、你需要做的就是创建一个新的地图模板，模板添加自定义页面模板这是里面的代码！DOCTYPEhtmlPUBLICW3CDTDXHTML10TransitionalDTDxhtml1transitionaldtd内容类型charset=utf8 selfinfo showclasstempselfinfo#39，13，0，0showclasstemp是被。

5、5设置以后查看效果6另外两个也是标注工具，使用方法和这个是一样的7获取代码，以上都设置好了以后，就可以获取地图代码了 8复制地图代码插入到网站的页面源文件中，如果你是在网站后台编辑中想要插入地图，就点击后台的源代码按钮，直接将地图代码复制进去就可以。

6、3最后就是编写代码，在html页面中引入3D地图了，如下，代码很简单，主要是创建div容器，然后通过JS引入地图到这个容器中，这里需要JSAPI版本在140以上，指定地图模式为3D，key值替换成自己应用的key值用浏览器打开这个html页面，效果如下，已经成功引入3D地图至此，我们就完成了在html页面中引入。

7、2应用创建成功后，我们就可以在网页中引入地图了，代码其实很简单，主要是创建一个div容器，然后通过JS导入地图，完整代码如下接着我们用浏览器打开这个html页面，就能正常显示地图了，如下3这里也可以引入地铁图，代码和上面的地图类似，也是需要创建一个div容器，然后再通过JS导入地铁图到div容器中。

8、如下图把上一步生成的代码保存为html文件我这里保存为maphtml，在浏览器中打开就可以看到自己定义的百度地图了如果要把地图添加到现有的网页中，可以使用iframe标签，如ltiframe src=quotmaphtmlquot width=quot600quot height=quot300quot frameborder=quot0quot scrolling=quotnoquotltiframe。

9、HTML5提供了地理位置定位功能Geolocation API，能确定用户位置，我们可以借助HTML5的该特性开发基于地理位置信息的应用本文结合实例给大家分享如何使用HTML5，借助百度谷歌地图接口来获取用户准确的地理位置信息定位功能Geolocation是HTML5的新特性，因此只有在支持HTML5的现代浏览器上运行，特别是。

10、我以显示浙江省的地图为例，写段代码 首先我们需要两个文件1 2zhejiangjs lt！doctype htmllthtmllthead ltmeta charset=quotutf8quot lttitleecharts图形插件使用lttitleltheadltbodyltdiv id=quotmainquot style=quotheight800pxquotltdivltscript type=quottextJavaScript。

11、第一步在浏览器中打开百度地图生成器 第二步图中右侧为自定义，根据自己的需求填写相关信息 第三步点击获取代码按钮，会自动生成代码，将代码写入页面中即可，也可以使用iframe标签完成引用。

12、lthtml xmlns=quot lthead lttitle百度地图API显示多个标注点带提示的代码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代码如下 创建Map地图实例 var map = new BMapMapquotallmapquot设置中心点坐标 var point = new BMap。

14、这里需要设定一下标注的位置，想居中的话基本都是和地图的坐标一样的这下面是创建一个标注和定位var marker = new BMapMarkernew BMapPoint1163964，399093mapaddOverlaymarker。

15、切换城市输入具体地理位置名称，比如平凉市汽车东站，点击查找定位经纬度点击设置地图具体参数，可自由设置添加标注，鼠标点击点标记图标，然后在地图中找到具体位置，点击鼠标左键进行标注输入标记名称，和备注，点击保存预览点击获取代码，然后复制代码将代码粘贴到新建的HTML中保存即可使用。