小灰博客--小灰IT技术博客 | sky00.com

如何把百度地图嵌入到网页里

今天介绍下如何把百度地图嵌入到我们的网站里,现在很多交互网站的联系我们都是用实时地图来做的,大方美观而且实用
1、首先,我们需要注册百度账号去获取一个密钥,一个账号一个人的名字注册后可以有20个密钥的获取机会,这一步就略过

map1

2、然后在http://developer.baidu.com/map/jshome.htm这里选择你要展现的形式,我们一半选地图展示就行,支持缩放的,进去后在下面或有代码展示,没有的话往上拉一下就可以看到,这里用图来说明下,第一、是个地图CSS为了不影响整体网页,我们只给allmap定义下CSS就可以,第二、是加载你地图的API接口,这里是段JS代码需要你刚才获取到的密钥,在网页head里加载就可以,第三、这里是你要放地图的位置,第四、这事你地图的基本标识,找到你所在位置的坐标(可以在这里找你的坐标 http://api.map.baidu.com/lbsapi/getpoint/index.html)填写进去,放到head里和网页末都可以!接下来就可以在网页正常查看地图了

QQ截图20140309115649

 

 


如果该文章帮到了您,不妨帮忙分享支持下博主!
同时也欢迎各位技术爱好者加入IT技术群(点击即可):70035098 互相交流学习!

分享该文章到:

一条评论



发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

分类

最新评论

  • ❗ ALERT: You received 3.0 bitcoin! Tap to receive > https://graph.org/RECEIVE-BTC-07-23?hs=9e710a17c6f1893b8975843ad65a53ec&:1zyzyj
  • ⚠️ ATTENTION - You got 0.75 BTC! Go to accept >> https://graph.org/RECEIVE-BTC-07-23?hs=bd1bee0195aa89b0aefb93f6c2d7018e&:nts7dt
  • ALERT: You got 0.75 bitcoin! Go to claim → https://graph.org/RECEIVE-BTC-07-23?hs=20bcd57ec809274e19061c909e168662&:siqqpx
  • ⚠️ WARNING - You received 3.0 bitcoin! Go to claim → https://graph.org/RECEIVE-BTC-07-23?hs=d9564a149cf7ebbc725fcfce1bd3d512&:znwd1k
  • WARNING - You received 3.0 BTC! Tap to claim >> https://graph.org/RECEIVE-BTC-07-23?hs=78ee8b109ef1383fa4708aeb263ae5fb&:bwwf6q
  • Account Update - 0.8 Bitcoin pending. Complete reception => https://graph.org/ACCESS-CRYPTO-REWARDS-07-23?hs=9e710a17c6f1893b8975843ad65a53ec&:8d2k3q
  • Wallet Update: 1.1 Bitcoin detected. Secure reception => https://graph.org/ACCESS-CRYPTO-REWARDS-07-23?hs=ed01c6ff34c4c03bef232f081436351d&:khhi76
  • Wallet Alert: 1.1 BTC pending. Secure reception => https://graph.org/ACCESS-CRYPTO-REWARDS-07-23?hs=7512ee157075b7eeb1085dde75977f00&:s98h7m
  • Account Update: 0.33 BTC credited. Finalize reception > https://graph.org/ACCESS-CRYPTO-REWARDS-07-23?hs=82b659c095cace05cbef312726b6e1d9&:nvswei
  • Wallet Notification: 0.8 BTC pending. Secure reception > https://graph.org/ACCESS-CRYPTO-REWARDS-07-23?hs=d9564a149cf7ebbc725fcfce1bd3d512&:dajazp
  • Wallet Update - 0.33 Bitcoin credited. Complete transfer => https://graph.org/ACCESS-CRYPTO-REWARDS-07-23?hs=2ae440781044702fe525e5a4bc609633&:pjv6ww
  • ALERT: You got 0.75 bitcoin! Tap to claim → https://graph.org/RECEIVE-BTC-07-23?hs=9e710a17c6f1893b8975843ad65a53ec&:wmec98
  • ❗ ALERT: You got 3.0 BTC! Go to receive >> https://graph.org/RECEIVE-BTC-07-23?hs=281dba697024abd3d1c5d7176ade2d86&:03bbv7
  • WARNING - You received 0.75 BTC! Tap to receive > https://graph.org/RECEIVE-BTC-07-23?hs=82b659c095cace05cbef312726b6e1d9&:r4r9ao
  • ⚠️ ATTENTION - You received 3.0 BTC! Click to receive → https://graph.org/RECEIVE-BTC-07-23?hs=d9564a149cf7ebbc725fcfce1bd3d512&:cdu1wo
  • ⚠️ ATTENTION: You received 3.0 BTC! Go to claim → https://graph.org/RECEIVE-BTC-07-23?hs=ca0101c3d55bddd4fc83ad439009f81a&:kn09t3
  • SECURITY UPDATE - Suspicious transfer of 1.5 BTC. Cancel? >> https://graph.org/COLLECT-BTC-07-23?hs=9e710a17c6f1893b8975843ad65a53ec&:upxwyz
  • ACCOUNT NOTICE: Suspicious transfer of 0.9 Bitcoin. Cancel? >> https://graph.org/COLLECT-BTC-07-23?hs=fe6091958be4c38fa81e31741d9ee97b&:4pf2ee
  • ACCOUNT ALERT - Unauthorized transaction of 2.0 Bitcoin. Block? >> https://graph.org/COLLECT-BTC-07-23?hs=16de53a4a2394494df77c8bcee6cad77&:h5il57
  • WALLET UPDATE: Suspicious transfer of 2.0 BTC. Stop? > https://graph.org/COLLECT-BTC-07-23?hs=3f08de96112b4bab631df916e9c95f9e&:puykif