文档章节

网页中插入地图

o
 osc_isezqdgg
发布于 2019/09/18 16:19
字数 530
阅读 16
收藏 0

精选30+云产品,助力企业轻松上云!>>>

在我们做官网中经常会在网页中插入百度地图,这个其实挺简单的,下面跟着步骤一步步来。

 

1.进入百度创建地图的网站 http://api.map.baidu.com/lbsapi/creatmap/ 

2.看到图中第一步的下面有1,2,3三个小步骤,打开1.定位中心点→切换里面的城市按钮,选择你要展示的城市位置→在输入框中输入具体的地址,点击查找,就能在右边地图上显示你要显示的位置地图 

 

 3.打开2.设置地图,在里面可以设置地图的宽高,决定哪些按钮是要还是不要,按钮的位置都是可以设置的 

 

4.添加标注→第一个图标“点标记”,可以设置具体的位置点,以点标记的形式显示在地图中,可以更换点标记的样式,也可以设置你要显示的名称和备注;第二个图标“线标记”,可以画出线条路线等;第三个图标“文字标记”,可以写些文字;

 

 至此,一个简单的百度地图位置就设置完了,接下来就是把地图插入到网页中;

5.点击“获取代码”,就会出现一个弹框,里面的代码就是我们所要的,把代码复制到一个空的html文件中保存,命名为 “map.html” ; 

 

 

6.它的src路径就写 map.html ,这样在你的网页中就可以显示你自己设置的地图了,当然地图的宽高、在网页中显示的位置要自己写css。 

该文转自 https://blog.csdn.net/qq_39533140/article/details/80042315

写好了效果是出来了,但是百度标记的图标并没有,如图:

 

解决方法也很简单,只要找到生成的代码中的icon地址:

 

//创建一个Icon
    function createIcon(json){
        var icon = new BMap.Icon("http://app.baidu.com/map/images/us_mk_icon.png", new BMap.Size(json.w,json.h),{imageOffset: new BMap.Size(-json.l,-json.t),infoWindowOffset:new BMap.Size(json.lb+5,1),offset:new BMap.Size(json.x,json.h)})
        return icon;
    }

 

 http://app.baidu.com/map/images/us_mk_icon.png

替换成这个地址即可 http://api.map.baidu.com/lbsapi/creatmap/images/us_mk_icon.png

图标 就出来了。

 

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
网页中插入百度地图详细介绍

在很多网页中都有地图标注效果,通常可以引入百度地图或者其他地图,当然百度给我提供了结构,我们只要正确使用即可,下面就通过代码实例介绍一下如何实现此功能。 代码如下: 以上代码实现了...

青衫无名
2018/03/01
0
0
第151天:网页中插入百度地图方法(不需要密钥)

今天分享一个在网页中插入百度地图的方法,不需要密钥哦,前两天,我试了好多次百度开发平台上使用百度地图的方法,都需要申请密钥,申请了,还是用不了,后来,终于发现了一个不需要密钥的方...

osc_as7vxo55
2018/01/20
2
0
网页嵌入百度地图和使用百度地图api自定义地图的详细步骤

在网页中插入百度地图 如果想在自己的网页上面加入百度地图的话,可以用百度地图的api.具体使用方法如下: 第一步:进入百度创建地图的网站http://api.map.baidu.com/lbsapi/creatmap/,搜索...

osc_mf6gua6n
2018/03/09
4
0
5; XHTML图像

1.背景图案的设置 2.将图片插入到网页中去 3.用图像作为超链接 4.使用工具建立地图索引 5.切片索引 6.为网站添加图标 5.1 背景图案的设置 格式:<body background=”URL”> 5.2 将图片插入到...

osc_lu3hkb21
2019/03/18
4
0
WordPress中加入百度地图插件:Baidu Maps Plugin

在WordPress页面中插入百度地图的插件 WordPress建站,那么恭喜你,有一款插件非常强大,能够让你在网页中自由的插入百度地图。 当然,不仅仅是展示地图位置,应为调用的是百度地图API接口,...

osc_80l29rkk
2019/05/20
11
0

没有更多内容

加载失败,请刷新页面

加载更多

521我发誓读完本文,再也不会担心Spring配置类问题了

当大潮退去,才知道谁在裸泳。关注公众号【BAT的乌托邦】开启专栏式学习,拒绝浅尝辄止。本文 https://www.yourbatman.cn 已收录,里面一并有Spring技术栈、MyBatis、中间件等小而美的专栏供...

osc_72k9vb4y
12分钟前
0
0
微服务思考(01):什么是微服务?微服务的优势和劣势

一、单体应用 在软件开发早期阶段,大家都在一个应用系统上开发。各个业务模块之间耦合也比较紧密。软件发布也是整体发布,或者对软件进行打包发布和部署,比如java可以打包成war部署。测试也...

osc_bcvwusz2
13分钟前
9
0
Halcon一维测量1D Measuring解析

一维测量(也叫一维计量或卡尺)的概念非常直观。沿着一个预定的区域(主要是垂直于RIO感兴趣区域的方向) 边缘的位置。这里的边缘为从暗到亮或从亮到暗的过渡。 基于提取的边缘,可以测量零件...

osc_xs2d5ls9
13分钟前
10
0
U盘+grub2安装centos8实战

1. U盘准备 这里的U盘也可以换成硬盘 grub2安装一直失败,怀疑U盘坏了,下面命令修复了一下 [root@host2 ~]# lsblkNAME MAJ:MIN RM SIZE RO TYPE MOUNTPOINTsda ...

osc_43xj61td
14分钟前
7
0
遇见SQL(2)

SQL自学笔记 约束 1.0概念及分类 2.0非空约束 3.0 唯一约束 4.0 主键约束 自动增长 5.0 外键约束 级联操作 多表关系 三种情况概述 数据库的备份和还原 多表查询 1.0 内连接查询 隐式内连...

osc_4eht81t7
15分钟前
11
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部