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

[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.