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. synchronized与Lock的区别与使用

    1.ReentrantLock 拥有Synchronized相同的并发性和内存语义,此外还多了 锁投票,定时锁等候和中断锁等候 线程A和B都要获取对象obj的锁定,假设A获取了对象obj锁,B将等待A ...

  2. CF1095E Almost Regular Bracket Sequence

    题目地址:CF1095E Almost Regular Bracket Sequence 真的是尬,Div.3都没AK,难受QWQ 就死在这道水题上(水题都切不了,我太菜了) 看了题解,发现题解有错, ...

  3. Yara VS2017出现LINK : fatal error LNK1104: 无法打开文件“msvcrt.lib”

    解决方法1 搜索msvcrt.lib所在的路径 C:\Program Files (x86)\Microsoft Visual Studio\2017\Professional\VC\Tools\MS ...

  4. 题解-bzoj2554 Color

    Problem Please contact lydsy2012@163.com! 题意概要:有 \(n\) 个球排成一列,每个球都有一个颜色,每次随机选出两个球,使得后者染上前者的颜色,求期望操作多 ...

  5. struts2框架之类型转换（参考第二天学习笔记）

    类型转换 1. 什么是类型转换 刚才学习了封装请求参数,把表单数据封装到Action(模型)的属性中.表单中的数据都是String类型,但Action(模型)的属性不一定什么类型. 将来我们还需要数据 ...

  6. 转载：UML学习（二）-----类图（silent）

    原文:http://www.cnblogs.com/huiy/p/8552607.html 1.什么是类图 类图(Class diagram)主要用于描述系统的结构化设计.类图也是最常用的UML图,用 ...

  7. useful tips for python

    import module; help(module.function) import module; help(module.class)

  8. LA 6893 矩阵HASH （模板）

    #include<stdio.h> #include<string.h> typedef unsigned long long ULL; ; ; int test,n,m,x, ...

  9. 解决ftp客户端连接验证报错Server sent passive reply with unroutable address. Using server address instead

    最近在linux服务器安装vsftp服务.经过一轮设置,终于可以连接上了,用winSCP连接,刷新目录就提示这个错误. 解决办法: vim /etc/vsftpd.conf  ,编辑配置文件,最后加上 ...

  10. Day7--------------IP地址配置

    ifconfig 查看网卡 ifconfig eth0 查看网卡eth0 配置网络地址: 临时配置: ifconfig eth0 192.168.10.100 netmask 255.255.255. ...