方法/步骤

1、打开“百度地图生成器”的网址:http://api.map.baidu.com/lbsapi/creatmap/index.html

如下图:

2、在“1.定位中心点”中,切换城市,并查找具体位置,如下图:

3、在“2.设置地图”中,可以按照自己的喜好修改地图的外观:

a、地图的宽和高

b、地图上显示的按钮(缩放、缩略图、比例尺)

c、鼠标和键盘对地图的操作

如下图:

4、在“3.添加标注”中,可以添加自己想要标注的位置和信息,如下图:

5、在“第二步 获取代码”中,点击“获取代码”按钮,就会弹出根据上面的设置生成代码,如下图:

6、把上一步生成的代码保存为html文件(我这里保存为map.html),在浏览器中打开就可以看到自己定义的百度地图了。

如果要把地图添加到现有的网页中,可以使用iframe标签,如:

<iframe src="map.html" width="600" height="300" frameborder="0" scrolling="no"></iframe>

本文是参考 https://www.cnblogs.com/jiuban2391/p/6106577.html 总结而来;

HTML插入地图的更多相关文章

  1. JavaScript(五)——插入地图

    代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. ...

  2. HTML插入地图的方法

    方法/步骤 1.打开"百度地图生成器"的网址:http://api.map.baidu.com/lbsapi/creatmap/index.html 如下图: 2.在"1 ...

  3. JavaScrip——插入地图

    具体操作步骤:1.百度搜索:百度地图生成器 2.打开第一个,复制网址http://api.map.baidu.com/lbsapi/creatmap/index.html,打开3.页面显示为 4.根据 ...

  4. JavaScript----marquee滚动标签 图片无缝滚动 插入百度地图

    页面的自动滚动效果,可由javascript来实现, 但是有一个html标签 - <marquee></marquee>可以实现多种滚动效果,无需js控制. 使用marquee ...

  5. 页面中插入百度地图(使用百度地图API)

    watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveWF5dW4wNTE2/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA ...

  6. (五)ORBSLAM关键帧的筛选和插入

    ORBSLAM2的关键帧简介 图像插入频率过高会导致信息冗余度快速增加,而这些冗余的信息对系统的精度却十分有限,甚至没有提高,反而消耗了更多的计算资源.这等于吃力不讨好. 关键帧的目的在于,适当地降低 ...

  7. 使用EXCEL绘制三维地图(超简单的五分钟绘制地图方法,妈妈再也不用担心我不会画地图啦~)

    博主为从区域规划转行地图学的小学渣一枚,最近处理数据希望对结果进行三维可视化,意外发现从小用到大的EXCEL可以绘制地图且功能非常强大,在这里做一下简单介绍,希望可以给看官提供些许帮助.那下面就开始吧 ...

  8. 在cms以及kindeditor中插入百度动态地图的方法

    想在网页中插入动态地图不难,直接打开网址http://api.map.baidu.com/lbsapi/creatmap/,然后按照提示操作,最终生成脚本,放到html文件中即可.而在kindedit ...

  9. 借助百度地图API制作企业百度地图

    做网站需要插入地图,可以借助百度地图API,具体步骤如下: 1.打开百度地图API的网址:   http://api.map.baidu.com/lbsapi/creatmap/ 2.设置中心点 3. ...

随机推荐

  1. python封装和解构

    封装 将多个值使用逗号分割,组合在一起 本质上,返回一个元组,只是省略了小括号 python的特有的语法,被很多语言学习借鉴 t1 = (1,2) #定义元组 t2 = 1,2 #将1和2封装成元组 ...

  2. pycharm建立第一个django工程-----windows中

    pycharm建立第一个django工程 系统:win764 ip: 192.168.0.100 安装django pip install django 左上角建立一个名为Firstdjango工程 ...

  3. intel 酷睿core系列cpu的类型:U M H HQ MQ

    相对于笔记本来说.一般我们说的intel系列cpu是指应用于desktop桌面版,embedded嵌入式版, mobile移动版 桌面版和移动版cpu对比 http://tieba.baidu.com ...

  4. 使用sproto buff 的陷阱

    当sproto协议包中的数组元素,长度为0时,会出现接收异常.在没有调试断点的情况下,会停止接收其它协议.

  5. centos7:ssh免密登陆设置

    1.使用root用户登录,进入到目录/root/.ssh 2.执行命令:ssh-keygen -t rsa 一路回车,完成后会在目录/root/.ssh下面生成文件 id_rsa和id_rsa.pub ...

  6. selenium3 web自动化测试框架 五: 数据驱动简介及基础使用

    1.数据驱动概述 相同的测试脚本使用不同的测试数据来执行,测试数据和测试行为完全分离,这样的测试脚本设计模式称为数据驱动.简单的理解为数据的改变从而驱动自动化测试的执行,最终引起测试结果的改变.通过使 ...

  7. CVPapers - Computer Vision Resource

    To add links (PDF, project,...) you can use the online tool. Computer Vision Paper Indexes ICCV:  20 ...

  8. matplotlib画图总结--多子图布局

    1.subplot布局 subplot(nrows, ncols, index, **kwargs) subplot(pos, **kwargs) subplot(ax) x=[1,2,3] valu ...

  9. 2019SDN第四次作业

    一.配置java环境 输入命令sudo gedit ~/.bashrc 添加如下内容 二.启动并安装插件 cd distribution-karaf-0.4.4-Beryllium-SR4/bin/ ...

  10. navicat破解版的下载与激活

    原文链接:http://www.cnblogs.com/djwhome/p/9289295.html 以前一直使用的老版的破解版的navicat,但是最近老是报错 而且连接还特别慢,今天终于不忙了额, ...