google map api 与jquery结合使用(2) --标注,浮窗
2010-09-14 13:29:42 来源:WEB开发网打开信息浮窗
修改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();
map.setCenter(new GLatLng(36.94,106.08),4);
//打开信息浮窗--需要在设置地图中心点后进行
map.openInfoWindow(map.getCenter(),document.createTextNode("你好,中国"));
$(window).unload(function (){
$('.').unbind();
GUnload();
});
}else
{
alert('你使用的浏览器不支持 Google Map!');
}
});
在地图的中央会显示信息浮窗(相对粗糙)
信息浮窗效果图
地图标注
map.js
$(document).ready(function()
{
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
//开启滚轮伸缩效果--鼠标滚轮向前滚放大地图,反之缩小
map.enableScrollWheelZoom();
map.setCenter(new GLatLng(36.94,106.08),4);
//在地图上添加10个位置随机的标记
var bounds = map.getBounds();
var southWest = bounds.getSouthWest();
var northEast = bounds.getNorthEast();
var lngSpan = northEast.lng() - southWest.lng();
var latSpan = northEast.lat() - southWest.lat();
for (var i = 0; i < 10; i++) {
var point = new GLatLng(southWest.lat() + latSpan * Math.random(),
southWest.lng() + lngSpan * Math.random());
map.addOverlay(new GMarker(point));
}
//随机取五个点连成折线,5个点按照经度排序防止折线自身交叉.
var points = [];
for (var i = 0; i < 5; i++) {
points.push(new GLatLng(southWest.lat() + latSpan * Math.random(),
southWest.lng() + lngSpan * Math.random()));
}
points.sort(function(p1, p2) {
return p1.lng() - p2.lng();
});
map.addOverlay(new GPolyline(points));
//单击事件句柄
GEvent.addListener(map, "click", function(marker, point) {
if (marker) {
map.removeOverlay(marker);
} else {
map.addOverlay(new GMarker(point));
}
});
$(window).unload(function (){
$('.').unbind();
GUnload();
});
}else
{
alert('你使用的浏览器不支持 Google Map!');
}
});
- ››google没有经过有效的代码审查前提交到代码库
- ››google analytics清晰追踪爬虫的爬行信息
- ››Google+中文用户在两千万Google+大军中是少数派
- ››Google AdWords最昂贵点击成本的20种关键词分类
- ››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) --标注,浮...
更多精彩
赞助商链接