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

http://developer.baidu.com/map/index.php?title=webapi

<!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=&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.266864,39.289613);//定义一个中心点坐标

        map.centerAndZoom(point,8);//设定地图的中心点和坐标并将地图显示在地图容器中

        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.322918|39.927773",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}}

		 ,{title:"涂聚文",content:"涂聚文备注",point:"116.385584|39.904752",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}}

		 ,{title:"保定办事处",content:"我的备注公司在线",point:"115.452784|38.88096",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>

　　

百度地图API自定义地图的更多相关文章

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

    在网页中插入百度地图 如果想在自己的网页上面加入百度地图的话,可以用百度地图的api.具体使用方法如下: 第一步:进入百度创建地图的网站http://api.map.baidu.com/lbsapi/ ...

  2. 如何在网中使用百度地图API自定义个性化地图

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  3. HTM L百度地图API 自定义工具地图实例

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

  4. 关于百度地图API的地图坐标转换问题

    原文:关于百度地图API的地图坐标转换问题 我在之前的文章利用html5获取经纬度并且在百度地图中显示位置中使用了百度地图的API来显示html5获取的地理位置,在文中我说过这样的话,我说百度地图的准 ...

  5. 百度地图API 自定义标注图标

    通过Icon类可实现自定义标注的图标,下面示例通过参数MarkerOptions的icon属性进行设置, 也可以使用marker.setIcon()方法. <script type=" ...

  6. 百度地图api根据地图缩放等级显示不同的marker点，功能二

    功能一里面有marker点后台的代码 根据地图的缩放等级显示不同marker点的坐标JSP代码 <%@ page language="java" contentType=&q ...

  7. HTML5结合百度地图API创建地图应用

    具体的百度地图API的使用方法查看百度地图API里的DEMO <style> #div1{ width:400px; height:400px; border:1px #000 solid ...

  8. js调用百度地图API创建地图，搜索位置

    实现代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <met ...

  9. JavaScript对接百度地图api实现地图标点功能

    粗略的做了个地图标点功能 首先,去百度注册开发者账号,然后进入到百度地图开放平台 进入到控制台, 创建浏览器端应用,给个安全域名 然后去开发者文档JavaScript里面找地图展示文档,直接怼上去就行 ...

随机推荐

  1. Android软件安全开发实践（下）

    Android开发是当前最火的话题之一,但很少有人讨论这个领域的安全问题.本系列将分两期,探讨Android开发中常见的安全隐患和解决方案.第一期将从数据存储.网络通信.密码和认证策略这三个角度,带你 ...

  2. ch4 MySQL 安全管理

    第 4 章 MySQL 安全管理 前言 对于任何一个企业来说,其数据库系统中所保存数据的安全性无疑是非常重要的,尤其是公司的有些商业数据,可能数据就是公司的根本,失去了数据的安全性,可能就是失去了公司 ...

  3. 深圳测试研讨会圆满结束,PPT共享

    深圳测试研讨会圆满结束,PPT共享http://www.automationqa.com/forum.php?mod=viewthread&tid=3417&fromuid=29

  4. 模拟登录神器之PHP基于cURL实现自动模拟登录类

    一.构思 从Firefox浏览器拷贝cURL命令(初始页.提交.提交后) 自动分析curl形成模拟登录代码 默认参数:ssl/302/gzip 二.实现 接口 (一)根据curl信息执行并解析结果 p ...

  5. JIRA数据库切换（HSQL Database到MySQL）

    没试过的版本,但是看着靠谱: 注:如果你之前配置过hsql版本,这次修改mysql数据操作会导致配置数据丢失,所以请注意备份 一. 创建名为jiradb的mysql数据,编码格式为utf-8 二.修改 ...

  6. DMSFrame 之简单用法（二）

    上次说了下DMSFrame的一些查询方式,之前也有好多朋友问了下这个ORM与EF有什么样的区别. 要论区别,我自己也总结了几点.如果有其它朋友知道的,可以回复补充下. 1.不需要编辑的时候需要再次查询 ...

  7. js深拷贝和浅拷贝

    一.数组的深浅拷贝 在使用JavaScript对数组进行操作的时候,我们经常需要将数组进行备份,事实证明如果只是简单的将它赋予其他变量,那么我们只要更改其中的任何一个,然后其他的也会跟着改变,这就导致 ...

  8. Razor 在WebApp 框架的运用

    前面有两章介绍了WebApp框架<WebApp MVC,“不一样”的轻量级互联网应用程序开发框架>和<WebApp MVC 框架的开发细节归纳>,其中视图引擎是用的Nveloc ...

  9. js map

    // js通用方法 // map对象定义 function Map() { var struct = function(key, value) { this.key = key; this.value ...

  10. oracle 语句创建表空间、用户、授权

    /*分为四步 */ /*第1步:创建临时表空间 */ create temporary tablespace yuhang_temp tempfile 'D:\oracledata\yuhang_te ...