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

 

相关文章
|
3月前
|
语音技术 开发工具 图形学
Unity与IOS⭐一、百度语音IOS版Demo调试方法
Unity与IOS⭐一、百度语音IOS版Demo调试方法
pandown网页版百度网盘在线免登录、免安装、不限速
_Pandownload网页版_是百度网盘的高速下载工具,可在PC和手机上使用,提供不限速下载。通过粘贴分享链接到官网([f.then.asia/#/index](https://f.then.asia/#/index)),或在链接后加`wp`快速访问,可实现高速下载。网页版有时会自动填充提取码,但限制每日下载次数,适用于无百度账号的地区。注意避免使用多线程下载器导致异常。
pandown网页版百度网盘在线免登录、免安装、不限速
|
6月前
|
Ubuntu Shell 数据安全/隐私保护
百度搜索:蓝易云【Ubuntu密码忘记怎么办 Ubuntu重置root密码方法】
完成上述步骤后,Ubuntu系统的root密码应该已经被成功重置为你设置的新密码。请确保在重置密码后牢记新密码。
128 0
|
5月前
|
数据采集 JavaScript 前端开发
详尽分享网站网页中加入各种分享按钮功能百度分享
详尽分享网站网页中加入各种分享按钮功能百度分享
118 0
|
5月前
|
搜索推荐 定位技术 UED
网站如何被百度快速收录?除了提交还有哪些方法?
常规更新:定期更新您的网站内容,这可以让搜索引擎更频繁地访问您的网站,从而加快被百度收录的速度。 网站速度:优化您的网站速度,确保它在百度搜索引擎中的加载速度较快,这可以提高您的网站的用户体验和搜索引擎的排名,也有助于快速被百度收录。 总之,如果您想快速被百度收录,您需要遵循最佳实践,包括优化您的内容、外部链接、社交媒体、站长平台、网站地图、常规更新和网站速度。
109 0
|
6月前
|
Linux
百度搜索:蓝易云【Linux清空日志的五种方法】
这些是在Linux中清空日志文件的五种常用方法。根据您的具体需求和环境,可以选择适合您的方法进行日志清空操作。请注意,清空日志文件可能会导致丢失日志数据,因此在清空之前请确保已备份重要的日志信息。
63 0
|
6月前
|
Linux
百度搜索:蓝易云【Linux系统中查看硬盘信息的方法有哪些?】
这些是在Linux系统中查看硬盘信息的常见方法。根据您的需求和具体环境,您可以选择适合您的方法来查看硬盘信息。
110 0
|
6月前
|
缓存 Linux
百度搜索:蓝易云【Linux系统中查看CPU信息的方法有哪些?】
这些是在Linux系统中查看CPU信息的常见方法。根据您的需求和具体环境,您可以选择适合您的方法来查看CPU信息。
80 0
|
6月前
|
缓存 Linux
百度搜索:蓝易云【Linux系统中查看内存信息的方法有哪些?】
这些是在Linux系统中查看内存信息的常见方法。根据您的需求和具体环境,您可以选择适合您的方法来查看内存信息。
108 0
|
6月前
|
Java
Java【付诸实践 04】Jar包class文件反编译、修改、重新编译打包方法(含反编译工具jd-gui-windows-1.6.6.zip百度云资源)
Java【付诸实践 04】Jar包class文件反编译、修改、重新编译打包方法(含反编译工具jd-gui-windows-1.6.6.zip百度云资源)
730 0

热门文章

最新文章