1.打开百度地图官方api网页

　　http://lbsyun.baidu.com/

　　2.点击开发文档

　　

　　3.选择对应的api

　　

　　4.点击DEMO详情

　　

　　5.得到源码复制到你的代码中

　　

 <!DOCTYPE html>

 <html>

 <head>

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

     <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

     <style type="text/css">

     body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}

     </style>

     <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>

     <title>地图展示</title>

 </head>

 <body>

     <div id="allmap"></div>

 </body>

 </html>

 <script type="text/javascript">

     // 百度地图API功能

     var map = new BMap.Map("allmap");    // 创建Map实例

     map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);  // 初始化地图,设置中心点坐标和地图级别

     //添加地图类型控件

     map.addControl(new BMap.MapTypeControl({

         mapTypes:[

             BMAP_NORMAL_MAP,

             BMAP_HYBRID_MAP

         ]}));

     map.setCurrentCity("北京");          // 设置地图显示的城市 此项是必须设置的

     map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放

 </script>

　　6.在上列代码行中第9行有ak密钥需要自己获取

　　http://lbsyun.baidu.com/apiconsole/key

　　7.根据官方教程提示进行操作

　　http://lbsyun.baidu.com/index.php?title=jspopular/qa

　　其中Refer白名单内容可以填写自己本地ip地址也可以填写服务器ip地址或域名。

　　8.把获取到的ak密钥更新到自己的代码中去

　　

前端的百度地图的api的使用的更多相关文章

  1. 百度地图JavaScript API使用

    最近在完成优达学城前端开发(入门)课程的P4项目中,要求调用google地图进行交互,项目已提供部分js代码和html代码.但在申请google地图API密钥时由于网络等原因,打不开或者连接超时,所以 ...

  2. 如何结合自己本地数据库，使用【百度地图】API

    如何结合自己本地数据库,使用[百度地图]API百度地图使用越来越多,官网上的示例数据都是写死的,实际上我们的开发中的数据都是从数据库中取出来的,最近看了很多大神的文章,结合自己本地数据库使用百度地图A ...

  3. 百度地图JavaScript API覆盖物旋转时出现偏移

    在项目中,调用百度地图JavaScript API,做覆盖物的旋转再添加到地图上,结果出现偏移了. 调试过程中的效果图: 发现图片的旋转并不是按车子的中心来的,而是之外的一个点.最后发现犯了一个很细节 ...

  4. 百度地图代码API

    百度地图代码API: http://api.map.baidu.com/lbsapi/creatmap/index.html

  5. WPF技术触屏上的应用系列（二）: 嵌入百度地图、API调用及结合本地数据库在地图上进行自定义标点的实现

    原文:WPF技术触屏上的应用系列(二): 嵌入百度地图.API调用及结合本地数据库在地图上进行自定义标点的实现 去年某客户单位要做个大屏触屏应用,要对档案资源进行展示之用.客户端是Window7操作系 ...

  6. 百度地图JavaScript API经纬度查询-MAP

    百度地图JavaScript API经纬度查询-MAP-ABCDEFGHIJKMHNOPQRSTUVWXYZ: 搜索:<input type="text" size=&quo ...

  7. 【百度地图JavaScript API】手机端浏览器定位的实现

    [百度地图JavaScript API]手机端浏览器定位的实现 https://blog.csdn.net/xiao190128/article/details/72579476

  8. 百度地图的API接口----多地址查询和经纬度

    最近看了百度地图的API的接口,正想自己做点小东西,主要是多地址查询和经纬度坐标跟踪, 下面的代码直接另存为html就可以了,目前测试Chrome和360浏览器可以正常使用. <!DOCTYPE ...

  9. 百度地图JavaScript API自定义覆盖物、自定义信息窗口增删时的显示问题

    项目中,需求:在百度地图上实时画出车辆,并能点击车辆弹出信息框查看实时信息. 实现:通过不停的画覆盖物并删除掉.点击覆盖物时弹出信息窗口. 问题:删除掉覆盖物后信息窗也删除掉了.因为信息窗是建立在覆盖 ...

随机推荐

  1. oracle服务丢失的处理方法之OracleServiceORCL不存在示例

    oracle服务是oracle数据库的重要组成部分,下面就教您oracle服务丢失的处理方法,如果您之前遇到过oracle服务丢失的问题,不妨一看. 今天发现数据库服务器上的所有oracle服务都丢失 ...

  2. Java 快速失败( fail-fast ) 安全失败( fail-safe )

    原文:http://www.cnblogs.com/ygj0930/p/6543350.html 快速失败( fail-fast ):当你在迭代一个集合的时候,如果有另一个线程正在修改你正在访问的那个 ...

  3. codeforces 414B B. Mashmokh and ACM(dp)

    题目链接: B. Mashmokh and ACM time limit per test 1 second memory limit per test 256 megabytes input sta ...

  4. VS 一些配置设置

    /************************************************************************ * VS 一些配置设置 * 说明: * 最近要用到C ...

  5. [ZJOI 2008] 骑士

    [题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=1040 [算法] 首先 , 题目中互相讨厌的关系构成了一棵基环森林 用拓扑排序找出环 ...

  6. python利用mongodb上传图片数据 : GridFS 与 bson两种方式

    利用mongodb保存图片通常有两种方法,一种是将图片数据转化为二进制作为字典的键值对进行保存,另一种是利用mongodb提供的GridFS进行保存,两者各有利弊.性能方面的优劣未曾测试,无法进行评价 ...

  7. TCP连接、释放及HTTPS连接流程

    一.建立连接是三次握手 为什么三次握手?前两次握手为了确认服务端能正常收到客户端的请求并愿意应答,后两次握手是为了确认客户端能正常收到服务端的请求并愿意应答.三次握手可以避免意外建立错误连接而导致浪费 ...

  8. CoreGpaphics

    CoreGpaphics基本应用 CGAffineTransformMake开头的函数 是基于最初始的位置来变化的 带有CGAffineTransform参数是基于CGAffineTransform的 ...

  9. 分区时"磁盘上没有足够的空间完成此操作"的解决方法

    在新的预装windows 7的品牌机上,工作人员一般将磁盘分为C.D两个分区.但往往造成C盘有很大一部分的空间没办法分出来,而分出来的部分空间又不能和后面的磁盘合并,甚至出现无法新建简单卷的操作,即点 ...

  10. C++ STL自学总结，仅供参考

    本文内容,为博主在网上看到资料总结整合而来 一.stl格式简介 .stl文件是在计算机图形应用系统,来表示封闭的面或者体,用来表示三角形网格的一种文件格式.为STereo Lithography的缩写 ...