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

创建图标

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 icon = new GIcon();
                //图标图片
        icon.image = "http://labs.google.com/ridefinder/images/mm_20_red.png";
                //图标阴影图片
        icon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
                //图标大小
        icon.iconSize = new GSize(12, 20); 
                //阴影大小
        icon.shadowSize = new GSize(22, 20);
                //图标锚点
        icon.iconAnchor = new GPoint(6, 20);
                //信息浮窗锚点
        icon.infoWindowAnchor = new GPoint(5, 1);
        //随机的添加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, icon));
        }
        $(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.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!');    
     }
});

用指定字母作为前景图的图标效果

在地图上使用XML和异步请求(AJAX)

map.js

$(document).ready(function()
{
     if (GBrowserIsCompatible()) {
         var map = new GMap2(document.getElementById("map"));
       map.addControl(new GLargeMapControl());
        map.addControl(new GOverviewMapControl());
         
        map.addControl(new GMapTypeControl());
        map.setCenter(new GLatLng(36.94,106.08),4);
                //ajax请求
        GDownloadUrl("locations.xml", function(data, responseCode) {//回调函数
        var xml = GXml.parse(data);
        var markers = xml.documentElement.getElementsByTagName("marker");//解析xml,有多种方法
        for (var i = 0; i < markers.length; i++) {
            var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
            parseFloat(markers[i].getAttribute("lng")));
            map.addOverlay(new GMarker(point));
        }
        });
        $(window).unload(function (){
               $('.').unbind();
               GUnload();
           });
     }else
     {
         alert('你使用的浏览器不支持 Google Map!');    
     }
});

locations.xml

<markers>
<marker lat="39.98629852076348" lng="116.3574438359872"/>
<marker lat="29.94176113301537" lng="112.6857368551186"/>
</markers>

ajax的效果图

对google map api的使用暂告一段落。