如何获取百度地图API的密钥以及调用百度地图API
------------------------------写在前面-----------------------------
& && &越来越多的软件、网站都有调用百度地图的功能。调用百度地图之前则需要申请密钥。那么如何获取百度地图密钥呢？怎么调用百度地图api呢？下面我来给大家讲讲。
1.在百度搜索框输入“百度地图api”查找到百度地图api的网站。如下图：
2.进入到上图的百度地图api首页。如下图：
3.把网页滚动到下面可以看见“申请密钥”功能
4点击“申请密钥”按钮，进入登陆界面。没有百度帐号则注册一个。注册后继续跳到登录界面。如下图：
5成功登录则进入后台管理界面。如下图：
6.点击创建应用，则跳到创建应用界面。如下图：
7.填写好信息后。点击确认按钮则生成生成一个密钥。界面会调转到列表管理页面。访问应用(AK)这一列的值就是你的密钥。如下图：
8.接下来就可以在网页上调用了。如下图：
9.接下来是不是想写个简单的调用地图功能呢？调用地图api的demo，百度地图给我们提供很多demo。自己可以去百度下哦。赶紧试试吧。
------------------------------------------------------------------------------
下面就是我写的一个demo哦！html 代码效果预览&!DOCTYPE html&
&html lang=&en&&
&meta charset=&UTF-8&&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8& /&
&meta name=&viewport& content=&initial-scale=1.0, user-scalable=no& /&
&title&Map&/title&
body, html,#allmap {width: 100%;height: 800;overflow:margin:0;}
#golist {display:}
@media (max-device-width: 780px){#golist{display: block !}}
.container{width:1080margin:0}
.title{width:100%;text-align:}
h1{color:#2280E8;}
&script type=&text/javascript& src=&http://api./api?v=2.0&ak=7OV3ewXplRwrOHTzXIm9gxqG1jGjzMzl&&&/script&
&div class=&container&&
&div class=&title&&
&h1&看，下面就是我家&/h1&
&div class=&content&&
&div id=&allmap&&&/div&
&script type=&text/javascript&&
// 百度地图API功能
var map = new BMap.Map(&allmap&);
// 创建Map实例
var point = new BMap.Point(116.431, 40.049); // 创建点坐标
map.centerAndZoom(point,15);
// 初始化地图,设置中心点坐标和地图级别。
var marker = new BMap.Marker(point);
// 创建标注
map.addOverlay(marker);
// 将标注添加到地图中
marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
map.enableScrollWheelZoom(true);
//开启鼠标滚轮缩放
有什么不对吗？ //：下面就是我家
下面就是我家
这个跳动的icon或者自己自定义的icon怎么插入啊
25 总笔记数
6.3万 总阅读量
Copyright &
All Rights Reserved.
合作伙伴：温馨提示！由于新浪微博认证机制调整，您的新浪微博帐号绑定已过期，请重新绑定！&&|&&
与风为同谋,吹落所有的绿叶,你的手化为了冬天最后一片绿叶,我的衣袖在这个冬季只为你一人敞开.
LOFTER精选
网易考拉推荐
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
& &步骤五：获取代码&&&&&上面都设置好之后，我们点击下面的“获取代码”按钮即可获得地图的调用代码。全部复制下来，然后在桌面上新建一个文本文档，将代码复制进去后保存。重命名文本为：“baidumap.html”& &步骤六：将baidumap.html这个文件上传到自己空间的根目录下。&&&&&在我们需要调用地图的地方，插入以下代码：&&&&&&iframe&src="/baidumap.html"&frameBorder=0&height=600&width=500&scrolling=no&&/iframe&&&&&&height=600指的是地图的高度；width=500指的是地图的宽度，这个根据实际地图大小来修改，不写也可以的。&
阅读(6151)|
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
历史上的今天
在LOFTER的更多文章
loftPermalink:'',
id:'fks_',
blogTitle:'百度地图如何引用到自己网站，并在地图上显示企业的相关信息',
blogAbstract:'步骤一：打开下面这个地址：http://api./lbsapi/creatmap/index.html&&&&&步骤二：定位中心点&',
blogTag:'',
blogUrl:'blog/static/',
isPublished:1,
istop:false,
modifyTime:9,
publishTime:1,
permalink:'blog/static/',
commentCount:1,
mainCommentCount:1,
recommendCount:3,
bsrk:-100,
publisherId:0,
recomBlogHome:false,
currentRecomBlog:false,
attachmentsFileIds:[],
groupInfo:{},
friendstatus:'none',
followstatus:'unFollow',
pubSucc:'',
visitorProvince:'',
visitorCity:'',
visitorNewUser:false,
postAddInfo:{},
mset:'000',
remindgoodnightblog:false,
isBlackVisitor:false,
isShowYodaoAd:false,
hostIntro:'与风为同谋,吹落所有的绿叶,你的手化为了冬天最后一片绿叶,我的衣袖在这个冬季只为你一人敞开.',
hmcon:'1',
selfRecomBlogCount:'0',
lofter_single:''
{list a as x}
{if x.moveFrom=='wap'}
{elseif x.moveFrom=='iphone'}
{elseif x.moveFrom=='android'}
{elseif x.moveFrom=='mobile'}
${a.selfIntro|escape}{if great260}${suplement}{/if}
{list a as x}
推荐过这篇日志的人：
{list a as x}
{if !!b&&b.length>0}
他们还推荐了：
{list b as y}
转载记录：
{list d as x}
{list a as x}
{list a as x}
{list a as x}
{list a as x}
{if x_index>4}{break}{/if}
${fn2(x.publishTime,'yyyy-MM-dd HH:mm:ss')}
{list a as x}
{if !!(blogDetail.preBlogPermalink)}
{if !!(blogDetail.nextBlogPermalink)}
{list a as x}
{if defined('newslist')&&newslist.length>0}
{list newslist as x}
{if x_index>7}{break}{/if}
{list a as x}
{var first_option =}
{list x.voteDetailList as voteToOption}
{if voteToOption==1}
{if first_option==false},{/if}&&“${b[voteToOption_index]}”&&
{if (x.role!="-1") },“我是${c[x.role]}”&&{/if}
&&&&&&&&${fn1(x.voteTime)}
{if x.userName==''}{/if}
网易公司版权所有&&
{list x.l as y}
{if defined('wl')}
{list wl as x}{/list}如何使用获取到的百度地图API代码
我的图书馆
如何使用获取到的百度地图API代码
有些百度地图API的爱好者，在询问这样一个问题，如何使用获取到的代码？
那么在这里，我简要地说明一下问题。
一个网页文件分为3个部分，分别是
&& &head&&& &/head&
&& &body&&& &/body&
方法一、分别粘贴
&&&&&&&& 你需要把样式和地图初始化js粘贴在两个head标签里面，把地图容器放在两个body标签里面，最后把余下的地图自定义js放在body结束标签和html结束标签之间。
你需要参照以下的结构，把代码放到你自己网页的相应位置。
&&&&&&&&& 红色部分
&& &/head&
&&&&&&&&& 绿色部分
&& &/body&
&&&&&&&&&& 蓝色部分
举个例子，如果你获取的代码是这样子的：
&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""&
&html xmlns=""&
&meta http-equiv="Content-Type" content="text/ charset=gb2312" /&
&meta name="keywords" content="百度地图,百度地图API，百度地图自定义工具，百度地图所见即所得工具" /&
&meta name="description" content="百度地图API自定义地图，帮助用户在可视化操作下生成百度地图" /&
&title&百度地图API自定义地图&/title&
&!--引用百度地图API--&
&style type="text/css"&
&&& html,body{margin:0;padding:0;}
&&& .iw_poi_title {color:#CC5522;font-size:14font-weight:overflow:padding-right:13white-space:nowrap}
&&& .iw_poi_content {font:12px arial,sans-overflow:padding-top:4white-space:-moz-pre-word-wrap:break-word}
&script type="text/javascript" src="&
& &!--百度地图容器--&
& &div style="width:697height:550border:#ccc solid 1" id="dituContent"&&/div&
&script type="text/javascript"&
&&& //创建和初始化地图函数：
&&& function initMap(){
&&&&&&& createMap();//创建地图
&&&&&&& setMapEvent();//设置地图事件
&&&&&&& addMapControl();//向地图添加控件
&&& //创建地图函数：
&&& function createMap(){
&&&&&&& var map = new BMap.Map("dituContent");//在百度地图容器中创建一个地图
&&&&&&& var point = new BMap.Point(116..929986);//定义一个中心点坐标
&&&&&&& map.centerAndZoom(point,12);//设定地图的中心点和坐标并将地图显示在地图容器中
&&&&&&& window.map =//将map变量存储在全局
&&& //地图事件设置函数：
&&& function setMapEvent(){
&&&&&&& map.enableDragging();//启用地图拖拽事件，默认启用(可不写)
&&&&&&& map.enableScrollWheelZoom();//启用地图滚轮放大缩小
&&&&&&& map.enableDoubleClickZoom();//启用鼠标双击放大，默认启用(可不写)
&&&&&&& map.enableKeyboard();//启用键盘上下左右键移动地图
&&& //地图控件添加函数：
&&& function addMapControl(){
&&&&&&& //向地图中添加缩放控件
var ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});
map.addControl(ctrl_nav);
&&&&&&& //向地图中添加缩略图控件
var ctrl_ove = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:1});
map.addControl(ctrl_ove);
&&&&&&& //向地图中添加比例尺控件
var ctrl_sca = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
map.addControl(ctrl_sca);
&&& initMap();//创建和初始化地图
方法二、使用iframe
&&&&& 你可以把得到的代码整个保存成网页的格式，然后再在你自己网页中增加一句&iframe width=420 height=330 frameborder=0 scrolling=auto src=URL&&/iframe&
&&&& scrolling表示是否显示页面滚动条，可选的参数为auto、yes、no，如果省略这个参数，则默认为auto.
&&&& height和width分别为高度，宽度。
&&&& frameborder是这个容器边的宽度。
&&&&& 比如，你保存了一个名为mymap.htm的网页文件，想让它宽为697，高为550。没有边框。路径为plus/mymap.htm。你就可以这样书写：&iframe width=697 height=550 frameborder=0 scrolling=auto src="plus/mymap.htm"&&/iframe&
发表评论：
TA的最新馆藏[转]&[转]&}