Html页面添加百度地图

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页面添加百度地图的更多相关文章

ios添加百度地图方法
Hello BaiduMapiOS SDK 引入头文件引入静态库文件引入系统framework 引入mapapi.bundle资源文件初始化BMKMapManager 创建BMKMapView ...
ionic1 添加百度地图插件 cordova-plugin-baidumaplocation
cordova-plugin-baidumaplocation 这个插件返回的数据是 json 格式的可以直接获取 android 和 ios 都可用 1.先去百度地图平台去创建应用获取访问 ...
页面调用百度地图但是使用了https证书之后不显示
首先百度地图使用的都是http请求链接,但是安装了证书之后会觉得这个http不安全,所以默认请求失败这时候我们在请求头添加 <meta http-equiv="Content-Sec ...
IOS学习：在工程中添加百度地图SDK
1.将下载下来的sdk中的inc文件夹.mapapi.bundle.libbaidumapapi.a添加到工程中,其中libbaiduapi.a有两个,一个对应模拟器一个对应真机,导入方法如下: 第一 ...
微信H5页面嵌入百度地图---解决手机的webKit定位，ios系统对非https网站不提供支持问题
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=yGQt ...
Html添加百度地图
方法/步骤 1.打开“百度地图生成器”的网址:http://api.map.baidu.com/lbsapi/creatmap/index.html 如下图: 2.在“1.定位中心点”中,切换城市,并 ...
解决页面引用百度地图API设置点的logo不显示问题
在写css时需要引用一个百度的api地图,却发现设置点的logo图片不能显示,后查阅百度测试发现是图片路径的问题: 在引用的下载的html页面找到 var icon = new BMap.Icon 将 ...
H5页面，百度地图点击事件
需求:用户点击地图的时候获取地址街道,编码等详细信息. 然后看百度API文档,看到了click事件,关键时候还是需要看文档的. 实现这样子虽然在浏览器的手机模拟器下是没有问题的但是放在机器上测试的 ...
百度地图结合echarts并添加行政区块
作者:LJaer链接:https://www.zhihu.com/question/49251513/answer/125728764来源:知乎<!DOCTYPE html> <ht ...

随机推荐

Javascript - ExtJs - TreePanel组件
TreePanel组件(Ext.tree.TreePanel)logogram:Ext.tree.Panel | xtype:treepanel 树与节点树面板组件的根是源头,从根上拓展出其它的子节 ...
析构函数声明为protected
1.如果一个类被继承,同时定义了基类以外的成员对象,且基类析构函数不是virtual修饰的, 那么当基类指针或引用指向派生类对象并析构(例如自动对象在函数作用域结束时:或者通过delete)时,会调用 ...
linux下 gdb+coredump 调试偶发crash的程序
1. 打开 core dump 查看是否打开 ulimit -c 如果输出0, 说明没有打开. 方法一:使用命令 ulimit -c unlimited 可以打开,但是只对当前终端有效, 方法二: 配 ...
CF1139B Chocolates
题目地址:CF1139B Chocolates 前一个必须要少于后一个,那么模拟+贪心即可倒序模拟,每次在上次取的个数减一和这次可以取的最多数量之间取min 直到为0(注意不要减到负数) 再就是注意 ...
mac使用技巧之截图
1.选定区域截图 command+shift+3 选定区域按住control,可以直接截图到剪切板, 按option可以进行比例缩放. 按住shift可以选定区域按住空格键可以进入窗口截图模式. 2 ...
CSS3 Hover 动画特效
根据奇舞团:http://www.75team.com/archives/807 做的demo 根据视频中跟着做的 demo1: <!DOCTYPE html> <html lan ...
简单的三级联动demo
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
python操作三大主流数据库(7)python操作mongodb数据库①mongodb的安装和简单使用
python操作mongodb数据库①mongodb的安装和简单使用参考文档:中文版:http://www.mongoing.com/docs/crud.html英文版:https://docs.m ...
模拟电路学习之NMOS开关电路1
python学习第4天
03 初识列表 why: 字符串的缺点: 1,只能存储少量的数据. 2,s = '1True[1,2,3]' 无论索引,切片获取的都是字符串类型,单一,转化成它原来的类型还需要再一步转换. int( ...

Html页面添加百度地图

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

随机推荐

热门专题