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. cxf方式实现webservice接口笔记

    1.配置cxf的jar包依赖: 因maven中央仓库会自带cxf的相关依赖jar,故去maven官网搜索并获取pom配置到本地pom.xml文件即可,maven中央仓库搜索引擎地址:http://se ...

  2. MySql cmd下的学习笔记 —— 有关修饰器的知识（trigger）

    关于触发器的理解: 进行数据库应用软件的开发时,有时我们碰到表的某些数据的改变时,希望同时 引起其他相关数据改变的需求,利用触发器就能满足这样的需求. 触发器能在表中的某些特定数据变化时自动完成某些查 ...

  3. 20165237 2017-2018-2 《Java程序设计》第5周学习总结

    20165237 2017-2018-2 <Java程序设计>第5周学习总结 教材学习内容总结 1.内部类:在一个类中定义另一个类:外嵌类:包含内部类的类. 2.内部类的类体中不能声明类变 ...

  4. python初级实战-----主机在线情况监控web

    背景 公司有600多台服务器,打算写一个小程序,能一眼看见哪些服务器不在线. 大体思路是: 1.把所有服务器ip存进数据库,ping命令判断服务器是否在线 2.更新数据库中ip的状态 3.简单的web ...

  5. 关于istream_iterator<int>(cin)和istream_iterator<int>()的一点分析

    最近在看STL,其中讲到容器这一部分的时候,有以下两个式子,有点疑惑: deque<) //函数声明 deque<) //定义一个容器 式子原本的含义都是要定义一个容器,容器的内容从标准输 ...

  6. unity提示can't add script解决办法

    1.脚本有误没有继承unity类. 2.类名文件名不一致. 3.内部逻辑代码有误.

  7. 提高Django高并发性的部署方案（Python）

    方案: nginx + uWSGI 提高 Django的并发性        1. uWSGI :                 uWSGI是一个web服务器,实现了WSGI协议.uwsgi协议.h ...

  8. ifconfig相关参数及用法说明

    一.ifconfig ifconfig 主要是可以手动启动.观察与修改网络接口的相关参数,可以修改的参数很多,包括 IP 参数以及 MTU 等都可以修改,它的语法如下: [root@linux ~]# ...

  9. ACL认证 vs 密码认证

    呼入时需要进行认证:acl IP认证 和 密码认证.  acl 认证优先进行. ACL认证成功: Access Granted.  直接进入 sip_profile>context 进行路由 A ...

  10. MybatisGenerator生成的mapper 少了识别主键的方法 byPrimaryKey()

    生成的文件缺少红线标注的类似方法 添加 <property name="useInformationSchema" value="true"/>即可 ...