百度地图+Marker纠偏

原创 2015年07月07日 19:05:29

百度地图+Marker纠偏


<!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=UTF-8" />
<title>百度地图+Marker纠偏</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>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></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(120.791737, 41.488709);//定义一个中心点坐标
		map.centerAndZoom(point, 7);//设定地图的中心点和坐标并将地图显示在地图容器中
		window.map = map;//将map变量存储在全局
	}

	//地图事件设置函数:
	function setMapEvent() {
		map.disableDragging();//禁用地图拖拽事件
		map.disableScrollWheelZoom();//禁用地图滚轮放大缩小,默认禁用(可不写)
		map.disableDoubleClickZoom();//禁用鼠标双击放大
		map.disableKeyboard();//禁用键盘上下左右键移动地图,默认禁用(可不写)
	}

	//地图控件添加函数:
	function addMapControl() {
	}

	//标注点数组
	var markerArr = {
		title : "标记",
		content : "备注",
		point : "116.606352|40.513056",
		isOpen : 0,
		icon : {
			w : 21,
			h : 21,
			l : 0,
			t : 0,
			x : 6,
			lb : 5
		}
	};
	//创建marker
	function addMarker() {
		var json = markerArr;
		var p0 = json.point.split("|")[0];
		var p1 = json.point.split("|")[1];

		//GPS数据偏移校正
		var transportApiUrl = "http://api.zdoz.net/transgpsbd.aspx?lat=" + p1
				+ "&lng=" + p0;

		$.ajax({
			url : transportApiUrl,
			type : 'GET',
			dataType : 'JSONP',
			success : function(data) {
				if (data) {

					var point = new BMap.Point(data.Lng, data.Lat);
					var iconImg = createIcon(json.icon);
					var marker = new BMap.Marker(point, {
						icon : iconImg
					});
					var iw = createInfoWindow();
					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 _iw = createInfoWindow();
						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() {
		var json = markerArr;
		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>




提供一个谷歌(腾讯)、百度地图纠偏数据库

免费提供百度、谷歌、腾讯地图纠偏本地数据库
  • gatr
  • gatr
  • 2014年05月26日 17:16
  • 11288

百度地图纠偏接口

国内的各种在线地图都根据国家测绘局标准统一对经纬度作了纠偏处理,而百度地图在这个基础上用自己的算法做了二次纠偏。 百度地图纠偏接口如下: http://api.map.baidu.com/...

百度地图经纬度Web纠偏

众所周知,国内的各种在线地图都根据国家测绘局标准统一对经纬度作了纠偏处理,而百度地图在这个基础上用自己的算法做了二次纠偏。 百度地图纠偏接口如下: http://api.map.baidu...

巧妙解决百度地图加偏纠偏问题

转 http://blog.csdn.net/gatr/article/details/9569189 丽水市汽车运输集团股份有限公司信息中心苟安廷   当我们兴匆匆地把GPS设备传来的...

Android百度地图(四):百度地图运动轨迹纠偏、去噪、绑路之百度鹰眼

上一篇文章介绍了地图画轨迹的基本原理和实现。不难发现,当位置处于建筑物密集区、桥梁、高架桥下,gps信号较差时,画出来的轨迹效果会比较差。即使是在空旷地带,也难免会出现gps漂移的情况而造成轨迹的偏差...

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

关于百度地图偏移的问题

转自:http://www.cnblogs.com/0banana0/archive/2013/10/29/3395108.html

百度地图坐标偏移的纠正

百度地图坐标偏移的纠正 1. 问题 在使用百度地图开发时,输入经纬度 (用google earth或GPS设备得到) ,会发现坐标显示位置偏移。 比如,已知东北师范大学经纬度 125...

百度地图离线API2.0(含示例,可完全断网访问)

自己改的百度离线地图API2.0,目前发现的bug是无鹰眼图,不影响具体开发使用,不联网也可以使用该API开发,但需要自己下载瓦片,博客文章中会讲到如何将谷哥的瓦片转换为百度瓦片,有需要的朋友可以参考...

解决Android使用百度定位坐标显示到地图上偏移过大问题

解决方案来源 http://www.oschina.net/code/snippet_260395_39205 原文是PHP和js的代码 采用java代码解决办法如下 private La...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:百度地图+Marker纠偏
举报原因:
原因补充:

(最多只允许输入30个字)