网页嵌入百度地图和使用百度地图api自定义地图的详细步骤

摘要:
点击第一个图标后,在右侧找到自己的位置,单击鼠标左键可定位。标记图标处可更换图标形状,名称和备注填入位置相关信息。将代码贴到你的网页里就OK了。DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"˃˂htmlxmlns="http://www.w3.org/1999/xhtml"˃百度地图API自定义地图html,body{margin:0;padding:0;}.iw_poi_title{color:#CC5522;font-size:14px;font-weight:bold;overflow:hidden;padding-right:13px;white-space:nowrap}.iw_poi_content{font:12pxarial,sans-serif;overflow:visible;padding-top:4px;white-space:-moz-pre-wrap;word-wrap:break-word}˂scripttype="text/javascript"src="http://t.zoukankan.com/˂ahref="http://api.map.baidu.com/api?

在网页中插入百度地图

如果想在自己的网页上面加入百度地图的话,可以用百度地图的api.具体使用方法如下:

第一步:进入百度创建地图的网站http://api.map.baidu.com/lbsapi/creatmap/,搜索出自己要展示的位置,如下图所示。
网页嵌入百度地图和使用百度地图api自定义地图的详细步骤第1张

第二步:设置地图,大家可以对网站显示地图的宽高进行设置,其余选项不动。

第三步:添加标注。点击第一个图标后,在右侧找到自己的位置,单击鼠标左键可定位。标记图标处可更换图标形状,名称和备注填入位置相关信息。

第四步:获取代码。将代码贴到你的网页里就OK了。代码如下:

复制代码
代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="百度地图,百度地图API,百度地图自定义工具,百度地图所见即所得工具" />
<meta name="description" content="百度地图API自定义地图,帮助用户在可视化操作下生成百度地图" />
<title>百度地图API自定义地图</title>
<!--引用百度地图API-->
<style type="text/css">
html,body{margin:0;padding:0;}
.iw_poi_title {color:#CC5522;font-size:14px;font-weight:bold;overflow:hidden;padding-right:13px;white-space:nowrap}
.iw_poi_content {font:12px arial,sans-serif;overflow:visible;padding-top:4px;white-space:-moz-pre-wrap;word-wrap:break-word}
</style>
<script type="text/javascript" src="http://t.zoukankan.com/<a href="http://api.map.baidu.com/api?key=&v=1.1&services=true"></script">http://api.map.baidu.com/api?key=&v=1.1&services=true"></script</a>>
</head></p> <p><body>
<!--百度地图容器-->
<div id="dituContent"></div>
</body>
<script type="text/javascript">
//创建和初始化地图函数:
function initMap(){
createMap();//创建地图
setMapEvent();//设置地图事件
addMapControl();//向地图添加控件
}
//创建地图函数:
function createMap(){
var map = new BMap.Map("dituContent");//在百度地图容器中创建一个地图
var point = new BMap.Point(113.116257,27.822879);//定义一个中心点坐标
map.centerAndZoom(point,17);//设定地图的中心点和坐标并将地图显示在地图容器中
window.map = map;//将map变量存储在全局
}
//地图事件设置函数:
function setMapEvent(){
map.enableDragging();//启用地图拖拽事件,默认启用(可不写)
map.enableScrollWheelZoom();//启用地图滚轮放大缩小
map.enableDoubleClickZoom();//启用鼠标双击放大,默认启用(可不写)
map.enableKeyboard();//启用键盘上下左右键移动地图
}
//地图控件添加函数:
function addMapControl(){
//向地图中添加缩放控件
var ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});
map.addControl(ctrl_nav);
//向地图中添加缩略图控件
var ctrl_ove = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:1});
map.addControl(ctrl_ove);
//向地图中添加比例尺控件
var ctrl_sca = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
map.addControl(ctrl_sca);
}
initMap();//创建和初始化地图
</script>
</html>

免责声明:文章转载自《网页嵌入百度地图和使用百度地图api自定义地图的详细步骤》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇java 将数据库中的每一条数据取出放入数组或者List中WebSocket详解下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

Cocos Creator 配合Tiled地图的使用

版本2.3.4 参考: TiledMap Editor官网 cocosTiledMap组件参考 GitBook TiledTile API 游戏中经常会用到瓦片地图,cocos也提供了对Tiled编辑器的支持。现在来学习下如何使用。 现在来创建一个TiledMap,并用到cocos中,最终效果如下 一打开Tiled新建地图 选择创建新地图,块大小64x...

百度ueditor编辑器直接粘贴图片实现

很多时候我们用一些管理系统的时候,发布新闻、公告等文字类信息时,希望能很快的将word里面的内容直接粘贴到富文本编辑器里面,然后发布出来。减少排版复杂的工作量。 下面是借用百度doc 来快速实现这个word 粘贴到 富文本编辑器里面方法一: 工具/原料 百度doc任意富文本编辑器,以UEDdito为例 方法/步骤 登录,http://word.baidu....

单体架构、SOA、微服务

1、单体架构 2、单体架构的拆分 3、SOA与微服务的区别 4、微服务的优缺点 5、微服务的消息 6、服务集成 7、数据的去中心化 一、单体架构 Web应用程序发展的早期,大部分web工程是将所有的功能模块(service side)打包到一起并放在一个web容器中运行,很多企业的Java应用程序打包为war包。其他语言(Ruby,Python或者C++)...

百度地图JavaScript开发入门先知

最近项目紧急开发了一些百度地图的功能,觉得百度地图实数强大!于是今天不忙总结一下,看到不错的文章先转载。 文章出处:https://www.opengps.cn/Blog/View.aspx?id=14 百度地图JavaScript开发第一步,得会看资料。很多新手,是因为连基本的页面怎么打开都不知道,重度依赖搜索引擎去搜出来百度地图开发官方站点,从而记不住...

Abp的swagger UI 出现Failed to load API definition.

Abp 出现Failed to load API definition.如下图: 原因:本次出现的原因是Api里面的方法重名了(只是方法的参数不一样)(可能是controller中的auction上面少了(hettpget,httpdelete)属性,其它原因也可能引起) 解决方法:修改其中一个方法的名字...

APP漏洞自动化扫描专业评测报告(下篇)

上篇、中篇回顾:通过收费情况、样本测试后的扫描时间、漏洞项对比以及扫描能力这几个方面对阿里聚安全[1]、360App漏洞扫描[2]、腾讯金刚审计系统[3]、百度移动云测试中心[4]以及AppRisk Scanner[5]进行了对比分析。作为本系列的最后一篇,我将会以4个随机选取的APP的测试结果来进行对比。 四、扫描结果对比 选取的APP:说明一下这次选择...