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. 给 Web 开发人员推荐的通用独立 UI 组件（二）

    现代 Web 开发在将体验和功能做到极致的同时,对于美观的追求也越来越高.在推荐完图形库之后,再来推荐一些精品的独立 UI 组件.这些组件可组合在一起,形成美观而交互强大的 Web UI . 给 We ...

  2. 浅议Delphi中的Windows API调用（举的两个例子分别是String和API，都不错，挺具有代表性）

    浅议Delphi中的Windows API调用http://tech.163.com/school • 2005-08-15 10:57:41 • 来源: 天极网为了能在Windows下快速开发应用程 ...

  3. 文件夹管理工具(MVC+zTree+layer)

    文件夹管理工具(MVC+zTree+layer)(附源码)   写在前 之前写了一篇关于 文件夹与文件的操作的文章  操作文件方法简单总结(File,Directory,StreamReader,St ...

  4. Java分割中英文，并且中文不能分割一半？

    最近准备入其他坑位.在面试过程中,遇到下面这题笔试题,拿出来分享分享. 题目:编写一个截取字符串的函数,输入为一个字符串和字节数,输出为按字节截取的字符串.但是要保证汉字不被截半个,如“我ABC”4, ...

  5. ECMAScript6 语法

    声明变量 var let const var(声明局部变量,有局部外可用缺陷) 代码 <!DOCTYPE html> <html lang="en"> &l ...

  6. Metasploit学习笔记

    原创博客,转载请注出处! 各位看官可参看——Metasploit实验操作 1.打开msf        msfconsole2.帮助选项:    msfconsole -h        显示在msf ...

  7. scikit-learn杂记

    1.数据预处理 二值化 import numpy as np from sklearn import preprocessing X = np.array([[1., -1., 2.], [2., 0 ...

  8. [Vue 牛刀小试]：第十四章 - 编程式导航与实现组件与 Vue Router 之间的解耦

    一.前言 在上一章的学习中,通过举例说明,我们了解了 Vue Router 中命名路由.命名视图的使用方法,以及如何通过 query 查询参数传参,或者是采用 param 传参的方式实现路由间的参数传 ...

  9. Enum的简单扩展

    1 添加一个描述的Attribute public enum MessageResult { [System.ComponentModel.Description("未通过")] ...

  10. 学习kafka自己发生的几个小错误记录

    一.  The method iterator() is ambiguous ConsumerIterator<byte[],byte[]> it =stream.iterator(); ...