首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >第151天:网页中插入百度地图方法(不需要密钥)

第151天:网页中插入百度地图方法(不需要密钥)

作者头像
半指温柔乐
发布于 2018-09-11 02:03:44
发布于 2018-09-11 02:03:44
5.3K00
代码可运行
举报
文章被收录于专栏:前端知识分享前端知识分享
运行总次数:0
代码可运行

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

1、打开百度地图生成器链接:http://api.map.baidu.com/lbsapi/creatmap/

2、在左侧填写位置信息

3、设置地图宽高

4、给位置添加标注信息,可以修改标注图标,完成后点击保存

5、获取代码

将代码保存到文件里,可以命名map.html,在页面中引用时,注意,将script代码引入进去

 6、完整代码

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 <html xmlns="http://www.w3.org/1999/xhtml">
  3 <head>
  4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5 <meta name="keywords" content="百度地图,百度地图API,百度地图自定义工具,百度地图所见即所得工具" />
  6 <meta name="description" content="百度地图API自定义地图,帮助用户在可视化操作下生成百度地图" />
  7 <title>百度地图API自定义地图</title>
  8 <!--引用百度地图API-->
  9 <style type="text/css">
 10     html,body{margin:0;padding:0;}
 11     .iw_poi_title {color:#CC5522;font-size:14px;font-weight:bold;overflow:hidden;padding-right:13px;white-space:nowrap}
 12     .iw_poi_content {font:12px arial,sans-serif;overflow:visible;padding-top:4px;white-space:-moz-pre-wrap;word-wrap:break-word}
 13 </style>
 14 <script type="text/javascript" src="http://api.map.baidu.com/api?key=&v=1.1&services=true"></script>
 15 </head>
 16 
 17 <body>
 18   <!--百度地图容器-->
 19   <div style="width:697px;height:550px;border:#ccc solid 1px;" id="dituContent"></div>
 20 </body>
 21 <script type="text/javascript">
 22     //创建和初始化地图函数:
 23     function initMap(){
 24         createMap();//创建地图
 25         setMapEvent();//设置地图事件
 26         addMapControl();//向地图添加控件
 27         addMarker();//向地图中添加marker
 28     }
 29     
 30     //创建地图函数:
 31     function createMap(){
 32         var map = new BMap.Map("dituContent");//在百度地图容器中创建一个地图
 33         var point = new BMap.Point(113.572138,34.819954);//定义一个中心点坐标
 34         map.centerAndZoom(point,18);//设定地图的中心点和坐标并将地图显示在地图容器中
 35         window.map = map;//将map变量存储在全局
 36     }
 37     
 38     //地图事件设置函数:
 39     function setMapEvent(){
 40         map.enableDragging();//启用地图拖拽事件,默认启用(可不写)
 41         map.enableScrollWheelZoom();//启用地图滚轮放大缩小
 42         map.enableDoubleClickZoom();//启用鼠标双击放大,默认启用(可不写)
 43         map.enableKeyboard();//启用键盘上下左右键移动地图
 44     }
 45     
 46     //地图控件添加函数:
 47     function addMapControl(){
 48         //向地图中添加缩放控件
 49     var ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});
 50     map.addControl(ctrl_nav);
 51         //向地图中添加缩略图控件
 52     var ctrl_ove = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:1});
 53     map.addControl(ctrl_ove);
 54         //向地图中添加比例尺控件
 55     var ctrl_sca = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
 56     map.addControl(ctrl_sca);
 57     }
 58     
 59     //标注点数组
 60     var markerArr = [{title:"我的标记",content:"我的备注",point:"113.572169|34.819495",isOpen:1,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}}
 61          ];
 62     //创建marker
 63     function addMarker(){
 64         for(var i=0;i<markerArr.length;i++){
 65             var json = markerArr[i];
 66             var p0 = json.point.split("|")[0];
 67             var p1 = json.point.split("|")[1];
 68             var point = new BMap.Point(p0,p1);
 69             var iconImg = createIcon(json.icon);
 70             var marker = new BMap.Marker(point,{icon:iconImg});
 71             var iw = createInfoWindow(i);
 72             var label = new BMap.Label(json.title,{"offset":new BMap.Size(json.icon.lb-json.icon.x+10,-20)});
 73             marker.setLabel(label);
 74             map.addOverlay(marker);
 75             label.setStyle({
 76                         borderColor:"#808080",
 77                         color:"#333",
 78                         cursor:"pointer"
 79             });
 80             
 81             (function(){
 82                 var index = i;
 83                 var _iw = createInfoWindow(i);
 84                 var _marker = marker;
 85                 _marker.addEventListener("click",function(){
 86                     this.openInfoWindow(_iw);
 87                 });
 88                 _iw.addEventListener("open",function(){
 89                     _marker.getLabel().hide();
 90                 })
 91                 _iw.addEventListener("close",function(){
 92                     _marker.getLabel().show();
 93                 })
 94                 label.addEventListener("click",function(){
 95                     _marker.openInfoWindow(_iw);
 96                 })
 97                 if(!!json.isOpen){
 98                     label.hide();
 99                     _marker.openInfoWindow(_iw);
100                 }
101             })()
102         }
103     }
104     //创建InfoWindow
105     function createInfoWindow(i){
106         var json = markerArr[i];
107         var iw = new BMap.InfoWindow("<b class='iw_poi_title' title='" + json.title + "'>" + json.title + "</b><div class='iw_poi_content'>"+json.content+"</div>");
108         return iw;
109     }
110     //创建一个Icon
111     function createIcon(json){
112         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)})
113         return icon;
114     }
115     
116     initMap();//创建和初始化地图
117 </script>
118 </html>

 以上就是网页中插入百度地图的方法,做企业站,总是要插入百度地图,以后再也不用愁了。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018-01-20 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
基于Hadoop的数据仓库工具Hive安装。
32、点击[mysql-connector-java-5.1.40.tar.gz]
裴来凡
2022/05/28
2690
基于Hadoop的数据仓库工具Hive安装。
以root用户登录系统,创建Hadoop用户。
1、点击[命令行窗口] 2、按<Enter>键 3、点击[命令行窗口] 4、按<Enter>键 5、点击[命令行窗口] 6、按<Enter>键 7、点击[命令行窗口] 8、按<Enter>键 9、点击[命令行窗口] 10、按<Enter>键 11、点击[命令行窗口] 12、按<Esc>键 13、点击[命令行窗口] 14、按<Enter>键 15、点击[命令行窗口] 16、按<Enter>键 17、点击[命令行窗口] 18
裴来凡
2022/05/28
2.7K0
以root用户登录系统,创建Hadoop用户。
yum出现Loaded plugins: fastestmirror成功解决办法。
1、点击[命令行窗口] 2、按<Enter>键 3、按<i>键 4、点击[命令行窗口] 5、按<Esc>键 6、点击[命令行窗口] 7、按<Enter>键 8、点击[命令行窗口] 9、按<Enter>键 10、按<i>键 11、点击[命令行窗口] 12、按<Esc>键 13、点击[命令行窗口] 14、按<Enter>键 15、点击[命令行窗口] 16、按<Enter>键 17、点击[命令行窗口] 18、按<Enter>键 19
裴来凡
2022/05/28
5.4K0
yum出现Loaded plugins: fastestmirror成功解决办法。
使用yum命令提示Error: File contains no section headers。
1、点击[命令行窗口] 2、按<Enter>键 3、点击[命令行窗口] 4、按<Enter>键 5、点击[命令行窗口] 6、按<Enter>键 7、点击[命令行窗口] 8、按<Enter>键 9、点击[命令行窗口] 10、按<Enter>键 11、按<i>键 12、点击[命令行窗口] 13、按<Esc>键 14、点击[命令行窗口] 15、按<Enter>键 16、点击[命令行窗口] 17、按<Enter>键 18、点击[命令行窗口]
裴来凡
2022/05/28
2.4K0
使用yum命令提示Error: File contains no section headers。
安装,配置环境变量Jdk-10.0.2以及检验安装。
1、点击[命令行窗口] 2、按<Enter>键 3、按<i>键 4、点击[命令行窗口] 5、按<Esc>键 6、按<Shift++>键 7、点击[命令行窗口] 8、按<Enter>键 10、点击[命令行窗口] 11、按<Enter>键 12、点击[命令行窗口] 13、按<Enter>键
裴来凡
2022/05/28
2200
安装,配置环境变量Jdk-10.0.2以及检验安装。
在Centos7的环境下下载安装yum完整过程。
7、点击[yum-metadata-parser-1.1.4-10.el7.x86_64.rpm]
裴来凡
2022/05/28
3.1K0
在Centos7的环境下下载安装yum完整过程。
最简化修改Jupyter Notebook目录和子目录。
1、点击[命令行窗口] 2、按<Enter>键 3、按<Enter>键 4、按<Ctrl+F>键 5、点击[查找下一个] 6、点击[文本] 7、按<Ctrl+S>键 7、点击[命令行窗口] 8、按<Enter>键
裴来凡
2022/05/28
5780
最简化修改Jupyter Notebook目录和子目录。
Linux系统常用且实用的命令实验对照图表?
1、点击[命令行窗口] 2、按<Enter>键 3、点击[命令行窗口] 4、按<Enter>键 5、点击[命令行窗口] 6、按<Enter>键 7、点击[命令行窗口] 8、按<Enter>键 9、点击[命令行窗口] 10、按<Enter>键 11、点击[命令行窗口] 12、按<Enter>键 13、点击[命令行窗口] 14、按<Enter>键 15、点击[文本] 16、按<Ctrl+O>键 17、点击[File Name to Writ
裴来凡
2022/05/28
7620
Linux系统常用且实用的命令实验对照图表?
Linux 目录修改mv 和 cp 的使用命令方式
注意:mv的语法不仅可以对目录进行重命名而且也可以对各种文件,压缩包等进行 重命名的操作
用户7639835
2021/08/31
2.9K0
Hadoop2.7.1版本附网盘的链接下载。
1、点击[hadoop-2.7.1_64bit.tar.gz] 2、点击[关闭] 3、点击[命令行窗口] 4、按<Enter>键 5、点击[命令行窗口] 6、按<Enter>键 7、点击[命令行窗口] 8、按<Enter>键
裴来凡
2022/05/28
1.3K2
Hadoop2.7.1版本附网盘的链接下载。
如何在linux中使用终端命令行创建文件
使用touch命令创建文件 在 Linux 中创建新文件的最简单方法是使用 touch 命令。 在终端窗口中,输入以下内容: touch test.txt 这将创建一个名为test.txt的新空文件。你可以通过输入看到它: ls 该ls命令列出当前目录的内容。由于没有指定其他目录,因此该touch 命令在当前目录中创建了文件。 使用 touch 命令创建文件 如果已经有一个具有你选择的名称的文件,该touch命令将更新时间戳。 使用重定向运算符创建新文件 重定向运算符是用于更改显示结果的目的地的字符的名
入门笔记
2022/06/02
4.4K0
如何在linux中使用终端命令行创建文件
Linux终端的使用
要了解终端,就要了解一下计算机方面的历史,早期的计算机都属于大中型计算机,是个庞然大物,占用很大的空间,属于公用产品。不像现在的电脑,可以人手一部,直接操作。那如何对这些计算机进行控制与操作呢。那就搞个终端设备来操作。因此一台计算机上有很多种不同的终端设备也和正常。也就是说终端就是为主机提供了人机接口,每个人都通过终端使用主机的资源。
星哥玩云
2022/09/15
12.9K0
Linux终端的使用
Linux下搭建Java环境
访问 jdk 安装包下载的官网 https://www.oracle.com/java/technologies/javase/javase8-archive-downloads.html,进入下载页
用户3880999
2023/04/13
1.9K0
Linux下搭建Java环境
【Linux 操作系统】vim编辑器配置及常用命令
最近工作不安分, 没有了刚入行时候的锐气, 不知道什么时候开始懈怠起来, 周末在电脑旁边看新闻, 搞笑图片, 追美剧, 一坐就是一天, 很是空虚. 我需要摆脱这种状态, 正好想学习一下安卓底层, Android码农, C/C++功底差了点, Android内核源码看得也很吃力, 索性就报了个嵌入式班, 周末班, 还好我在北京, 找个家培训机构开始学习嵌入式开发. 
韩曙亮
2023/03/27
2.7K0
Linux常用命令12 - vi
vim 是许多在命令行上 Linux 下首选文本编辑器。 与其他编辑器不同,vim 有几种操作模式,这对于新用户来说有点吓人。
叉叉敌
2020/04/21
2.2K0
Linux命令篇(六):vi/vim专项
Vim 是从 vi 发展出来的一个文本编辑器。简单的来说, vi 是老式的字处理器,不过功能已经很齐全了,但是还是有可以进步的地方。 vim 则可以说是程序开发者的一项很好用的工具。
用户11147438
2024/06/04
3490
Linux命令篇(六):vi/vim专项
Python3教程——5、Python3
Ctrl + Space 基本的代码完成(类、方法、属性) Ctrl + Alt + Space 类名完成 Ctrl + Shift + Enter 语句完成 Ctrl + P 参数信息(在方法中调用参数) Ctrl + Q 快速查看文档 Shift + F1 外部文档 Ctrl + 鼠标 简介(左键点击即可看到该函数或变量的位置) Ctrl + F1 显示错误描述或警告信息 Alt + Insert 自动生成代码 Ctrl + O 重新方法 Ctrl + Alt + T 选中 Ctrl + / 行注释(再次点击,解除注释,可同时选择多行一起注释) Ctrl + Shift + / 块注释 Ctrl + W 选中增加的代码块 Ctrl + Shift + W 回到之前状态 Ctrl + Shift + ]/[ 选定代码块结束、开始 Alt + Enter 快速修正 Ctrl + Alt + L 代码格式化 Ctrl + Alt + O 优化导入 Ctrl + Alt + I 自动缩进 Tab / Shift + Tab 缩进、不缩进当前行 Ctrl+X/Shift+Delete 剪切当前行或选定的代码块到剪贴板 Ctrl+C/Ctrl+Insert 复制当前行或选定的代码块到剪贴板 Ctrl+V/Shift+Insert 从剪贴板粘贴 Ctrl + Shift + V 从最近的缓冲区粘贴 Ctrl + D 复制选定的区域或行 Ctrl + Y 删除选定的行 Ctrl + Shift + J 添加智能线 Ctrl + Enter 智能线切割 Shift + Enter 另起一行 Ctrl + Shift + U 在选定的区域或代码块间切换 Ctrl + Delete 删除到字符结束 Ctrl + Backspace 删除到字符开始 Ctrl + Numpad+/- 展开折叠代码块 Ctrl + Numpad+ 全部展开 Ctrl + Numpad- 全部折叠 Ctrl + F4 关闭运行的选项卡
py3study
2020/01/09
2K0
Python3教程——5、Python3
Vim的基本使用方法
vim分两种,一种是命令行的,就叫vim,绝大部分linux默认已经安装。还有一种是带图形界面的vim,也叫gvim。可以通过which来确认:
ExASIC
2024/02/23
4040
Vim的基本使用方法
手把手教你启用Win10的Linux子系统(超详细)[通俗易懂]
今天为大家介绍如何才能启用Windows10下的Linux子系统,废话不多说,直接看步骤:
全栈程序员站长
2022/08/01
8.6K0
手把手教你启用Win10的Linux子系统(超详细)[通俗易懂]
Vim的基本使用方法
vim分两种,一种是命令行的,就叫vim,绝大部分linux默认已经安装。还有一种是带图形界面的vim,也叫gvim。可以通过which来确认:
ExASIC
2025/03/18
1840
Vim的基本使用方法
推荐阅读
相关推荐
基于Hadoop的数据仓库工具Hive安装。
更多 >
交个朋友
加入腾讯云官网粉丝站
蹲全网底价单品 享第一手活动信息
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验