## 一，百度地图api密钥获取进入这个 [百度地图开放平台 | 百度地图API SDK | 地图开发 (baidu.com)](https://lbsyun.baidu.com/index.php?title=%E9%A6%96%E9%A1%B5) 网址后，点击右上角的登录，用自己的百度账号进行登录，登录后可以进入api控制台。（如果没有注册为开发者需要注册认证完即可），然后单击创建应用按钮。 ![屏幕截图 2023-11-01 102402_LI.jpg](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e292b82cd46c47dc820823191aece528~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1846&h=936&s=763280&e=jpg&b=cbdbe5) ![屏幕截图 2023-11-01 102527_LI.jpg](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1c7bc61c678743c4ac238c98d4db454f~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1851&h=906&s=401356&e=jpg&b=ffffff) ![屏幕截图 2023-11-01 102929.jpg](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d312c86075714f2baba450f46b7b25e5~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1853&h=943&s=167340&e=jpg&b=fffefe) 填写好应用名称，选择**应用类型为浏览器端**，选择使用ip白名单校验方式进行校验。在**ip白名单的文本框中填写0.0.0.0/0（或者\*号）**，表示不对ip做任何限制。单击提交，即可在api控制台看到自己创建的AK，就是api请求串的必填参数。有一点注意的是，未认证（个人或企业）的情况下，每个账号一天最多只有2000次调用额，如果认证了，每个账号每天有10万次调用额。 ## 二，开始使用 ### 1.显示地图在网页中开始引入js地图脚本 **请注意有点地方是使用的BMap而不是web网站的BMapGL，在用法上有略微不同，请使用者自行查询BMap相关使用功能，在此只推荐和示例使用BMapGL** 然后为地图划分一块区域显示，并为其添加基本的功能

### 2.地图经纬标注在上个示例中，camera已经是一个地址信息了，只不过是镜头的中心，现在需要为其标点

此时页面内如下所示 ![2F2R6OE7R9C214FDK653L7NGKC.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/863a7c2fd4bd46a9bf3820509f0aaf83~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=800&h=410&s=360605&e=png&b=f6eeed) ### 3. 地图文本标注在当地搜索地址信息，全部标注在地图上

效果如下图所示 ![3BS0G7CE106H1UDHT6ISFLT4FU.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/90718cf1fe564d53a3ee12fb86016ab3~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=800&h=403&s=216576&e=png&b=f6f1f1) 实现输入框搜索选择第一项的功能，添加类似于上图的提示框

效果如下图所示 ![2R9VLA529KTUJQHDEK9OV2EAH3.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ced3bb16be564e929ded4bd99b9e6bf4~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=800&h=431&s=309685&e=png&b=f7f2f1) ### 4. 点击地图返回标注信息 Geocoder包含了地址的解析和逆解析\ 地址解析是指，由详细到街道的结构化地址得到百度经纬度信息，且支持名胜古迹、标志性建筑名称直接解析返回百度经纬度。例如：“北京市海淀区中关村南大街27号”地址解析的结果是“lng:116.31985,lat:39.959836”，“百度大厦”地址解析的结果是“lng:116.30815,lat:40.056885”\ 逆地址解析是指，由百度经纬度信息得到结构化地址信息。例如：“lat:31.325152,lng:120.558957”逆地址解析的结果是“江苏省苏州市虎丘区塔园路318号”。注意：\ 1.因为Geocoding和反Geocoding使用的门址数据以及算法都不是一样的，所以会出现不能一一对应的现象。\ 2.解析过程中可能会出现一对坐标值对应多个地址门牌信息，本接口将返回距离坐标点最近的一个地址门牌信息。

### 5. 建议添加的相关组件此类组件不添加不影响使用，在地图上显示额外的控件 map.addControl(new BMapGL.NavigationControl3D()); //3D控件 map.addControl(new BMapGL.ScaleControl()); //比例尺显示控件 map.addControl(new BMapGL.MapTypeControl()); //切换地图样式控件 map.addControl(new BMapGL.ZoomControl()); //加减号缩放控件 map.addControl(new BMapGL.CityListControl()); //城市选择控件 map.enableScrollWheelZoom(true); //滚轮缩放 ## 三，链接文档百度地图API SDK\ \ 百度地图jsapi webgl 1.0类参考\ \ 百度地图jsapi 示例中心\