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

 

相关文章
|
设计模式 缓存 JavaScript
API设计模式:REST、GraphQL、gRPC与tRPC全面解析
API设计模式:REST、GraphQL、gRPC与tRPC全面解析
513 0
拯救你的排版噩梦,搞定Deepseek到WPS的完美转换!
使用DeepSeek生成的文案复制到WPS后排版混乱?别担心,本文教你用LibreOffice解决此问题。首先下载并安装LibreOffice,然后将DeepSeek文案粘贴其中,保存为Word格式,最后用WPS打开,排版完美保留。简单四步,轻松搞定!
|
12月前
|
人工智能 算法框架/工具 芯片
【AI系统】寒武纪介绍
中科寒武纪科技股份有限公司,成立于2016年,致力于打造云边端一体、软硬件协同的智能芯片产品和平台化基础系统软件。寒武纪的产品线涵盖了终端智能处理器IP、边缘端和云端智能加速卡,形成了从1A处理器核到思元系列MLU100、MLU200、MLU300的完整布局。其核心技术包括高效的MLU Core架构和Cambricon Neuware软件栈,支持高性能AI计算,助力机器更好地理解和服务人类。
1599 0
|
存储 缓存 Windows
释放C盘空间:WinSXS文件夹真实性大小判断及释放占用空间
WinSXS文件夹存储了不同版本的系统组件和动态链接库(DLL),包括各个Windows更新、Service Pack和功能更新安装后保留的旧版文件。即使新版本已经安装并投入使用,旧版本文件仍被保存以确保与依赖旧版本的应用程序兼容。
1185 0
释放C盘空间:WinSXS文件夹真实性大小判断及释放占用空间
|
存储 机器学习/深度学习 缓存
APM-Elastic Stack 实战手册
应用程序性能管理(Application Performance Management)简称 APM。主要功能为监视和管理软件应用程序性能和可用性。
3161 0
APM-Elastic Stack 实战手册
|
Linux
Linux 学习笔记七:YUM安装软件
Linux 学习笔记七:YUM安装软件
440 0
|
SQL 算法 Java
花了三个小时打磨这道JAVA面试题,谈谈你对Seata的理解?
Seata在大厂也是属于高频的面试题,有一位3年工作经验的小伙伴被问到一道这样的面试题,说“谈谈你对Seata的理解”。那么,今天我给大家来聊一聊。
590 1
|
存储 缓存 NoSQL
Redis+Caffeine 两级缓存(一)
Redis+Caffeine 两级缓存
650 0
|
机器学习/深度学习 人工智能 分布式计算
Java与人工智能:开发未来的AI
Java与人工智能:开发未来的AI
1567 1
|
Kubernetes 网络协议 关系型数据库
「容器架构」Debian和 Alpine作为基准Docker映像的对比
「容器架构」Debian和 Alpine作为基准Docker映像的对比