谷歌地图插件Mapsed.js

jerry JQuery 2015年08月20日收藏

我们在一些WEB项目中需要应用简单的地图，而且最好是可以自定义标注地点，最好是可以从本地数据库中读取并在地图上展示地点，那么谷歌地图插件Mapsed.js是比较好的选择，使用起来简单，无需注册地图接口之类的复杂过程，就能轻松的在网页上展示地图效果。

Mappy.js 是一款基于jQuery的地图插件，我们来看下如何使用它。

准备工作

首先需要将必要的js和css文件加载到html页面，当然这些文件在我们提供的下载包里已经打包好，请放心下载使用。


<script src="com/maps/api/js?libraries=places&sensor=false"></script>
<script src="jquery-1.10.2.js"></script>
<script src="mapsed.js"></script>
<link href="mapsed.css" rel="stylesheet">

加载地点数据

首先我们要在html中放置一个div用作地图容器，我们可以在css中定义容器的高度和宽度。


<div id="custom_places" class="maps"></div>

现在需要调用google地图，并且把具体的地点位置也显示在地图上面，mapsed.js提供了很多接口。showOnLoad：即加载显示数据，json格式，我们可以从数据库中读取然后通过程序转换成json格式即可，本文不涉及数据库，有兴趣的朋友可以自己动手试下。参数autoShow：是否自动显示，lat：纬度，lng：经度，name：名称，street：街区说明信息，userData：数据id。


$(function(){
	$("#custom_places").mapsed({
		showOnLoad: 	
		[
			{
				autoShow: true,
				lat: 22.540053,
				lng: 113.983225,
				name: "欢乐谷",
				street: "参与性、观赏性、娱乐性、趣味性现代主题乐园。",
				userData: 1
			},
			{
				autoShow: true,
				lat: 22.536113,
				lng: 113.972569,
				name: "世界之窗",
				street: "荟萃世界几千年人类文明精华，历史遗迹、名胜、自然风光、世界奇观！",
				userData: 2
			},
			{
				autoShow: true,
				//canEdit: false,
				lat: 22.530041,
				lng: 113.982479,
				name: "锦绣中华民俗文化村",
				street: "邀你遨游最美赛花节！",
				userData: 3
			}
		]
		
	});	
});

标注地点

加载地图后，我们想在地图中标注地点，只需要在地图右上角点击+号，然后定位移动地图中的气泡锚点，点击可以弹出表单输入，输入信息后即可保存，当然你可以通过接口将数据写入数据库中。


<div id="add_places" class="maps"></div>

将allowAdd设置为true即允许添加标注地点，这时地图右上角会出现一个+号。onSave回调函数即点击保存时需要做的事情。


$(function(){
	$("#add_places").mapsed({
		allowAdd: true,
		onSave: function(m, newPlace) {
			var missing = [];
			
			// detect errors starting at bottom
			// ... we only have space for one error at a time, so this way we'll report 
			// ... from the top down
			if (newPlace.postCode === "") missing.push("postcode");
			if (newPlace.street === "")   missing.push("street");
			if (newPlace.name === "")     missing.push("name");
			
			// anything missing?
			if (missing.length > 0) {
				// return the error message so the callback doesn't progress
				return "Required: " + missing.join();
			}
			
			if (newPlace) {
				if (newPlace.markerType == "new") {
					// simulate a primary key being save to a db
					newPlace.userData = parseInt(Math.random() * 100000);
					var n_name = newPlace.name;
					var n_street = newPlace.street;
					var n_postCode = newPlace.postCode;
					
					$.post('do.php',{name:n_name,street:n_street,postcode:n_postCode},function(msg){
						alert(msg);
					});
				}
			}
		
			// indicate form was OK and saved
			return "";
		},
		
		showOnLoad: [
			{
				autoShow: false,
				//canEdit: false,,
				lat: 22.530041,
				lng: 113.982479
			}
		]
	});
});

搜索地点

地图搜索功能当然是必不可少的，在你的地图中加入一个搜索条那是相当酷的。


<div id="search_places" class="maps"></div>

searchOptions可以设置搜索的相关参数，其中enabled是开启搜索条，initSearch是初始搜索内容，placeholder是如果未设置初始内容，则显示placeholder内容。


$(function(){
	$("#search_places").mapsed({
		searchOptions: {
    		enabled: true,
    		initSearch: "深圳世界之窗",
    		placeholder: "搜索 ..."
  		}
	});
});