您的位置：首页 > Web前端 > HTML5

【探索HTML5第二弹03】走近地图应用的世界，看我们google地图可以看些什么！

2013-05-09 09:31 701 查看

前言

昨天，前天都有一些事情了，自己的学习任务有所耽搁，但这不是主要原因，主要原因是昨天和前天都在搞canvas相关东西，这个东东怎么说呢？我是越搞越不能确定自己是否会用到，所以过程中有点纠结，然后慢慢时间就过去了。另外，我本来想重新学习HTML5的，但是发现在走之前的老路，重复的过程就没必要了，我要从新思考一下最近的学习计划。

最近开始接触了google地图应用，那确实叫一个不错啊！！！可以完成很多事情了，这里用到的是GMaps.js，这里将其简单说下吧！

进入Gmaps的世界

右键菜单

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#map { width: 600px; height: 400px; }

</style>
<script src="js/jquery-1.7.1.js" type="text/javascript"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script src="js/gmaps.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
var path = [];

var map = new GMaps({
el: '#map',
lat: 30.657358499999994,
lng: 104.049977
});

//支持html5
GMaps.geolocate({
success: function (position) {
var lat = position.coords.latitude, lon = position.coords.longitude;
var tmp = [];
tmp.push(lat);
tmp.push(lon);
path.push(tmp);
map.setCenter(lat, lon);
map.addMarker({
lat: 30.657358499999994,
lng: 104.049977,
title: '您的位置',
infoWindow: {
content: '您在这里'
}
});
},
error: function (error) {
alert('Geolocation failed: ' + error.message);
},
not_supported: function () {
alert("Your browser does not support geolocation");
},
always: function () {
}
});

map.setContextMenu({
control: 'map',
options: [{
title: '增加锚点',
name: 'addMarker',
action: function (e) {
this.addMarker({
lat: e.latLng.lat(),
lng: e.latLng.lng(),
title: '新增锚点'
});
this.hideContextMenu();
alert('弹出菜单执行操作');
}
}]

});
});
</script>
</head>
<body>
<input type="text" value="请输入地址" id="address" />
<div id="map">
</div>

</body>
</html>




锚点群

最后，我们来看一个非常有用的功能

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#map { width: 600px; height: 400px; }

</style>
<script src="js/jquery-1.7.1.js" type="text/javascript"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script src="js/gmaps.js" type="text/javascript"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerclusterer/1.0/src/markerclusterer.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var path = [];
var map = new GMaps({
div: '#map',
lat: 30.657358499999994,
lng: 104.049977,
markerClusterer: function (map) {
return new MarkerClusterer(map);
}
});
var lat_span = 30.657358499999994;
var lng_span = 104.049977;
for (var i = 0; i < 100; i++) {
var latitude = Math.random()*0.01  + 30.657358499999994;
var longitude = Math.random()*0.01 + 104.049977;

map.addMarker({
lat: latitude,
lng: longitude,
title: 'Marker #' + i
});
}
});
</script>
</head>
<body>
<input type="text" value="请输入地址" id="address" />
<div id="map">
</div>

</body>
</html>




大家看到了，根据此功能可以完成复杂的应用哦！！！

结语

好了，今天就到这了，经过这次的学习，我想关于地图的应用应该都不在话下了。需要源码直接搜索GMaps.js里面去看吧，我这个都是抄袭哦。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航