开发学院网页设计JavaScript google map api 与jquery结合使用(2) --标注,浮... 阅读

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

打开信息浮窗

修改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!');  
   }
});

1 2 3  下一页

Tags:google map api

编辑录入:爽爽 [复制链接] [打 印]
[]
  • 好
  • 好的评价 如果觉得好,就请您
      0%(0)
  • 差
  • 差的评价 如果觉得差,就请您
      0%(0)
赞助商链接