Java Blog for Alex Wan

Let life be beautiful like summer flowers and death like autumn leaves.

统计

留言簿(10)

BlogJava

Blogs

DIV+CSS

JQuery相关

友情链接

常去的地方

数据供应

阅读排行榜

评论排行榜

[javascript]google map api 与jquery结合使用(2) --标注,浮窗

前一篇:[javascript]google map api 与jquery结合使用(1)


打开信息浮窗
修改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
!');    
     }

}
);

此时可以在地图中看到10个标注和一条折线,由于是随机生成的,所以位置不是固定。
随机的地图标注和折线效果图

在标记上显示信息浮窗

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);
        
//在指定点以指定标签创建标记
        function createMarker(point, number) {
            
var marker = new GMarker(point);
            GEvent.addListener(marker, 
"click"function() {
        marker.openInfoWindowHtml(
"Marker #<b>" + number + "</b>");
        }
);
        
return marker;
        }

        
        
//添加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(createMarker(point, i 
+ 1));
        }

        $(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);
        
//信息浮窗内容
        var infoTabs = [
            
new GInfoWindowTab("气候""华北地区气候不错"),
            
new GInfoWindowTab("天气""冷空气南下,可能降雪。")
        ];
        
//在地图的中心添加一个标记并自动打开其信息浮窗
        var marker = new GMarker(map.getCenter());
        GEvent.addListener(marker, 
"click"function() {
        marker.openInfoWindowTabsHtml(infoTabs);
        }
);
        map.addOverlay(marker);
        marker.openInfoWindowTabsHtml(infoTabs);
        $(window).unload(
function (){
               $('.').unbind();
               GUnload();
           }
);
     }
else
     
{
         alert('你使用的浏览器不支持 Google Map
!');    
     }

}
);

此时的浮窗是分标签的
分标签的信息浮窗

后一篇:
[javascript]google map api 与jquery结合使用(3) --图标样式,使用xml和异步请求


Let life be beautiful like summer flowers and death like autumn leaves.

posted on 2008-11-17 00:07 Alexwan 阅读(3415) 评论(0)  编辑  收藏 所属分类: JavaScript


只有注册用户登录后才能发表评论。


网站导航: