HTML5赋予Web开发人员更加强大的能力。其中的GeoLocation属性,可以让开发人员非常方便地获取用户的地理位置。结合Google Maps提供的API,就可以直观地在地图上将用户的位置标注出来。
今天带来的是我和Aj同学(博客)几个月前完成的一个小游戏。手机用户直接访问网址,即可参与该游戏。该游戏取材于经典的吃豆人游戏(Pac Man),所不同的是,玩家需要移动自己的真实的地理位置才能移动游戏中角色的位置。该游戏也支持多人对战,不同的玩家分别扮演吃豆人和鬼。
游戏的后端使用的是GAE。
先看模拟器上的截图:
1. 房间列表(index)
2. 创建游戏
3. 游戏进行中
现将开发中的一些心得,尤其是关于前端实现的心得,总结一下,以作抛砖引玉之用。
1. 如何自定义地图样式。
为了尽可能地和原作贴合,我们需要将地图绘制成黑底蓝条的模样,黑色代表可以通行的部分,蓝条代表“墙”或边界。所幸的是google maps已经提供给我们这个方法:
// 自定义地图样式,注意先后顺序不能调换
var stylez = [
{
featureType: "all",
stylers: [
{ hue: "#0000ff" },
{ saturation: 100 },
{ lightness: -40}
]
},
{
featureType: "road",
stylers: [
{ hue: "#000000" },
{ saturation: 75 },
{ lightness: -100}
]
}
];
var styledMapOptions = {
name: "Pac Man"
};
// 设置地图类型
var PacManMapType = new google.maps.StyledMapType(stylez, styledMapOptions);
map.mapTypes.set(MY_MAPTYPE_ID, PacManMapType);
2. 如何获取玩家位置并显示在地图上
// 获取用户位置
navigator.geolocation.getCurrentPosition(function(position) {
lastPos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
map.setCenter(lastPos);
// 初始化地标
origin = new google.maps.Marker({
position: lastPos,
map: map,
draggable: true
});
addMarkerClickListener(origin, messages.prefix_ori);
google.maps.event.trigger(origin, 'click');
}, function() {
alert(messages.geoservice_failed);
});
那么如何做到实时更新用户的位置呢,也非常简单:
// 监听用户位置
navigator.geolocation.watchPosition(function(position) {
// 上传最新位置,不做任何事
var curPos=new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var data='roomName='+roomInfo.roomName+'&location='+curPos.toUrlValue()+'&userName='+roomInfo.me;
Ajax.post('updatelocation', data, function(){});
}, function() {
alert(messages.geoservice_failed);
}, positionOptions);
每当用户位置发生改变时,watchPosition将会被自动回调。
3. 如何在用户选定的出发点和目的地间均匀的绘制豆子。
// 绘制豆子
function drawBeans(){
// 自定义地标图形
var image = new google.maps.MarkerImage('./bean.png', null, null, new google.maps.Point(5, 5));
var overview_path=directionsDisplay.getDirections().routes[0].overview_path;
// 绘制豆子地标
for(var i=1; i!=overview_path.length; ++i){
var prev=overview_path[i-1];
var next=overview_path[i];
// 该路段的豆子数目,约数
var count=Math.round(calcDistance(prev, next)/beanSpacing);
for(var j=0; j!=count; ++j){
var lat=prev.lat()+(next.lat()-prev.lat())*j/count;
var lng=prev.lng()+(next.lng()-prev.lng())*j/count;
var position = new google.maps.LatLng(lat, lng);
var isExisted=false;
for(var k=0; k!=beans.length; ++k){
if(position.equals(beans[k].getPosition())){
isExisted=true;
break;
}
}
if(!isExisted){
var bean=new google.maps.Marker({
position: position,
map: map,
icon: image
});
beans.push(bean);
}
}
}
overview_path是路线的一个属性。之所以使用routes[0],是因为同一个起点和终点间往往可能有不同的路径,通过下标指定为首选的那条路径。overview_path是一个数组,每个元素代表着该路径中的一个拐点,绘制路线其实就是将这些拐点连接起来。
然后,我们通过calcDistance函数计算前后拐点的距离,用这个值除以放置豆子的固定距离值,就可以得到该路段该绘制多少颗豆子,然后依次将这些豆子排布在拐点之间的连线上即可。
那么如何计算拐点间的距离呢?calcDistance的代码如下:
// 计算给定的两个latLng对象之间的距离, 返回单位为米
function calcDistance(pos1, pos2) {
lat1=pos1.lat();
lon1=pos1.lng();
lat2=pos2.lat();
lon2=pos2.lng();
// m (change this constant to get km/miles etc.)
var R = 6371 *1000;
var dLat = (lat2-lat1) * Math.PI / 180;
var dLon = (lon2-lon1) * Math.PI / 180;
var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
Math.cos(lat1 * Math.PI / 180 ) * Math.cos(lat2 * Math.PI / 180 ) *
Math.sin(dLon/2) * Math.sin(dLon/2);
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
var d = R * c;
return Math.round(d);
}
这里涉及到了一些地理和立体几何知识。当然,得到的只是一个近似值。
4. 玩家状态的实时交互
很遗憾的是,这里使用的是Ajax轮询机制。Ajax工具代码如下,很简单:
Ajax={
callback: null,
url: null,
ajaxErrorHandler: function(status, msg){
alert('ajax failed due to '+status+' when fetch '+this.url);
},
get: function(url, func){
this.url=url;
this.callback=func;
xmlhttp.open("GET", ajaxBaseUrl+url, true);
xmlhttp.send();
},
post: function(url, data, func){
this.url=url;
this.callback=func;
xmlhttp.open("POST", ajaxBaseUrl+url, true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send(data);
}
}
Aj同学做的关于websocket的毕设可以很好地解决实时性的问题。当然,还有诸如pushlet等替代技术,我们自己也没有实现,这里就不铺开讲述了。
最后,附上真机调试图和源代码,欢迎探讨。
测试设备是Hegar同学(博客)的moto defy。
- 大小: 49.4 KB
- 大小: 61 KB
- 大小: 8.4 KB
- 大小: 33.5 KB
- 大小: 20.2 KB
分享到:
相关推荐
这篇文档将深入探讨如何使用Google Maps API来开发LBS应用,以及在Android平台上实现这一过程。 首先,我们需要理解Google Maps API的基本概念。Google Maps API是一组用于构建地图应用的接口,它提供了丰富的功能...
结合“简洁”这一特点,我们可以推断该模板旨在为开发者提供一个易用、高效且设计简约的起点,便于快速构建LBS相关的Web应用。 模板在网页设计中扮演着至关重要的角色,它能帮助开发者快速构建出符合用户体验和功能...
此外,为了提升用户体验,LBS网站系统可能还集成了地图API,如Google Maps或百度地图,通过API接口获取地图数据,展示用户的位置信息,提供地图导航等功能。同时,系统可能还包含了权限控制、评论系统、搜索功能等...
开发过程中,开发者可能会利用HTML、CSS、JavaScript等技术,以及地图API(如Google Maps API)来实现位置相关功能。同时,为了保证跨设备的兼容性,响应式设计是必不可少的。项目中的各个文件则涵盖了整个网站的...
通过对“lbs.rar”中的“itcast-lbs”项目深入研究,我们可以学习到LBS应用的开发流程,理解如何集成和使用定位服务,以及如何构建一个完整的LBS应用。这不仅有助于提升我们的编程技能,还能让我们了解到位置服务在...
HTML5在LBS社区中的应用主要集中在利用其增强的特性来构建地理位置服务、提升移动应用的性能和用户体验。HTML5的GeoLocation API是LBS(Location-Based Services,基于位置的服务)社区的重要基石,它允许网页应用...
1. 地图集成:通过API(如Google Maps或高德地图)集成,展示地理位置并提供导航。 2. 搜索和过滤:用户可以按照地点、类型、评价等条件搜索和筛选场所。 3. 信息详情页:每个场所都有详细的介绍页面,包括图片、...
3. **地图API**:Google Maps API、高德地图API、百度地图API等提供了地图展示、路线规划、定位等功能,是开发LBS应用的基础。 4. **网页模板**:网页模板是预先设计好的网页布局和样式,可以帮助开发者快速创建...
然后,在AndroidManifest.xml文件中添加相应的权限,如访问互联网和使用Google Maps服务。接着,在布局文件中插入MapView控件,并在代码中初始化地图,设置地图类型、缩放级别等。 地图签到功能是LBS应用的常见应用...
4. **API集成**:为了实现LBS功能,开发者通常需要集成地图API,如Google Maps API、高德地图API等,这些API提供了定位、路线规划和地图展示等接口。 5. **用户隐私保护**:LBS服务涉及到用户的地理位置信息,因此...
主流的地图服务提供商如Google Maps、高德地图和百度地图都提供了丰富的API,允许开发者在应用中集成地图显示、路径规划、地理编码(将地址转化为坐标)和反地理编码(将坐标转化为地址)等功能。学习如何有效利用...
本书详细阐述了如何使用HTML5提供的Geolocation API获取当前位置信息,并结合Google Maps API等第三方服务绘制地图、添加标记点等操作。 ### WebSockets实时通信技术 针对传统HTTP请求模式下难以实现实时双向数据...
【基于LBS服务的社交软件源码】是一个适合Android初学者学习的项目,它结合了地理位置服务(Location-Based Services,LBS)与社交功能,帮助开发者理解和构建具有实时位置分享和社交互动的应用。在这个项目中,你...
2. **地图集成**:lbs应用往往需要显示地图,这需要集成如Google Maps、高德地图或百度地图等地图服务的SDK。代码中可能包括地图的加载、缩放、平移、标注点的添加等功能。 3. **地理编码与反地理编码**:将地址...
2. **响应式设计**:考虑到网页模板的跨平台使用,LBS^2 heibai可能采用了响应式布局,适应不同设备的屏幕大小,如手机、平板和电脑。 3. **交互性**:为了提供良好的用户体验,模板可能包含交互式的地图元素,让...
4. **地图API集成**:可能使用Google Maps API或其他类似服务,将地图功能嵌入到网页中。 5. **响应式设计**:确保模板在不同设备(如手机、平板电脑、桌面电脑)上都能良好显示。 6. **SEO优化**:为了提高搜索引擎...
2. **地图API**:实现LBS功能的关键是地图API,如Google Maps API、高德地图API等,它们提供了地图显示、定位、路径规划等功能接口。 3. **网页模板**:网页模板简化了网站设计流程,包含预先设计的布局、颜色方案...
4. **地图集成**:使用如Google Maps或高德地图等API,将地图功能整合进网页,可实现定位、导航、兴趣点搜索等功能。 5. **定位功能**:通过浏览器的Geolocation API获取用户的地理位置,为用户提供基于当前位置的...
2. **Web开发**:学习HTML、CSS和JavaScript等前端技术,以及如何将LBS功能集成到网页中,如地图API的使用(如Google Maps API、高德地图API等)。 3. **网页模板设计**:了解网页模板的结构和设计原则,包括响应式...