开发者社区> 半指温柔乐> 正文

第150天:网页中插入百度地图方法(需要密钥)

简介: 在现在的很多页面中,都运用到了百度地图来定位,例如: 像这样的地图,我们可以通过手动来进行放大、缩小、移动等来查找具体的地址,特别方便,在页面上引用也显得页面很有特点,那么,应该怎么样来制作这种地图呢? 一、获取源代码     网址:http://api.
+关注继续查看

在现在的很多页面中,都运用到了百度地图来定位,例如:

像这样的地图,我们可以通过手动来进行放大、缩小、移动等来查找具体的地址,特别方便,在页面上引用也显得页面很有特点,那么,应该怎么样来制作这种地图呢?

一、获取源代码

    网址:http://api.map.baidu.com/lbsapi/createmap/index.html?qq-pf-to=pcqq.c2c

1.打开网址,就可以看到一个地图编辑界面:

 

2.在页面右侧设置地点等信息:

1)设置地点

 

2)设置地图上的基本信息

 

3)在地图上添加标志

点击标记图标还可以选择它的样式:

4)获取源代码

    点击页面下面的第二步中的获取源代码即可:

(注意:这里生成的代码是显示不出来的,必须获取密匙)

二、获取密匙

1.点击生成的代码中的“获取密匙”:,然后按照要求一步步填写资料并提交,一定要注意必须进行认证。

2.将生成的Ak(即密匙)复制到代码中,替换掉“您的密匙”

  

三、插入到自己的页面中

按照自己的页面要求将生成的代码插入在页面代码中,但是一定要注意加载顺序的问题:

  方法1:如果js代码是放在页面代码里面的,注意把生成地图js代码放在页面最下边。

  方法2:如果用的外部js链接,应该把地图的js代码放在 $(function(){...})里面。

 

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
第151天:网页中插入百度地图方法(不需要密钥)
今天分享一个在网页中插入百度地图的方法,不需要密钥哦,前两天,我试了好多次百度开发平台上使用百度地图的方法,都需要申请密钥,申请了,还是用不了,后来,终于发现了一个不需要密钥的方法,希望对需要的朋友有帮助! 1、打开百度地图生成器链接:http://api.
2068 0
在网页中插入百度地图(实例)
步骤 1 2 3   如何在网页中插入百度地图呢? 2.切换城市,搜索需标注位置。(如下图 方法/步骤 1.进入:http://api.map.baidu.com/lbsapi/creatmap/(创建地图-百度地图API所见即所得工具,百度官方地址,大家放心使用) 切换城市,搜索需标注位置。
1074 0
X5、WebViewJavascriptBridge、百度地图网页版 整合注意事项
一 什么是webViewjavascripBridge?           WebViewJavascriptBridge是移动UIView和Html交互通信的桥梁,用作者的话来说就是实现java(ios为oc)和js的互相调用的桥梁。
1238 0
iOS测试技巧:通过GPX文件修改经纬度信息(模拟iOS设备的位置)
iOS测试技巧:通过GPX文件修改经纬度信息(模拟iOS设备的位置)
394 0
Html5实现手机九宫格密码解锁功能
<p>HTML5真的是很强大,前端时间看到一个canvas实现九宫格的密码解锁。今天抽出时间模仿了一个,特定分享一下!</p> <p>效果截图如下:</p> <p><img src="http://img.blog.csdn.net/20151210172338673?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fon
2163 0
+关注
半指温柔乐
热衷于研究前端新知识,学习新技术。精通HTML5+CSS3,Javascript,jQuery,Angular,Bootstrap。
文章
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载