https://blog.csdn.net/u010251278/article/details/52877370

以下内容转自上述网站，为了以后的学习方便，为此才特地将该网站内容转到自己的博客，多谢博主，见谅！

step1：获取密钥

为了统一平台服务的配额管理，JavaScript API在新版本引入ak机制。JavaScript API v1.4及以前版本无须申请密钥（ak），自v1.5版本开始需要先申请密钥（ak），才可使用。申请密钥的链接：点击打开链接

打开链接后点击创建应用，填入相关的信息，填完后是这个样子

点击提交后就知道自己的密钥啦

step2:用百度提供的地图生成器工具，链接：点击打开链接

step3:生成一个地图，并进行相关的配置

1.定位中心点，输入城市（重庆），地点（解放碑）

2.设置地图，设置地图的一些配置，参数

3.添加标注，在右边会有根据你的配置生成的地图，选择一种标记，在地图上找到你想要标注的位置，添加标注信息就好

step4:点击获取代码，会跳出来一个框里显示你创建的地图的HTML代码，copy最核心的代码到你的页面中，然后把第一个script标签下的你的密钥换成step1中获得的密钥就可以啦。下面的这几句是最核心的

 <!DOCTYPE html>
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <meta name="keywords" content="百度地图,百度地图API，百度地图自定义工具，百度地图所见即所得工具" />
     <meta name="description" content="百度地图API自定义地图，帮助用户在可视化操作下生成百度地图" />
     <title>百度地图API自定义地图</title>
     <!--引用百度地图API-->
     <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密匙"></script>
   </head>

   <body>
     <!--百度地图容器-->
     <div style="width:700px;height:550px;border:#ccc solid 1px;font-size:12px" id="map"></div>
     <p style="color:red;font-weight:600">地图生成工具基于百度地图JS api v2.0版本开发，使用请申请密匙。
       <a href="http://developer.baidu.com/map/index.php?title=jspopular/guide/introduction" style="color:#2f83c7" target="_blank">了解如何申请密匙</a>
       <a href="http://lbsyun.baidu.com/apiconsole/key?application=key" style="color:#2f83c7" target="_blank">申请密匙</a>
     </p>
   </body>
   <script type="text/javascript">
     //创建和初始化地图函数：
     function initMap(){
       createMap();//创建地图
       setMapEvent();//设置地图事件
       addMapControl();//向地图添加控件
       addMapOverlay();//向地图添加覆盖物
     }
     function createMap(){
       map = new BMap.Map("map");
       map.centerAndZoom(new BMap.Point(116.820034,36.568717),15);
     }
     function setMapEvent(){
       map.enableScrollWheelZoom();
       map.enableKeyboard();
       map.enableDragging();
       map.enableDoubleClickZoom()
     }
     function addClickHandler(target,window){
       target.addEventListener("click",function(){
         target.openInfoWindow(window);
       });
     }
     function addMapOverlay(){
       var markers = [
         {content:"我的备注",title:"齐鲁工业大学（校医院）",imageOffset: {width:-46,height:-21},position:{lat:36.566282,lng:116.818237}}
       ];
       for(var index = 0; index < markers.length; index++ ){
         var point = new BMap.Point(markers[index].position.lng,markers[index].position.lat);
         var marker = new BMap.Marker(point,{icon:new BMap.Icon("http://api.map.baidu.com/lbsapi/createmap/images/icon.png",new BMap.Size(20,25),{
           imageOffset: new BMap.Size(markers[index].imageOffset.width,markers[index].imageOffset.height)
         })});
         var label = new BMap.Label(markers[index].title,{offset: new BMap.Size(25,5)});
         var opts = {
           width: 200,
           title: markers[index].title,
           enableMessage: false
         };
         var infoWindow = new BMap.InfoWindow(markers[index].content,opts);
         marker.setLabel(label);
         addClickHandler(marker,infoWindow);
         map.addOverlay(marker);
       };
     }
     //向地图添加控件
     function addMapControl(){
       var scaleControl = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
       scaleControl.setUnit(BMAP_UNIT_IMPERIAL);
       map.addControl(scaleControl);
       var navControl = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});
       map.addControl(navControl);
       var overviewControl = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:true});
       map.addControl(overviewControl);
     }
     var map;
       initMap();
   </script>
 </html>

怎样在自己的网页中调用百度API的更多相关文章

  1. 如何在网页中调用百度地图api

    我想在木有提供地图接口的年代,前端工程师门要么只写上企业的具体地址,要么就是用一张标有自己位置的地图图片.但是现在不一样啦!为了增强用户体验,谷歌,甚至百度都很开放了,你可以在他们的网站上找到地图接口 ...

  2. 网页中嵌入百度地图报错：The request has been blocked,the content must served over Https

    网页中嵌入百度地图 1.进入百度地图开发平台:http://lbsyun.baidu.com/index.php?title=jspopular 2.获取密钥:http://lbsyun.baidu. ...

  3. js网页中调用本地应用程序

    <!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="Con ...

  4. 【iOS】网页中调用JS与JS注入

    非常多应用为了节约成本,做出同一时候在Android与iOS上都能使用的界面,这时就要使用WebView来做.Android和IOS上都有WebView,做起来非常省事.当然这时就要考虑怎样在Andr ...

  5. pc网页中嵌入百度地图

    pc网页中嵌入百度地图 1 打开百度地图生成器: http://api.map.baidu.com/lbsapi/creatmap/ 2 设置好了之后,点击获取代码,将代码粘贴到文件中保存为html文 ...

  6. 调用百度API进行文本纠错

    毕设做的是文本纠错方面,然后今天进组见研究生导师 .老师对我做的东西蛮感兴趣.然后介绍自己现在做的一些项目,其中有个模块需要有用到文本纠错功能. 要求1:有多人同时在线编辑文档,然后文档功能有类似Wo ...

  7. ASP.NET MVC4中调用WEB API的四个方法

    http://tech.it168.com/a2012/0606/1357/000001357231_all.shtml [IT168技术]当今的软件开发中,设计软件的服务并将其通过网络对外发布,让各 ...

  8. C#中调用Windows API的要点 .

    介绍 API(Application Programming Interface),我想大家不会陌生,它是我们Windows编程的常客,虽然基于.Net平台的C#有了强大的类库,但是,我们还是不能否认 ...

  9. C#中调用Windows API时的数据类型对应关系

    原文 C#中调用Windows API时的数据类型对应关系 BOOL=System.Int32 BOOLEAN=System.Int32 BYTE=System.UInt16 CHAR=System. ...

随机推荐

  1. Attention is all you need及其在TTS中的应用Close to Human Quality TTS with Transformer和BERT

    论文地址:Attention is you need 序列编码 深度学习做NLP的方法,基本都是先将句子分词,然后每个词转化为对应的的词向量序列,每个句子都对应的是一个矩阵\(X=(x_1,x_2,. ...

  2. QT5的post Event解析

    大家都知道,QT的事件机制,查了好多网上的帖子,分析的不够到位,今天给大家分享下,我的分析,请高手指正:都知道post Event通过    QScopedPointer<QEvent> ...

  3. MSYS2 环境搭建，并整合Qt

    本机环境:Windows XP 32位MSYS2地址:http://sourceforge.net/projects/msys2/ 下载32位版本,地址:http://sourceforge.net/ ...

  4. 为什么使用剪切板时都用GlobalAlloc分配内存（历史遗留问题，其实没关系了）

    我在使用剪切板时,发现通用的都是使用GlobalAlloc来分配内存,我就想不是说在Win32中GlobalAlloc和LocalAlloc是一样的那为什么不用LocalAlloc呢,原谅我的好奇心吧 ...

  5. Dependency Injection 筆記 (2)

    续上集,接着要说明如何运用 DI 来让刚才的范例程序具备执行时期切换实现类型的能力. (本文摘自電子書<.NET 依賴注入>) 入门范例—DI 版本 为了让 AuthenticationS ...

  6. python的内存分配

    一.前言 大多数编译型语言,变量在使用前必须先声明,其中C语言更加苛刻:变量声明必须位于代码块最开始,且在任何其他语句之前.其他语言,想C++和java,允许“随时随地”声明变量,比如,变量声明可以在 ...

  7. 电商、P2P等大型互联网系统包含哪些业务模块？

    01 前言 在互联网飞速发展的时代,各大互联网公司正在进行激烈的竞争,业务模式也在不断的扩张,这种现状使得目前各大公司的架构系统面临着极大的挑战,而对于我们普通的软件开发者而言,如果你仅仅了解过一些关 ...

  8. Django之forms组件使用

    注册功能 1.渲染前端标签获取用户输入 >>> 渲染标签 2.获取用户输入传递到后端校验 >>> 校验数据 3.校验未通过展示错误信息 >>> 展 ...

  9. C语言之父Dennis Ritchie告诉你：如何成为世界上最好的程序员?

    文/Ohans Emmanuel 译/网易云信 想要阅读更多技术干货文章,欢迎关注网易云信博客. 了解网易云信,来自网易核心架构的通信与视频云服务. 我不知道如何成为世界上最好的程序员.但是,我们可以 ...

  10. 安装win7和linux [ubuntu14]双系统

    想体验一把ubuntu18.10最新桌面版的快感,但是windows上面的数据又删除不得,所以百度了一下,win7和linux双系统的安装教程. 一.首先在win7上创建新的分区 https://ji ...