google map api 与jquery结合使用--控件,监听器
2010-09-14 13:29:45 来源:WEB开发网(2)输入对应的地址查看,等上4秒钟,就可以看到地图的中心移动到中国的西部(大概的位置):
地图中心移动到中国的西部
添加控件并修改地图类型
修改javascript代码如下:
map.js
$(document).ready(function()
{
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
//小型伸缩控制器
map.addControl(new GSmallMapControl());
//地图类型控制器
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(36.94,106.08),4);
//将地图设置为卫星地图
map.setMapType(G_SATELLITE_MAP);//修改地图类型
$(window).unload(function (){
$('.').unbind();
GUnload();
});
}else
{
alert('你使用的浏览器不支持 Google Map!');
}
});
刷新页面,看到的效果是卫星地图的左上角有一个小的伸缩控件,右上角是地图选择的控件
加入控件后的效果图
添加事件监听器并开启滚轮伸缩效果
修改javascript代码:
map.js
$(document).ready(function()
{
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
//开启滚轮伸缩效果--鼠标滚轮向前滚放大地图,反之缩小
map.enableScrollWheelZoom();
//添加moveend事件监听器
GEvent.addListener(map, "moveend", function() {
var center = map.getCenter();
//在这个DIV中显示地图中心的经纬度
$('#message').text(center.toString());
});
map.setCenter(new GLatLng(36.94,106.08),4);
$(window).unload(function (){
$('.').unbind();
GUnload();
});
}else
{
alert('你使用的浏览器不支持 Google Map!');
}
});
此时的地图在滚动滚轮的时候会发生伸缩,而拖动完地图后,地图左侧的坐标信息会跟着变。
- ››Google运作经理Bryan Power给出的GOOGLE求职意见
- ››Google用户体验的十大设计原则
- ››Google Analytics(分析)能为网站带来什么
- ››Google goggles图片搜索 如何优化一个wap网站
- ››Google Docs将增加iPhone和Android编辑功能
- ››Google Android操作系统内核编译图文教程
- ››google map api 与jquery结合使用--控件,监听器...
- ››google map api 与jquery结合使用(2) --标注,浮...
- ››google map api 与jquery结合使用(3) --图标样式...
- ››Google 首页代码分析及简评
- ››Google财经更新iPhone和Android版本
- ››Google否认Android应用认证体系被破解
更多精彩
赞助商链接