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结合使用(3) --图标样式,使用xml和异步请求

前两篇:

[javascript]google map api 与jquery结合使用(1)--控件,监听器

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

创建图标

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(1220); 
                
//阴影大小
        icon.shadowSize = new GSize(2220);
                
//图标锚点
        icon.iconAnchor = new GPoint(620);
                
//信息浮窗锚点
        icon.infoWindowAnchor = new GPoint(51);
        
//随机的添加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(2034);
        baseIcon.shadowSize 
= new GSize(3734);
        baseIcon.iconAnchor 
= new GPoint(934);
        baseIcon.infoWindowAnchor 
= new GPoint(92);
        baseIcon.infoShadowAnchor 
= new GPoint(1825);
        
//创建用指定字母作为前景图的图标
        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的使用暂告一段落。

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

posted on 2008-11-19 00:22 Alexwan 阅读(2779) 评论(5)  编辑  收藏 所属分类: JavaScript

评论

# re: [javascript]google map api 与jquery结合使用(3) --图标样式,使用xml和异步请求 2008-11-19 20:17 网站优化

不会用呀.  回复  更多评论   

# re: [javascript]google map api 与jquery结合使用(3) --图标样式,使用xml和异步请求 2008-11-20 11:51 Alexwan

看看前面两篇文章或许有点帮助。  回复  更多评论   

# re: [javascript]google map api 与jquery结合使用(3) --图标样式,使用xml和异步请求 2008-12-23 18:52 网站建设

呵呵,不错啊  回复  更多评论   

# re: [javascript]google map api 与jquery结合使用(3) --图标样式,使用xml和异步请求 2008-12-23 18:53 网站优化

路过,路过  回复  更多评论   

# re: [javascript]google map api 与jquery结合使用(3) --图标样式,使用xml和异步请求 2010-07-06 21:45 淘宝网

经典啊,有个打包的例子就更好了,我的网站 http://www.2zhai.com 正要用呢  回复  更多评论   


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


网站导航: