jQuery百度地图单点标注

一款jQuery百度地图单点标注的特效，演示里给出了比较详细的参数说明：包括：坐标、标题、内容、缩放级别等，这样更容易集成到自己的项目中，喜欢的童鞋请收下吧。

分类：统计图 > 地图难易：初级

查看演示下载资源下载积分： 20 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

页面的head部分，需要接入地图的api，引入jQuery库和地图插件，代码如下：

<script src="http://api.map.baidu.com/api?v=2.0&ak=A1LU7iHS0avqQwPLAxbhKn0UYSQCuRVH"></script>
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="js/jquery.baiduMap.min.js"></script>

页面的body部分，一个div容器放地图，紧随其后的是参数说明，代码如下：

<div class="left">
	<div id="container1" class="container"></div>
	<p class="info">实例参数</p>
	<pre>
		new BaiduMap({
			id: "container1",
			title: {
				text: "北京故宫博物院",
				className: "title"
			},
			content: {
				className: "content",
				text: ["地址：北京市东城区东华门大街", "电话：(010)65131892"]
			},
			point: {
				lng: "116.412222",
				lat: "39.912345"
			}
		});	
	</pre>
</div>
<div class="right">
	<div id="container2" class="container"></div>
	<p class="info">实例参数</p>
	<pre>
	   new BaiduMap({
			id: "container2",
			title: {
				text: "北京故宫博物院",
				className: "title"// 选填--样式类名
			},
			content: {
				className: "content",// 选填--样式类名
				text: ["地址：北京市东城区东华门大街", "电话：(010)65131892"]
			},
			point: {
				lng: "116.412222",
				lat: "39.912345"
			},
			level: 15,//  选填--地图级别--(默认15)
			type: true,// 选填--是否显示地图类型--(默认false)
			width: 320,// 选填--信息窗口width--(默认自动调整)
			height: 70,// 选填--信息窗口height--(默认自动调整)
			icon: {    // 选填--自定义icon图标
				url: "img/icon.png",
				width: 36,
				height: 36
			}
	 });
	</pre>
</div>

页面的底部启用地图，并设置好各种参数，代码如下：

new BaiduMap({
		id: "container1",
		title: {
			text: "北京故宫博物院",
			className: "title"
		},
		content: {
			className: "content",
			text: ["地址：北京市东城区东华门大街", "电话：(010)65131892"]
		},
		point: {
			lng: "116.412222",
			lat: "39.912345"
		}
	});

	new BaiduMap({
		id: "container2",
		title: {
			text: "北京故宫博物院",
			className: "title"
		},
		content: {
			className: "content",
			text: ["地址：北京市东城区东华门大街", "电话：(010)65131892"]
		},
		point: {
			lng: "116.412222",
			lat: "39.912345"
		},
		level: 15,
		type: true,
		width: 320,
		height: 70,
		icon: {
			url: "img/icon.png",
			width: 36,
			height: 36
		}
	});