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

 

相关文章
|
8月前
|
Linux 开发工具
百度搜索:蓝易云【Linux系统时间同步方法。】
在Linux系统中,时间同步是非常重要的,它能确保服务器和其他设备之间的时间一致性,从而避免出现时间戳错误的问题。
85 0
|
3月前
|
Ubuntu Shell 数据安全/隐私保护
百度搜索:蓝易云【Ubuntu密码忘记怎么办 Ubuntu重置root密码方法】
完成上述步骤后,Ubuntu系统的root密码应该已经被成功重置为你设置的新密码。请确保在重置密码后牢记新密码。
50 0
|
3月前
|
Linux
百度搜索:蓝易云【Linux清空日志的五种方法】
这些是在Linux中清空日志文件的五种常用方法。根据您的具体需求和环境,可以选择适合您的方法进行日志清空操作。请注意,清空日志文件可能会导致丢失日志数据,因此在清空之前请确保已备份重要的日志信息。
32 0
|
3月前
|
Linux
百度搜索:蓝易云【Linux系统中查看硬盘信息的方法有哪些?】
这些是在Linux系统中查看硬盘信息的常见方法。根据您的需求和具体环境,您可以选择适合您的方法来查看硬盘信息。
78 0
|
3月前
|
缓存 Linux
百度搜索:蓝易云【Linux系统中查看CPU信息的方法有哪些?】
这些是在Linux系统中查看CPU信息的常见方法。根据您的需求和具体环境,您可以选择适合您的方法来查看CPU信息。
58 0
|
3月前
|
缓存 Linux
百度搜索:蓝易云【Linux系统中查看内存信息的方法有哪些?】
这些是在Linux系统中查看内存信息的常见方法。根据您的需求和具体环境,您可以选择适合您的方法来查看内存信息。
78 0
|
4月前
|
Java
Java【付诸实践 04】Jar包class文件反编译、修改、重新编译打包方法(含反编译工具jd-gui-windows-1.6.6.zip百度云资源)
Java【付诸实践 04】Jar包class文件反编译、修改、重新编译打包方法(含反编译工具jd-gui-windows-1.6.6.zip百度云资源)
130 0
|
4月前
|
Java Python
百度搜索:蓝易云【Java执行Python代码的两种方法(Jython与ProcessBuilder)】
通过使用Jython或ProcessBuilder,您可以在Java中执行Python代码并与两种编程语言进行交互。选择哪种方法取决于您的需求和偏好。请根据实际情况选择适合您的项目的方法。
40 0
|
4月前
|
Linux
百度搜索:蓝易云【Linux系统下获取系统、BIOS、进程、网络等相关信息的方法和工具。】
综上所述,通过使用命令行工具和图形化工具,可以在Linux系统下获取系统、BIOS、进程和网络等相关信息。根据具体的需求和使用场景,选择合适的工具和命令可以帮助你更好地了解和管理Linux系统。
65 2
|
5月前
|
前端开发 Java Spring
百度搜索:蓝易云【SpringBoot解决跨域的方法详细教程。】
通过以上步骤,你可以在Spring Boot中配置跨域支持。根据实际需求,可以灵活调整跨域规则来满足项目的具体需求。
31 0