木子屋
 

标题: Google Maps JavaScript API V3封装类：GoogleMaps

作者: dnawo

日期: 2011-05-16 04:41 PM

分类: 脚本语言

内容: 复制内容到剪贴板 程序代码//class: GoogleMaps
//author: dnawo
//date: 2011-05-16
//homepage: http://www.mzwu.com/
//reference:
//  http://maps.google.com/maps/api/js?sensor=false (Google Maps JavaScript API V3)
//  http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js
function GoogleMaps(container)
{
    //private fields:
    
    var map;
    var me = this, zoom = 15, timer = null, markers = [];
    var iconurl = "http://" + location.host + "/Images/shop.gif";
    var shopurl = "http://" + location.host + "/Portal/ShopList.ashx";
    var winopt = {content:"", maxWidth:200, opened:false, disableAutoPan:true}; //if disableAutoPan=false maybe active bounds_changed
    
    //private methods:
    
    var loadMap = function(){
        var opt = {
            center : new google.maps.LatLng(35.86166, 104.19539699999996),
            zoom : 4,
            mapTypeId : google.maps.MapTypeId.ROADMAP,
            disableDefaultUI: true,
            navigationControl : true,
            mapTypeControl : true,
            scaleControl : true
        };
        map = new google.maps.Map(container, opt);
    };
    
    var addMarker = function(latLng){
        markers.push(new google.maps.Marker({
            map : map,
            position : latLng
        }));
    };
    
    var clearMarker = function(){
        for(var i=0;i<markers.length;i++)
            markers[i].setMap(null);
        markers.length = 0;
    };
    
    var clearInfoWindow = function(){
        for(var i=0;i<markers.length;i++)
        {
            if(markers[i].infowin.opened)
            {
                markers[i].infowin.close();
                markers[i].infowin.opened = false;
            }
        }
    };
    
    var loadMarker = function(){
        var bounds = map.getBounds();
        var latLng1 = bounds.getNorthEast();
        var latLng2 = bounds.getSouthWest();        
        //ajax get shops
        //[{id:1,tp:0,nm:'竹韵炭坊',ds:'竹炭产品专卖',ur:'http://ztcp.taobao.com/',im:'绿叶茶香',lo:'-',lg:119.300799793243410,lt:26.103653891361080,vi:1}]
        var shops = eval($.ajax({
                        async : false,
                        url : shopurl,
                        data : {lg1:latLng2.lng(),lg2:latLng1.lng(),lt1:latLng2.lat(),lt2:latLng1.lat(),zoom:map.getZoom(),t:(new Date()).getTime()}        
                    }).responseText);
        //add marker
        clearMarker();
        for(var i=0;i<shops.length;i++){
            winopt.content = shops[i].nm + "<br/>" + shops[i].ds + "<br/>" + shops[i].ur + "<br/>" + shops[i].im;
            markers.push(new google.maps.Marker({
                map : map,
                position : new google.maps.LatLng(shops[i].lt, shops[i].lg),
                icon : iconurl,
                zIndex : shops[i].id,
                infowin : new google.maps.InfoWindow(winopt)
            }));
            google.maps.event.addListener(markers[i], "mouseover", function(e) {
                //if not have opened, marker will be flashing
                if(!this.infowin.opened)
                {
                    clearInfoWindow();
                    this.infowin.open(map, this);
                    this.infowin.opened = true;
                }
            });
        }
    };
    
    //public fields:
    
    this.ClickLng = 0;
    this.ClickLat = 0;
    
    //public methods:
    
    this.LoadCenter = function(lng, lat){
        loadMap();
        map.setCenter(new google.maps.LatLng(lat, lng));
        map.setZoom(zoom);
    };
    
    this.LoadCity = function(cityname){
        loadMap();
        var geocoder = new google.maps.Geocoder();
        geocoder.geocode({"address": cityname}, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                for(var i=0;i<results.length;i++){
                    map.setCenter(results[i].geometry.location);
                    map.setZoom(zoom);
                    break;
                }
            }
        });
    };
    
    this.ListenClick = function(){
        google.maps.event.addListener(map, "click", function(e) {
            me.ClickLng = e.latLng.lng();
            me.ClickLat = e.latLng.lat();
            clearMarker();
            addMarker(e.latLng);
        });
    };
    
    this.ListenIdle = function(){
        google.maps.event.addListener(map, "idle", function() {//not use bounds_changed
            clearTimeout(timer); //if don't clear ,request to the server too fast.
            timer = setTimeout(function(){loadMarker();},1000);
        });
    };    
}
调用示例一：
复制内容到剪贴板 程序代码$(document).ready(function() {
    var map = new GoogleMaps(document.getElementById("map_canvas"));
    map.LoadCenter(119.29929775619507, 26.085963630752868);
    map.ListenClick();
});
调用示例二：
复制内容到剪贴板 程序代码$(document).ready(function() {
    var map = new GoogleMaps(document.getElementById("map_canvas"));
    map.LoadCity("福建省福州市鼓楼区");
    map.ListenIdle();
});

+ 查看当前日志评论 (0)

 

登录

────────────

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 0.629 ms

标题: Google Maps JavaScript API V3封装类：GoogleMaps

你没有权限发表评论

────────────

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 0.629 ms

暂无评论

返回

────────────

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 0.629 ms