为了更好的提升用户体验,移动端逐渐出了许多的移动端的框架,比如Sencha Touch、JQTouch、Jquery-moblie、jqMobi等等。这些框架都有优缺点,不同的框架应用在不同的项目中。现简单阐述一下各框架的优缺点: 一、Sencha Touch框架是一个重量级的框架、它上手较难,代码复杂,并且需要较强的程序基础才能学习,最开始的时候因为一个项目,想使用Sencha Touch框架,后来工期实在太紧张,根本没时间学习它并使用。所以最后转投其他框架。这个框架兼容性很高,运行起来的速度一般,需要长时间的学习且需要水平较高的程序基础才行。所以不太适合前端制作人员的使用。我会在以后的机会单开一篇关于它的使用demo。 二、JQTouch是一个轻量级框架、纯jquery写法,上手比较容易,代码容易理解,加载速度也很快,缺点是配合的移动端效果插件较少,需要很多外部的插件相结合,另外,个别插件还需要解决与框架之间的兼容问题。它的最大的一个弊端就是可利用和变通的布局较少。 三、Jquery-moblie也是一个轻量级框架、纯jquery写法,上手容易,代码容易理解,但由于其绑定的前端效果插件过多,且代码结构有些臃 肿,造成加载速度很慢。尤其是在android系统上测试,速度很慢。用户体验效果不太好,它比较适合开发IPAD或是IOS系统的高端机型。 四、jqMobi也是一个轻量级框架、它的语言基于jquery语言。并对其进行了简化,更有利于在移动设备上进行应用,并且速度很流畅。上手也比较容…
谷歌地图插件Mapsed.js
我们在一些WEB项目中需要应用简单的地图,而且最好是可以自定义标注地点,最好是可以从本地数据库中读取并在地图上展示地点,那么谷歌地图插件Mapsed.js是比较好的选择,使用起来简单,无需注册地图接口之类的复杂过程,就能轻松的在网页上展示地图效果。
Mappy.js 是一款基于jQuery的地图插件,我们来看下如何使用它。
准备工作
首先需要将必要的js和css文件加载到html页面,当然这些文件在我们提供的下载包里已经打包好,请放心下载使用。
<script src="http://maps.googleapis.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 } ] }); });
标注地点
加载地图后,我们想在地图中标注地点,只需要在地图右上角点击+号,然后定位移动地图中的气泡锚点,点击可以弹出表单输入,输入信息后即可保存,当然你可以通过接口将数据写入数据库中。
<code class="html"><div id="add_places" class="maps"></div> </code>
将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: "搜索 ..." } }); });
mapsed.js还提供了很多google地图相关的功能和接口,本文只做简单介绍,如果你觉得mapsed.js对你的项目有用,并且打算使用它,那么请移步官方教程:https://github.com/toepoke/mapsed/blob/master/README.md