leaflet簡單操作demo

今天大意了解了一下leaflet這個開源的 JavaScript 庫，很強大。
結合騰訊地圖，做了個簡單的demo，作為一個學習的起點吧（各種API結合自身的業務）
<!DOCTYPE html>
<html>
<head>
    <title>map</title>
</head>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<style type="text/css">
    /*确定map容器的高度，寬度*/
    #map { height: 640px; width: 320px; }
</style>
<body>
<!-- 地圖容器 -->
<div id="map"></div>
<script type="text/javascript">
    //加載gis地圖
    var southWest = [22.53491493,113.96075249],//地圖西南點坐标
        northEast = [22.5587753,113.99362564],//地圖東北點坐标
        bounds = L.latLngBounds(southWest, northEast);//地圖邊界

    //####設定地圖設定地圖中心和縮放級别
    var map = L.map(\'map\',{
        zoomControl: false, //隐藏預設縮放按鈕
         attributionControl: false,//隐藏copyright
         //center: new L.LatLng("22.54185077705975", "113.9806441116333"),//加載地圖的中心點
        //zoom: "16",//預設顯示層級
         maxBounds: bounds,//地圖的邊界
        maxZoom:"20",//最大顯示層級
        minZoom:"1",//最小顯示層級
         attribution: \'Map data &copy; <a href="http://www.cnblogs.com/liugx/p/7651379.html">szliugx</a>\',//添加copyright，無效(已經禁用)
    }).setView(["22.54185077705975", "113.9806441116333"], 16);//預設顯示16層級，設定預設加載中心點經緯度


    //####添加标注、圓形、多邊形
    //添加标注
    var marker = L.marker([22.54383, 113.98049]).addTo(map);
    marker.bindPopup("<b>Hello world!</b><br>這是一個湖").openPopup();

    //#####添加圓形
    var circle = L.circle([22.5363, 113.98069], 50, {
     color: \'red\',
     fillColor: \'#f03\',
     fillOpacity: 0.5
    }).addTo(map);
    //circle.bindPopup("這是圈圈").openPopup();

    // //#####添加多邊形
    var polygon = L.polygon([
     [22.54784, 113.97779],
     [22.54685, 113.98079],
     [22.54649, 113.97899]
    ]).addTo(map);
    //polygon.bindPopup("土豪聚集地").openPopup();;

   //#####添加彈出氣泡
   //xxx.bindPopup("xxx").openPopup();;
     
    //#####處理事件
    function onMapClick(e) {
     alert("You clicked the map at " + e.latlng);
    }
    map.on(\'click\', onMapClick);


    L.TileLayer.WebDogTileLayer = L.TileLayer.extend({
        getTileUrl: function (tilePoint) {
            var urlArgs,
                getUrlArgs = this.options.getUrlArgs;

            if (getUrlArgs) {
                var urlArgs = getUrlArgs(tilePoint);
            } else {
                urlArgs = {
                    z: tilePoint.z,
                    x: tilePoint.x,
                    y: tilePoint.y
                };
            }

            return L.Util.template(this._url, L.extend(urlArgs, this.options, {s: this._getSubdomain(tilePoint)}));
        }
    });

    L.tileLayer.webdogTileLayer = function (url, options) {
        return new L.TileLayer.WebDogTileLayer(url, options);
    };

    var url = \'http://rt{s}.map.gtimg.com/realtimerender?z={z}&x={x}&y={y}&type=vector&style=0\';
        options = {
            //分布式域名字首辨別
            subdomains: \'012\',
            //重寫騰訊地圖的瓦片圖規則
            getUrlArgs: function (tilePoint) {
                return {
                    z: tilePoint.z,
                    x: tilePoint.x,
                    y: Math.pow(2, tilePoint.z) - 1 - tilePoint.y
                };
            }        
        };
    //L.tileLayer就是矢量瓦片底圖，用對應的URL上找對應的z，y，x。而s是分布式伺服器快速選取。最後，tileLayer圖層要addTo(map)加載在地圖觀察器上。    
    L.tileLayer.webdogTileLayer(url, options).addTo(map);

</script>
</body>
</html>