开发学院网页设计JavaScript google map api 与jquery结合使用(3) --图标样式... 阅读

google map api 与jquery结合使用(3) --图标样式,使用xml和异步请求

 2010-09-14 13:29:39 来源:WEB开发网   
核心提示: 使用小图标的效果使用更复杂图标样式map.js$(document).ready(function(){ if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map"));

使用小图标的效果

使用更复杂图标样式

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);
    //创建一个图标模板,指定阴影等
    var baseIcon = new GIcon();
    baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";
    baseIcon.iconSize = new GSize(20, 34);
    baseIcon.shadowSize = new GSize(37, 34);
    baseIcon.iconAnchor = new GPoint(9, 34);
    baseIcon.infoWindowAnchor = new GPoint(9, 2);
    baseIcon.infoShadowAnchor = new GPoint(18, 25);
    //创建用指定字母作为前景图的图标
    function createMarker(point, index) {
    // Create a lettered icon for this point using our icon class
    var letter = String.fromCharCode("A".charCodeAt(0) + index);
    var icon = new GIcon(baseIcon);
    icon.image = "http://www.google.com/mapfiles/marker" + letter + ".png";
    var marker = new GMarker(point, icon);
    GEvent.addListener(marker, "click", function() {
    marker.openInfoWindowHtml("Marker <b>" + letter + "</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));
    }
    $(window).unload(function (){
        $('.').unbind();
        GUnload();
      });
   }else
   {
     alert('你使用的浏览器不支持 Google Map!');  
   }
});

Tags:google map api

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