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

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

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

一、获取源代码

 网址: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(){...})里面。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏哲学驱动设计

WPF Commanding Overview 的笔记

整个命令系统的流程如下: CommandManager 负责监听一些它关注的属性的更改(例如:Focus、Click),当界面上有此类事件发生时,它会通知所有...

20180
来自专栏守望轩

Visual Studio 2008 每日提示(十七)

#161、在解决方案里显示(或不显示)编辑器中打开的文件 原文链接:How to have the Solution Explorer always show...

36280
来自专栏Golang语言社区

Go语言如何并发超时处理详解

大家都知道golang并没有在语言层次上提供超时操作,但可以通过一些小技巧实现超时。下面来一起看看吧,有需要的朋友们可以参考借鉴。 实现原理: 并发一个函数,等...

38360
来自专栏Python疯子

iOS 之多个 button 的单选与多选

下面是实现的代码: 首先创建10个button(一个一个写太麻烦了,个人认为还是用一个 for 循环来创建比较好)

12810
来自专栏前端开发

一个简单的零配置命令行HTTP服务器 - http-server (nodeJs)

24250
来自专栏smy

jquery及原生javascript对jsonp解决跨域问题实例详解

jquery方式 ---- 前端: $.ajax({ url: 'http://m.xxx.tv/goLottery', ...

43570
来自专栏十月梦想

小程序目录结构

        第一篇微信小程序的博文,不知从何开始说;name就从最基础的目录结构来说吧,初次接触这个东西自己也是折腾挺久的,这里系统的对比一下web开发的文...

18610
来自专栏逸鹏说道

前端:图文混排-怎么在不使用float的情况下实现想要的效果呢?

异常处理汇总-前端系列 http://www.cnblogs.com/dunitian/p/4523015.html 举个例子 ? 重点:display:fle...

339110
来自专栏happyJared

Hexo整合GitHub Pages

  Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。

25020
来自专栏程序生活

搭建个人博客-hexo+github详细完整步骤一、第一步:下载安装Git二、第二步:下载安装node.js三、第三步:安装hexo四、第四步:初始化Hexo五、部署到Github上六、最后加上一些文

自己也算是摸爬滚打搭建成功,然后自己再重新安装部署一遍,把完整步骤分享给大家,同时最后有一些连接,如果我的步骤不行,大家可以参考其他人的(这个有点花费时间,大家...

32150

扫码关注云+社区

领取腾讯云代金券