1.进入百度地图开放平台

　　http://lbsyun.baidu.com/

2.进入右上角的   “API控制台”

　　在这里创建应用 并 获取密钥

3.进入 如下地址 创建地图

　　http://api.map.baidu.com/lbsapi/creatmap/

　　地图创建完成后会自动生成 HTML代码

4.创建完成后的代码 如下所示

(以 北京天安门为例)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<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://api.map.baidu.com/api?key=在这里填写申请的AK&v=1.1&services=true"></script>

</head>

<body>

  <!--百度地图容器-->

  <div style="width:697px;height:550px;border:#ccc solid 1px;" id="dituContent"></div>

</body>

<script type="text/javascript">

    //创建和初始化地图函数：

    function initMap(){

        createMap();//创建地图

        setMapEvent();//设置地图事件

        addMapControl();//向地图添加控件

        addMarker();//向地图中添加marker

    }

    //创建地图函数：

    function createMap(){

        var map = new BMap.Map("dituContent");//在百度地图容器中创建一个地图

        var point = new BMap.Point(116.403963,39.915119);//定义一个中心点坐标

        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);

    }

    //标注点数组

    var markerArr = [{title:"我的标记",content:"我的备注",point:"116.403936|39.915147",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}}

		 ];

    //创建marker

    function addMarker(){

        for(var i=0;i<markerArr.length;i++){

            var json = markerArr[i];

            var p0 = json.point.split("|")[0];

            var p1 = json.point.split("|")[1];

            var point = new BMap.Point(p0,p1);

			var iconImg = createIcon(json.icon);

            var marker = new BMap.Marker(point,{icon:iconImg});

			var iw = createInfoWindow(i);

			var label = new BMap.Label(json.title,{"offset":new BMap.Size(json.icon.lb-json.icon.x+10,-20)});

			marker.setLabel(label);

            map.addOverlay(marker);

            label.setStyle({

                        borderColor:"#808080",

                        color:"#333",

                        cursor:"pointer"

            });

			(function(){

				var index = i;

				var _iw = createInfoWindow(i);

				var _marker = marker;

				_marker.addEventListener("click",function(){

				    this.openInfoWindow(_iw);

			    });

			    _iw.addEventListener("open",function(){

				    _marker.getLabel().hide();

			    })

			    _iw.addEventListener("close",function(){

				    _marker.getLabel().show();

			    })

				label.addEventListener("click",function(){

				    _marker.openInfoWindow(_iw);

			    })

				if(!!json.isOpen){

					label.hide();

					_marker.openInfoWindow(_iw);

				}

			})()

        }

    }

    //创建InfoWindow

    function createInfoWindow(i){

        var json = markerArr[i];

        var iw = new BMap.InfoWindow("<b class='iw_poi_title' title='" + json.title + "'>" + json.title + "</b><div class='iw_poi_content'>"+json.content+"</div>");

        return iw;

    }

    //创建一个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;

    }

    initMap();//创建和初始化地图

</script>

</html>

　　

如果添加的标注不显示  请将地址改为

http://map.baidu.com/image/us_mk_icon.png

Html页面添加百度地图的更多相关文章

  1. ios添加百度地图方法

    Hello BaiduMapiOS SDK 引入头文件 引入静态库文件 引入系统framework 引入mapapi.bundle资源文件 初始化BMKMapManager 创建BMKMapView ...

  2. ionic1 添加百度地图插件 cordova-plugin-baidumaplocation

    cordova-plugin-baidumaplocation 这个插件返回的数据是 json 格式的  可以直接获取  android 和 ios 都可用 1.先去百度地图平台去创建应用  获取访问 ...

  3. 页面调用百度地图但是使用了https证书之后不显示

    首先百度地图使用的都是http请求链接,但是安装了证书之后会觉得这个http不安全,所以默认请求失败 这时候我们在请求头添加 <meta http-equiv="Content-Sec ...

  4. IOS学习：在工程中添加百度地图SDK

    1.将下载下来的sdk中的inc文件夹.mapapi.bundle.libbaidumapapi.a添加到工程中,其中libbaiduapi.a有两个,一个对应模拟器一个对应真机,导入方法如下: 第一 ...

  5. 微信H5页面嵌入百度地图---解决手机的webKit定位，ios系统对非https网站不提供支持问题

    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=yGQt ...

  6. Html添加百度地图

    方法/步骤 1.打开“百度地图生成器”的网址:http://api.map.baidu.com/lbsapi/creatmap/index.html 如下图: 2.在“1.定位中心点”中,切换城市,并 ...

  7. 解决页面引用百度地图API设置点的logo不显示问题

    在写css时需要引用一个百度的api地图,却发现设置点的logo图片不能显示,后查阅百度测试发现是图片路径的问题: 在引用的下载的html页面找到 var icon = new BMap.Icon 将 ...

  8. H5页面，百度地图点击事件

    需求:用户点击地图的时候获取地址街道,编码等详细信息. 然后看百度API文档,看到了click事件,关键时候还是需要看文档的. 实现 这样子虽然在浏览器的手机模拟器下是没有问题的 但是放在机器上测试的 ...

  9. 百度地图结合echarts并添加行政区块

    作者:LJaer链接:https://www.zhihu.com/question/49251513/answer/125728764来源:知乎<!DOCTYPE html> <ht ...

随机推荐

  1. windows下flazr对rtmp视频流进行压力测试（批量直播测试）

    flazr-0.7-RC2下载地址:百度网盘 提取码:nu05 简述:通过推流软件推送摄像头视频流到nginx流媒体服务器,获取nginx流媒体服务器上的视频流,在windows下使用flazr软件进 ...

  2. Django实战(一)-----用户登录与注册系统6（session会话、注册视图）

    因为因特网HTTP协议的特性,每一次来自于用户浏览器的请求(request)都是无状态的.独立的. 通俗地说,就是无法保存用户状态,后台服务器根本就不知道当前请求和以前及以后请求是否来自同一用户.对于 ...

  3. 待解决new int(i*j)

    这里的确应该用new int [i*j] 来申请一片空间,但new int(i)的含义就像是给p指针指向的内容赋值了,相当于只申请了一个4个字节. 问题是,为什么后面b不能输出结果呢? #includ ...

  4. BCG界面库

    之前用过BCG界面库中的表格控件,深感其强大,现在再来用一下其它的. 一.   关于BCGControlBar. BCGControlBar是一个基于MFC的扩展库,您可以通过完全的用户化操作构成一些 ...

  5. 使用命令行解析php文件

    使用命令行解析php文件,这样可以调用Log4PHP库中的一些demo,因为默认的输出使用命令行作为输出. 建一个bat文件: echo 以下是使用命令行解析php文件 C:\xampp\php\ph ...

  6. 在Ubuntu 16.04下安装nodejs

    源安装: 1.curl -sL https://deb.nodesource.com/setup_5.x | sudo -E bash - 2.sudo apt-get install -y node ...

  7. vmware Harbor 复制功能试用

    vmware Harbor 复制功能试用 Harbor基于策略的Docker镜像复制功能,可在不同的数据中心.不同的运行环境之间同步镜像,并提供友好的管理界面,大大简化了实际运维中的镜像管理工作. 功 ...

  8. mingw zlib-1.2.11 win32-static.patch

    diff --git a/Makefile.in b/Makefile.in index 1852192..c88f5b5 100644 --- a/Makefile.in +++ b/Makefil ...

  9. OpenCV中RGB和HSV转换的问题

    1.一般情况下HSV模型各分量的取值范围为:H为0到360°,S为0到100%,V为0到255.但是在OpenCV中在由RGB转换到HSV的过程中,发现HSV中H为0到180°,S为0到255,V为0 ...

  10. Scientific Toolworks Understand

    Scientific Toolworks Understand是一款定位于代码阅读的软件.界面用Qt开发的. 软件特性: 1.支持多语言:Ada, C, C++, C#, Java, FORTRAN, ...