关闭

百度地图+Marker纠偏

标签: 百度地图Marker纠偏
1343人阅读 评论(0) 收藏 举报
分类:

百度地图+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>




0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:54457次
    • 积分:913
    • 等级:
    • 排名:千里之外
    • 原创:41篇
    • 转载:1篇
    • 译文:0篇
    • 评论:6条
    文章分类