`

百度地图常用方法

阅读更多

var map = new BMap.Map("container"); // 创建地图实例  
map.addControl(new BMap.NavigationControl());//地图控制插件,该插件可以控制地图的位置地图的显示比例  
map.addControl(new BMap.ScaleControl());//显示在地图下方,告诉你地图上1cm对应的真实距离  
//map.addControl(new BMap.OverviewMapControl());  
map.addControl(new BMap.MapTypeControl());//地图的显示类型:包括地图和卫星

 

map.addControl(new BMap.MapTypeControl({mapTypes: [BMAP_NORMAL_MAP,BMAP_HYBRID_MAP]}));//地图|混合  

 

//创建地图函数:
    function createMap(){
        var map = new BMap.Map("dituContent");//在百度地图容器中创建一个地图
        var point = new BMap.Point(113.263865,23.151257);//定义一个中心点坐标,这里是初始

化要显示的经度和纬度,可到http://openapi.baidu.com/map/createMap.html查看自己要显示的值。
        map.centerAndZoom(point,12);//设定地图的中心点和坐标并将地图显示在地图容器中
        window.map = map;//将map变量存储在全局
    }
   
    //地图事件设置函数:
    function setMapEvent(){
        map.enableDragging();//启用地图拖拽事件,默认启用(可不写)
        map.enableScrollWheelZoom();//启用地图滚轮放大缩小
        map.enableDoubleClickZoom();//启用鼠标双击放大,默认启用(可不写)
        map.enableKeyboard();//启用键盘上下左右键移动地图
    }

 

// 编写自定义函数,创建标注:
    function addMarker(point, index) {
        var myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png", new BMap.Size(23, 25), {
            offset: new BMap.Size(10, 25),                  // 指定定位位置
            imageOffset: new BMap.Size(0, 0 - index * 25)   // 设置图片偏移
        });
        var marker = new BMap.Marker(point, { icon: myIcon });
        map.addOverlay(marker);
    }

 

//添加覆盖物:

 

//添加覆盖物
function addCoverObj(obj,flag){
	var gc = new BMap.Geocoder();
	var iconImg= new BMap.Icon("http://api.map.baidu.com/img/markers.png", new 

BMap.Size(23, 25), {
	offset: new BMap.Size(10, 25),                  // 指定定位位置
	imageOffset: new BMap.Size(0, 0 - index * 25)   // 设置图片偏移
});
	var mypoint=new BMap.Point(obj.longitude_point, obj.dimensionality_point);
	allpoints.push(mypoint);
	var marker = new BMap.Marker(mypoint,{icon:iconImg});
	var label = new BMap.Label(obj.car_num,{"offset":new BMap.Size(15,-15)});
	label.setStyle({ //给label设置样式,任意的CSS都是可以的
		//fontSize:"14px", //字号
		border:"0", //边
		height:"23px", //高度
		width:"72px", //宽
		textAlign:"center", //文字水平居中显示
		lineHeight:"23px", //行高,文字垂直居中显示
		background:"url(../images/mapicon/y_bg.png) no-repeat" //背景图片,这是房

产标注的关键!
		//cursor:"pointer"
	});
	label.setStyle({"padding": "2px"});
	// 如果子节点存在且数量大于1的显示数字
	if(obj.count&&obj.count>0) {
		var cids = obj.childrenIds;
		if(flag==1){//运输公司
			label = new BMap.Label(("<b><a style='text-decoration: none' 

href='javascript:void(0);' onclick='getCarListInRange("+obj.company_id+",

\""+obj.company_name+"\",\""+cids+"\")'>&nbsp;&nbsp;"+(obj.count

+1)+"&nbsp;&nbsp;</a></b>"),{"offset":new BMap.Size(25,-25)});
		}else if(flag==2){//建筑工地
			label = new BMap.Label(("<b><a style='text-decoration: none' 

href='javascript:void(0);' onclick='getCarListInBSRange(\""+cids

+"\")'>&nbsp;&nbsp;"+(obj.count+1)+"&nbsp;&nbsp;</a></b>"),{"offset":new BMap.Size(25,-

25)});
		}else if(flag==3){//运行车辆
			label = new BMap.Label(("<b><a style='text-decoration: none' 

href='javascript:void(0);' onclick='getCarListOnLineRange(\""+cids

+"\")'>&nbsp;&nbsp;"+(obj.count+1)+"&nbsp;&nbsp;</a></b>"),{"offset":new BMap.Size(25,-

25)});
		}
		label.setStyle({ //给label设置样式,任意的CSS都是可以的
			//fontSize:"14px", //字号
			border:"0", //边
			height:"33px", //高度
			width:"37px", //宽
			textAlign:"center", //文字水平居中显示
			lineHeight:"33px", //行高,文字垂直居中显示
			background:"url(../images/mapicon/y.png) no-repeat" //背景图片,

这是房产标注的关键!
			//cursor:"pointer"
		});
	}
	//添加车牌标签
	marker.setLabel(label);
	label.setStyle({
		borderColor:"#808080",
		color:"#333"
		//cursor:"pointer"
	});
	//添加监听
	if(!obj.count||obj.count==0) {
		marker.addEventListener("click",function(){
			//this.openInfoWindow(createInfoWindow(obj));
			// 存在子节点,显示列表(可链接到其他节点)
			//获取地址信息
			gc.getLocation(mypoint, function(rs){
				showLocationInfo(marker,obj,rs);
			});
		});
	}
	//将标注添加到地图上
	map.addOverlay(marker);
} 
 

 

地图常用组件:

<script type="text/javascript">
var map = new BMap.Map("milkMap"); // 创建地图实例
var point = new BMap.Point(116.404, 39.915); // 创建点坐标
map.centerAndZoom(point, 16); // 初始化地图,设置中心点坐标和地图级别

map.addControl(new BMap.OverviewMapControl({isOpen:1})); //为地图添加鹰眼

//map.addControl(new BMap.NavigationControl()); //为地图添加鱼骨(默认)
map.addControl(new BMap.NavigationControl({type: BMAP_NAVIGATION_CONTROL_SMALL})); //为地图添加鱼骨(迷你型)

//map.addControl(new BMap.ScaleControl()); //添加一个带上偏移量的比例尺 
map.addControl(new BMap.ScaleControl({offset: new BMap.Size(5, 40)})); //添加一个带上偏移量的比例尺 

map.addControl(new BMap.MapTypeControl()); //为地图添加2D3D切换控件
map.setCurrentCity("北京"); // 仅当设置城市信息时,MapTypeControl的切换功能才能可用

var myCopyright = new BMap.CopyrightControl({offset: new BMap.Size(82, 0)}) //设置版权信息偏移量
map.addControl(myCopyright); //为地图添加版权控件 
myCopyright.addCopyright({id : 1, content : '<a style="line-height:30px;height:30px;display:block;color:red;background:yellow" href="http://www.cnblogs.com/milkmap/"><img src="http://www.ui-love.com/static/img/uiico.ico" />酸奶小妹的博客园</a>'});
</script>

 

分享到:
评论

相关推荐

    Html5如何唤起百度地图App的方法

    它们是检测Web应用是否处于后台的常用方法。`document.webkitHidden`是针对旧版本的WebKit浏览器的一个兼容性写法。 为了应对不同平台之间的差异,文档中还展示了根据用户设备平台进行条件判断的代码片段。在...

    2种在vue项目中使用百度地图的简单方法.docx

    Vue 项目中使用百度地图的两种方法 在 Vue 项目中使用百度地图是非常常见的需求,特别是在开发移动应用或 web 应用时需要展示地图信息。今天,我们将介绍两种在 Vue 项目中使用百度地图的简单方法。 方法一:引入...

    高德地图常用方法封装

    "高德地图常用方法封装"是一个关于如何高效地利用高德地图JavaScript API进行开发的实践项目,通常包括对地图初始化、标记、信息窗口、路径规划、地理编码、事件监听等常见功能的封装,以提高代码复用性和易维护性。...

    老罗android 百度地图开发源码

    在Android开发中,百度地图API是一个非常常用的工具,它提供了丰富的地图展示、定位、路径规划等功能,极大地便利了开发者在构建地理位置相关应用时的工作。"老罗android 百度地图开发源码"是一个示例项目,它展示了...

    百度地图API实现热力地图

    在本教程中,我们将深入探讨如何使用Python编程语言结合百度地图API来实现热力地图的绘制。热力地图是一种有效的数据可视化工具,它通过颜色的深浅来展示特定区域的密度或活动强度,通常用于展示人口分布、交通流量...

    前端基于百度地图插件

    百度地图API为开发者提供了丰富的功能,可以方便地将其嵌入到Web应用中,实现地图的显示、标注、路线规划等操作。本文将深入探讨如何在前端项目中基于百度地图插件进行开发,以及如何配置地图周围环境。 首先,我们...

    百度地图开发AK密钥

    在IT行业中,尤其是在开发基于位置服务(LBS, Location-Based Services)的应用时,百度地图API是一个常用且重要的工具。这个工具允许开发者集成地图、导航、定位等功能到自己的应用程序中。"百度地图开发AK密钥"是...

    百度地图开发代码集合(标注、坐标、右键菜单、常用功能)

    同时,百度地图API预设了一些常用的控件,如缩放工具、比例尺、指南针等,可以直接引用。 在**画多边形**方面,百度地图API提供了Polygon和Polyline对象,用于绘制多边形和线段。这在地理数据分析、区域划分、路径...

    百度地图JavaScriptAPI离线版本.zip

    6. **开发实践**:使用这个离线包,开发者可以学习如何在Vue项目中引入和使用百度地图API,进行地图应用的开发,例如结合Vue的生命周期方法来控制地图的加载和显示。 7. **离线应用优化**:通过预先下载瓦片图,...

    百度地图自定义标注

    在IT行业中,地图应用是日常生活中不可或缺的一部分,而百度地图作为国内主流的地图服务提供商,提供了丰富的API和功能供开发者使用。本话题将深入探讨“百度地图自定义标注”这一技术,以及如何实现手动定位功能。 ...

    百度地图3.0自定义缩放按钮

    在Android开发中,百度地图API是一个非常常用的工具,它提供了丰富的地图展示和地理位置服务功能。在标题"百度地图3.0自定义缩放按钮"中,我们关注的是如何个性化地图应用,具体来说就是如何替换百度地图SDK默认的...

    百度地图离线函数API

    4. **其他常用函数**:除了基本的地图操作,百度地图API还提供了许多其他功能,如标注、信息窗口、自定义图层等。例如,添加一个标注: ```javascript var marker = new BMap.Marker(new BMap.Point(116.404, 39....

    百度地图覆盖物

    在Android开发中,百度地图SDK是一个非常常用的工具,它提供了丰富的地图功能,使得开发者能够轻松地在应用中集成地图服务。本次我们关注的是"百度地图覆盖物"这一主题,这涉及到百度地图SDK中的一个重要概念——...

    WinForm下实现GMAP调用高德、百度地图

    在本文中,我们将深入探讨如何在WinForm应用程序中集成GMAP来调用高德和百度地图服务。这个项目提供了一个完整的工程示例,方便开发者直接使用,而不只是孤立的.cs代码文件。虽然百度地图坐标转换可能存在一些问题,...

    流域kml解析,高德地图、百度地图等进行展示。

    在IT行业中,地理信息系统(GIS)是处理地理位置信息的关键技术,而KML(Keyhole Markup Language)文件则是其中一种常用的数据格式,尤其在谷歌地球、高德地图和百度地图等平台中广泛使用。本篇文章将深入探讨流域...

    百度地图api 地图api 实例

    本文将深入探讨“百度地图API”及其在实际应用中的示例。 百度地图API是百度提供的一项服务,它允许开发者通过编程方式访问和操作地图数据,包括但不限于定位、地图展示、路径规划、地理编码、信息窗口、自定义图层...

    百度离线地图离线资源包(包含地图瓦片下载器)

    本资源包“百度离线地图离线资源包(包含地图瓦片下载器)”正是为了帮助用户在无网络连接的情况下也能使用百度地图。这个资源包包括了“全能地图下载器-MapTileDownloader”和“static”两个关键部分,下面我们将...

    百度地图(GOOGLE地图)转换成TAB图层方法.docx

    在这一背景下,将百度地图或GOOGLE地图转换成GIS软件可识别的TAB图层文件的方法显得尤为重要。本文将详细探讨这一转换过程,以及它在各个领域的应用价值。 首先,我们要了解TAB图层文件。TAB文件是一种GIS常用的...

Global site tag (gtag.js) - Google Analytics