Changeset 1233

Show
Ignore:
Timestamp:
10/09/10 11:51:29 (3 years ago)
Author:
d0nut
Message:

host the icon by the forum itself, click event support on GMarker and ClusterMarker?

Location:
g-map/files
Files:
6 added
2 modified

Legend:

Unmodified
Added
Removed

  • g-map/files/js/gmap/AjaxMap.class.js

    r1230 r1233  
    1313        this.registerEvent = function(callback) { 
    1414                this.events.push(callback); 
     15        }; 
     16         
     17        /** 
     18         * called in content GMarker or ClusterMarker 
     19         */ 
     20        this.fireClickEvent = function() { 
     21                alert(this.getLatLng()); 
    1522        }; 
    1623 
    … …  
    3946                                                                marker = new ClusterMarker( 
    4047                                                                        new GLatLng(data[i].lat, data[i].lon), 
    41                                                                         data[i].count 
     48                                                                        data[i].count, 
     49                                                                        RELATIVE_WCF_DIR + 'icon/gmap/' 
    4250                                                                ); 
    4351                                                        } else { 
    4452                                                                marker = new GMarker(coordinates); 
    4553                                                        } 
    46                                                          
    47                                                          
     54 
     55                                                        GEvent.addListener(marker, "click", map.fireClickEvent); 
    4856                                                        map.gmap.addOverlay(marker); 
    4957                                                } 

  • g-map/files/js/gmap/ClusterMarker.class.js

    r1230 r1233  
    44 * 
    55 * @constructor 
    6  * @private 
    76 * @param {GLatLng} latlng Marker's lat and lng. 
    87 * @param {Number} count Number to show. 
    98 * @license     Apache License 2.0 <http://www.apache.org/licenses/LICENSE-2.0> 
    109 */ 
    11 function ClusterMarker(latlng, count) { 
    12   var styles = []; 
    13   var padding = 60; 
    14   var sizes = [53, 56, 66, 78, 90]; 
     10function ClusterMarker(latlng, count, imgdir) { 
     11        var styles = []; 
     12        var padding = 60; 
     13        var sizes = [53, 56, 66, 78, 90]; 
    1514 
    16   var i = 0; 
    17   for (i = 1; i <= 5; ++i) { 
    18     styles.push({ 
    19       'url': "http://gmaps-utility-library.googlecode.com/svn/trunk/markerclusterer/images/m" + i + ".png", 
    20       'height': sizes[i - 1], 
    21       'width': sizes[i - 1] 
    22     }); 
    23   } 
     15        var i = 0; 
     16        for (i = 1; i <= 5; ++i) { 
     17                styles.push({ 
     18                        'url': imgdir + "m" + i + ".png", 
     19                        'height': sizes[i - 1], 
     20                        'width': sizes[i - 1] 
     21                }); 
     22        } 
    2423 
    25   var index = 0; 
    26   var dv = count; 
    27   while (dv !== 0) { 
    28     dv = parseInt(dv / 10, 10); 
    29     index ++; 
    30   } 
     24        var index = 0; 
     25        var dv = count; 
     26        while (dv !== 0) { 
     27                dv = parseInt(dv / 10, 10); 
     28                index ++; 
     29        } 
    3130 
    32   if (styles.length < index) { 
    33     index = styles.length; 
    34   } 
    35   this.url_ = styles[index - 1].url; 
    36   this.height_ = styles[index - 1].height; 
    37   this.width_ = styles[index - 1].width; 
    38   this.textColor_ = styles[index - 1].opt_textColor; 
    39   this.anchor_ = styles[index - 1].opt_anchor; 
    40   this.latlng_ = latlng; 
    41   this.index_ = index; 
    42   this.styles_ = styles; 
    43   this.text_ = count; 
    44   this.padding_ = padding; 
     31        if (styles.length < index) { 
     32                index = styles.length; 
     33        } 
     34        this.url_ = styles[index - 1].url; 
     35        this.height_ = styles[index - 1].height; 
     36        this.width_ = styles[index - 1].width; 
     37        this.textColor_ = styles[index - 1].opt_textColor; 
     38        this.anchor_ = styles[index - 1].opt_anchor; 
     39        this.latlng_ = latlng; 
     40        this.index_ = index; 
     41        this.styles_ = styles; 
     42        this.text_ = count; 
     43        this.padding_ = padding; 
     44         
     45        /** 
     46         * @return GLatLng 
     47         */ 
     48        this.getLatLng = function() { 
     49                return this.latlng_; 
     50        } 
    4551} 
    4652 
    … …  
    5258 */ 
    5359ClusterMarker.prototype.initialize = function (map) { 
    54   this.map_ = map; 
    55   var div = document.createElement("div"); 
    56   var latlng = this.latlng_; 
    57   var pos = map.fromLatLngToDivPixel(latlng); 
    58   pos.x -= parseInt(this.width_ / 2, 10); 
    59   pos.y -= parseInt(this.height_ / 2, 10); 
    60   var mstyle = ""; 
    61   if (document.all) { 
    62     mstyle = 'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="' + this.url_ + '");'; 
    63   } else { 
    64     mstyle = "background:url(" + this.url_ + ");"; 
    65   } 
    66   if (typeof this.anchor_ === "object") { 
    67     if (typeof this.anchor_[0] === "number" && this.anchor_[0] > 0 && this.anchor_[0] < this.height_) { 
    68       mstyle += 'height:' + (this.height_ - this.anchor_[0]) + 'px;padding-top:' + this.anchor_[0] + 'px;'; 
    69     } else { 
    70       mstyle += 'height:' + this.height_ + 'px;line-height:' + this.height_ + 'px;'; 
    71     } 
    72     if (typeof this.anchor_[1] === "number" && this.anchor_[1] > 0 && this.anchor_[1] < this.width_) { 
    73       mstyle += 'width:' + (this.width_ - this.anchor_[1]) + 'px;padding-left:' + this.anchor_[1] + 'px;'; 
    74     } else { 
    75       mstyle += 'width:' + this.width_ + 'px;text-align:center;'; 
    76     } 
    77   } else { 
    78     mstyle += 'height:' + this.height_ + 'px;line-height:' + this.height_ + 'px;'; 
    79     mstyle += 'width:' + this.width_ + 'px;text-align:center;'; 
    80   } 
    81   var txtColor = this.textColor_ ? this.textColor_ : 'black'; 
     60        this.map_ = map; 
     61        var div = document.createElement("div"); 
     62        var latlng = this.latlng_; 
     63        var pos = map.fromLatLngToDivPixel(latlng); 
     64        pos.x -= parseInt(this.width_ / 2, 10); 
     65        pos.y -= parseInt(this.height_ / 2, 10); 
     66        var mstyle = ""; 
     67        if (document.all) { 
     68                mstyle = 'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="' + this.url_ + '");'; 
     69        } else { 
     70                mstyle = "background:url(" + this.url_ + ");"; 
     71        } 
     72        if (typeof this.anchor_ === "object") { 
     73                if (typeof this.anchor_[0] === "number" && this.anchor_[0] > 0 && this.anchor_[0] < this.height_) { 
     74                        mstyle += 'height:' + (this.height_ - this.anchor_[0]) + 'px;padding-top:' + this.anchor_[0] + 'px;'; 
     75                } else { 
     76                        mstyle += 'height:' + this.height_ + 'px;line-height:' + this.height_ + 'px;'; 
     77                } 
     78                if (typeof this.anchor_[1] === "number" && this.anchor_[1] > 0 && this.anchor_[1] < this.width_) { 
     79                        mstyle += 'width:' + (this.width_ - this.anchor_[1]) + 'px;padding-left:' + this.anchor_[1] + 'px;'; 
     80                } else { 
     81                        mstyle += 'width:' + this.width_ + 'px;text-align:center;'; 
     82                } 
     83        } else { 
     84                mstyle += 'height:' + this.height_ + 'px;line-height:' + this.height_ + 'px;'; 
     85                mstyle += 'width:' + this.width_ + 'px;text-align:center;'; 
     86        } 
     87        var txtColor = this.textColor_ ? this.textColor_ : 'black'; 
    8288 
    83   div.style.cssText = mstyle + 'cursor:pointer;top:' + pos.y + "px;left:" + 
    84       pos.x + "px;color:" + txtColor +  ";position:absolute;font-size:11px;" + 
    85       'font-family:Arial,sans-serif;font-weight:bold'; 
    86   div.innerHTML = this.text_; 
    87   map.getPane(G_MAP_MAP_PANE).appendChild(div); 
    88   var padding = this.padding_; 
    89   GEvent.addDomListener(div, "click", function () { 
    90     var pos = map.fromLatLngToDivPixel(latlng); 
    91     var sw = new GPoint(pos.x - padding, pos.y + padding); 
    92     sw = map.fromDivPixelToLatLng(sw); 
    93     var ne = new GPoint(pos.x + padding, pos.y - padding); 
    94     ne = map.fromDivPixelToLatLng(ne); 
    95     var zoom = map.getBoundsZoomLevel(new GLatLngBounds(sw, ne), map.getSize()); 
    96     map.setCenter(latlng, zoom); 
    97   }); 
    98   this.div_ = div; 
     89        div.style.cssText = mstyle + 'cursor:pointer;top:' + pos.y + "px;left:" + 
     90                        pos.x + "px;color:" + txtColor +  ";position:absolute;font-size:11px;" + 
     91                        'font-family:Arial,sans-serif;font-weight:bold'; 
     92        div.innerHTML = this.text_; 
     93        map.getPane(G_MAP_MAP_PANE).appendChild(div); 
     94        var padding = this.padding_; 
     95        this.div_ = div; 
     96 
     97        GEvent.addDomListener(this.div_, "click", function(marker) { 
     98                return function() { 
     99                        GEvent.trigger(marker, "click"); 
     100                }; 
     101        }(this)); 
    99102}; 
    100103 
    … …  
    104107 */ 
    105108ClusterMarker.prototype.remove = function () { 
    106   this.div_.parentNode.removeChild(this.div_); 
     109        this.div_.parentNode.removeChild(this.div_); 
    107110}; 
    108111 
    … …  
    112115 */ 
    113116ClusterMarker.prototype.copy = function () { 
    114   return new ClusterMarker(this.latlng_, this.index_, this.text_, this.styles_, this.padding_); 
     117        return new ClusterMarker(this.latlng_, this.index_, this.text_, this.styles_, this.padding_); 
    115118}; 
    116119 
    … …  
    120123 */ 
    121124ClusterMarker.prototype.redraw = function (force) { 
    122   if (!force) { 
    123     return; 
    124   } 
    125   var pos = this.map_.fromLatLngToDivPixel(this.latlng_); 
    126   pos.x -= parseInt(this.width_ / 2, 10); 
    127   pos.y -= parseInt(this.height_ / 2, 10); 
    128   this.div_.style.top =  pos.y + "px"; 
    129   this.div_.style.left = pos.x + "px"; 
     125        if (!force) { 
     126                return; 
     127        } 
     128        var pos = this.map_.fromLatLngToDivPixel(this.latlng_); 
     129        pos.x -= parseInt(this.width_ / 2, 10); 
     130        pos.y -= parseInt(this.height_ / 2, 10); 
     131        this.div_.style.top =  pos.y + "px"; 
     132        this.div_.style.left = pos.x + "px"; 
    130133}; 
    131134 
    … …  
    134137 */ 
    135138ClusterMarker.prototype.hide = function () { 
    136   this.div_.style.display = "none"; 
     139        this.div_.style.display = "none"; 
    137140}; 
    138141 
    … …  
    141144 */ 
    142145ClusterMarker.prototype.show = function () { 
    143   this.div_.style.display = ""; 
     146        this.div_.style.display = ""; 
    144147}; 
    145148 
    … …  
    149152 */ 
    150153ClusterMarker.prototype.isHidden = function () { 
    151   return this.div_.style.display === "none"; 
     154        return this.div_.style.display === "none"; 
    152155};