谷歌地图插件Mapsed.js使用例子

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

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

代码如下	复制代码

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

现在需要调用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             }         ]              });     });

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

代码如下	复制代码

将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             }         ]     }); });

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

代码如下	复制代码

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

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

mapsed.js还提供了很多google地图相关的功能和接口，本文只做简单介绍，如果你觉得mapsed.js对你的项目有用，并且打算使用它