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. java基础之super关键字

    一.在java里面,对于super关键字通常有两种用法: 1. 用在子类的构造方法里(初始化用),主要是调用父类的默认构造方法,如果父类有不止一个构造方法,可以通过super指定具体的构造函数,比如 ...

  2. C#每天进步一点--事件

    事件:如果类型定义了事件成员,那么类型就可以通知其他对象发生了特定的事情.例如,Button类提供了一个名为Click的事件.应用程序中的一个或者多个对象可能想接收关于这个事件的通知,以便在Butto ...

  3. CL_GUI_ALV_GRID 触发PAI事件(Application event)

    *&---------------------------------------------------------------------* *& Report Z_BARRY_A ...

  4. cloudsim 3.0.3下载与安装教程

    1.配置jdk(之前的文章都讲解过,这里就不具体说了) 2.安装eclipse或MyEclipse 3.下载cloudsim压缩包,这个的官网是需要FQ,这里贴上我的下载地址 链接:https://p ...

  5. 简单有趣的hover

    一张图片在鼠标悬浮的时候换另一张图片 平常写张图片用img我们换一种方法用背景,然后就悬浮出 我们在加个边框试试 怎么才能让边框一起换哪? 我们嵌套一下 然后打开就是 是不是一个很简单的hover

  6. Python一基本数据类型(dict)

    一. 字典的简单介绍    字典(dict)是python中唯一的一个映射类型.他是以{ }括起来的键值对组成. 在dict中key是 唯一的. 在保存的时候, 根据key来计算出一个内存地址. 然后 ...

  7. JVM检测&工具

    前几篇篇文章介绍了介绍了JVM的参数设置并给出了一些生产环境的JVM参数配置参考方案.正如之前文章中提到的JVM参数的设置需要根据应用的特性来进行设置,每个参数的设置都需要对JVM进行长时间的监测,并 ...

  8. Zookeeper详解-工作流和leader选举（三）

    一.工作流 一旦ZooKeeper集合启动,它将等待客户端连接.客户端将连接到ZooKeeper集合中的一个节点.它可以是leader或follower节点.一旦客户端被连接,节点将向特定客户端分配会 ...

  9. Git 备忘录

    整理了一下工作中常用的 Git 操作,持续更新中...   merge单个文件 例如 B分支想要合并A分支的某个文件 首先,我们切换到B分支  git checkout branch B 之后,我们c ...

  10. 使用burpsuite进行重放攻击

    原创博客,转载请注出处! 我的公众号,正在建设中,欢迎关注: 1.安装好burpsuite后打开程序,切换至proxy->intercipt,因为是重放攻击不用拦截数据包所以关闭intercep ...