Weibo用戶地圖

現在，許多應用都提供地理位置定位的功能，只要用戶開放他們的位置信息就可以實現定位了，今天我們將創建一個基于Google 地圖的微博用戶地圖，這里我們將通過Weibo API獲取微博用戶的地理信息，然后使用Google地理位置服務將用戶的地理信息轉換為相應的地理坐標，最后，根據地理坐標加載到Google地圖中顯示。...

1.1.1 摘要

現在，許多應用都提供地理位置定位的功能，只要用戶開放他們的位置信息就可以實現定位了，今天我們將創建一個基于Google 地圖的微博用戶地圖，這里我們將通過Weibo API獲取微博用戶的地理信息，然后使用Google地理位置服務將用戶的地理信息轉換為相應的地理坐標，最后，根據地理坐標加載到Google地圖中顯示。

1.1.2 正文

Index頁面

首先，我們定義程序的Index頁面，它用于加載顯示Google地圖，具體實現如下：

<!-- Weibo user map -->
<div id="map"></div>
<div class="weibo">
    <div class="inside"></div>
</div>
<div class="posts"></div>
<div class="get">
    <input type="hidden" value="優等生杜小明" />
    <input type="hidden" value="楊冪" />
    <input type="hidden" value="思想匯聚人生" />    
    <input type="hidden" value="KevinOriste" />            
    <input type="hidden" value="韓寒" />
    <input type="hidden" value="復古老照片" />    
    <input type="hidden" value="獨立檢察官2011" />    
    <input type="hidden" value="顧扯淡" />
    <input type="hidden" value="李開復"/>
</div>

上面，第一個div（map）用來加載顯示Google 地圖，第二個div（weibo）用來顯示微博用戶的頭像、描述、用戶名和個人信息，第三個div（posts）用來加載顯示相應用戶最近發的微博信息，最后，一個div（get）用來存放微博用戶名，我們的程序將根據這些用戶名來獲取相應的微博數據。

Javascript實現

接下來，我們通過jQuery插件方式實現微博用戶地圖插件，我們定義了三個方法別是：weiboMap()，weiboMap.size()和weiboMap.init()，具體定義如下：

// Weibo user map plugin.
(function($) {
    $.fn.weiboMap = function(options) {
        // Your code here.
    };

    $.fn.weiboMap.size = function() {
        // Your code here.
    };

    $.fn.weiboMap.init = function() {
        // Your code here.
    };
})(jQuery);

weiboMap()方法通過調用微博API獲取微博數據，然后將返回數據加載顯到Index頁面中；weiboMap.size()獲取當前窗口的大小，用來設置Google地圖的初始大小；weiboMap.init()初始化Google地圖，設置地圖的zoom，地圖中心位置（這里以北京為中心），地圖大小和地圖類型。

上面，我們只給出了三個方法的定義，但還沒有給出具體的實現，接下來讓我們實現上面的方法吧!

// Gets the size of window .
$.fn.weiboMap.size = function() {
    var w = $(window).width(),
            h = $(window).height();
    return {
        width: w,
        height: h
    };
}

上面，我們實現了weiboMap.size()方法，它獲取當前窗口的大小，然后返回一個包含長和寬屬性的對象。

// Initalizes the google map
$.fn.weiboMap.init = function() {

    // Sets the size of map.
    var size = $.fn.weiboMap.size();
    $('#map').css({
        width: size.width,
        height: size.height
    });

    // Creates a google map instance.
    map = new google.maps.Map(document.getElementById('map'), $.fn.weiboMap.defaults.data);

    // Creates a geo coder instance.
    geocoder = new google.maps.Geocoder();
}

圖1 Google地圖

我們通過方法weiboMap.init()初始化Google地圖，首先，我們設置了map div的長和寬，然后創建了Google地圖和地理編碼對象。

在創建新的地圖實例時，我們需要在網頁中指定一個 div 元素作為地圖的容器；這里我們通過getElementById ()方法獲取map元素。

構造函數：Map(mapDiv:Node, opts?:MapOptions)

說明：第一個參數設置地圖的HTLM容器，第二參數可選，用于設置Google地圖的zoom，顯示位置，地圖大小和地圖類型等（具體請參考這里）。

上面，我們實現了方法weiboMap.size()和weiboMap.init()，接下來我們繼續實現方法weiboMap()。

由于weiboMap()負責調用微博API獲取微博數據，然后加載顯示到Google地圖上面，所以這里就涉及到兩個功能的實現：調用微博API和Google地圖地理定位。

首先，我們定義方法getUsers()獲取在Index.html頁面中設置的微博用戶名，然后根據這些用戶名獲取相應的用戶信息和微博信息。

// Gets the list of weibo screen name
// from the .get div.
function getUsers() {
    var arr = new Array();
    $('.get').find('input').each(function(i) {
        var $element = $(this);
        arr[i] = $element.val();
    });
    return arr;
}

上面，我們通過find()方法獲取get元素中的用戶名，然后儲存在數組中并且返回該數組，接下來，我們實現show()方法，它根據微博用戶名調用微博API獲取用戶的基本信息和微博信息，由于用戶的基本信息包含了地理信息，我們通過Google的地理編碼服務將用戶的地理信息轉換為地理坐標，例如：根據北京轉換為相應的經緯度北緯39.90，東經116.41，具體實現如下：

// Get weibo user show and binding data
// with google map.
function show() {

    // Gets the weibo user screen name.
    var users = getUsers();
    for (var i = users.length - 1; i >= 0; i--) {

        // Invokes the weibo api to get data.
        $.getJSONP({
            url: opts.url,
            timeout: 30000,
            data: {
                source: opts.appKey,
                access_token: opts.accessToken,
                screen_name: users[i]
            },
            error: function(xhr, status, e) {
                console.log(e);
            },
            complete: function() {

            },
            success: function(json) {
                if (json.data.error) {
                    // log the error.
                    return;
                }

                var arr = new Array(),
                            img = json.data.profile_image_url,
                            screen_name = json.data.screen_name;

                // Initalizes the geo coder instance.    
                geocoder.geocode({
                    address: json.data.location
                }, function(response, status) {
                    if (status == google.maps.GeocoderStatus.OK) {

                        // Sets latitude and longitude by location name.
                        var x = response[0].geometry.location.lat(),
                                    y = response[0].geometry.location.lng(),
                                    blogUrl,
                                marker = new google.maps.Marker({
                                    icon: img,
                                    map: map,
                                    title: screen_name,
                                    animation: google.maps.Animation.DROP,
                                    position: new google.maps.LatLng(x, y)
                                });

                        // Creates user information.
                        blogUrl = json.data.url !== '' ? json.data.url : 'http://www.weibo.com/u/' + json.data.id;
                        arr.push('<div class="item">');
                        arr.push('<p class="img"><a href="#" class="open" rel="' + screen_name + '"><img src="' + img + '" alt="" /></a></p>');
                        arr.push('<div class="entry">');
                        arr.push('<a href="#" class="open title" rel="' + screen_name + '">' + json.data.name + '</a>');
                        arr.push('<p class="description">' + json.data.description + '</p>');
                        arr.push('<p class="url"><a href="' + blogUrl + '" target="_blank">' + blogUrl + '</a></p>');
                        arr.push('<p class="count">粉絲: ' + json.data.followers_count + ', 關注: ' + json.data.friends_count + '</p>');
                        arr.push('</div>');
                        arr.push('</div>');
                        var html = arr.join('');
                        arr = [];
                        $('.weibo').find('.inside').append(html);

                        // Clicks the user image showing relative user's weibo.
                        google.maps.event.addListener(marker, 'click', function() {
                            open(this.title);
                        });
                    }

                });
            }
        });
    };

}

上面，我們通過getJSONP()方法調用微博API獲取微博用戶數據，如名稱，描述，地理位置和頭像路徑等，然后，我們使用Google的地理編碼服務將用戶地理位置信息轉換為具體的地理坐標，最后，我們將微博用戶的頭像加載到地圖的相應坐標上并且添加用戶的名稱和描述信息。

接著，我們打開Chrome的開發者工具，在Network中，查看到getJSONP()方法通過向微博的users/show接口發送請求來獲取微博數據。

圖2 Ajax請求

當請求成功微博將返回JSON格式的數據，數據的結構如下：

圖3 微博JSON數據

前面，我們取得了微博數據，我們根據用戶的location值獲取相應的地理坐標值，這里我們使用Google的地理編碼服務可以將用戶地理位置信息（location）轉換為具體的地理坐標，具體實現如下：

// Sets latitude and longitude by location name.
var x = response[0].geometry.location.lat(),
        y = response[0].geometry.location.lng(),
        blogUrl,
        marker = new google.maps.Marker({
        icon: img,
        map: map,
        title: screen_name,
        animation: google.maps.Animation.DROP,
        position: new google.maps.LatLng(x, y)
    });

我們根據用戶的微博頭像，名稱和地理坐標創建marker實例，它用于在地圖上顯示對應的微博用戶的位置，然后，我們把用戶的名稱，描述，粉絲和關注數量加載到weibo div中。

圖4 微博用戶地圖

上面，我們實現了根據微博用戶的位置信息進行地理定位，這樣我們可以在地圖上查看到每個微博用戶的地理位置了，在地圖的下方，我們給出了微博用戶的描述信息。

現在，我們已經實現了微博用戶地圖的功能了，隨著，我們查詢用戶增加，但我們顯示用戶信息的空間是有限，難道我們要用整個窗口來顯示用戶的信息嗎？

其實，我們可以通過滾動方式來查看微博用戶的信息，具體實現如下：

// Gets mouse Y coordinate.
function getYCoordinate(e) {
    var y = e.pageY;
    return y;
}

// Checks move size.
function checkYCoordinate(y) {
    var all = $('.weibo').height(),
                inside = $('.weibo').find('.inside').height();
    // The max move size |all - inside|.    
    if (y < (all - inside)) {
        y = all - inside;
    } else if (y > 0) {
        y = 0;
    }
    return y;
}

// Updates inside top css.
function update(e) {
    var y = getYCoordinate(e),
                movey = y - my,

    // Changes Y coordinate.
                top = ey + movey,
            check = checkYCoordinate(top);
    console.log(top, check);
    $('.weibo').find('.inside').css({
        top: check + 'px'
    });
}

init();

function init() {
    $('.weibo').find('.inside').bind({
        mousedown: function(e) {
            e.preventDefault();
            mouseDown = true;
            var mouseY = getYCoordinate(e),
            // Gets element coordinate.
                    element = $(this).position();

            // Gets Y coordinate move.
            my = mouseY;
            ey = element.top;
            update(e);
        },
        mousemove: function(e) {
            if (mouseDown)
                update(e);
            return false;
        },
        mouseup: function() {
            if (mouseDown)
                mouseDown = false;
            return false;
        },
        mouseleave: function() {
            if (mouseDown)
                mouseDown = false;
            return false;
        }
    });
}

用戶通過垂直拖拉weibo div來實現上下查看微博用戶信息，首先init()方法綁定了mousedown，mousemove，mouseup和mouseleave事件，當用戶點擊weibo div區域時，調用getYCoordinate()方法獲取鼠標當前的Y坐標，當用戶拖動鼠標時，調用update()方法更新inside div的top屬性。

CSS樣式

現在，我們可以通過垂直拖拉查看微博用戶的信息，接下來，我們添加CSS效果調整一下界面布局，具體實現如下：

@import url("reset.css");

/* ------ layout
-----------------------------------------------*/

html, body {
margin:0;
padding:0;
}


body {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#333;
line-height:18px;
}

#map {
float:left;
}

.weibo {
position:fixed;
left:0;
bottom:0;
background:#000;
background:rgba(0, 0, 0, .7);
width:100%;
height:180px;
color:#fff;
overflow:hidden;
}

.weibo .inside {
position:absolute;
top:0;
left:0;
cursor:n-resize;
}

.weibo .item {
float:left;
width:280px;
padding:20px;
}

.weibo .item .img {
float:left;
width:48px;
}

.weibo .img img {
-moz-box-shadow:0 0 5px #000;
-webkit-box-shadow:0 0 5px #000;
box-shadow:0 0 5px #000;
}

.weibo .item .entry {
float:right;
width:215px;
height:140px;
color:#eee;
font-size:11px;
position:relative;
}

.weibo .item .count {
position:absolute;
left:0;
bottom:-10px;
font-size:10px;
text-transform:uppercase;
}

.weibo .item .title {
font-size:13px;
font-weight:bold;
color:#fff;
}

.weibo .item .url a {
text-decoration:underline;
}

.weibo .item p {
margin-bottom:5px;
}

.posts {
display:none;
position:absolute;
left:50%;
margin-left:-310px;
width:580px;
bottom:180px;
background:#fff;
color:#fff;
background:#000;
background:rgba(0, 0, 0, .7);
padding:20px;
}

.posts .post {
float:left;
clear:both;
width:100%;
margin-bottom:20px;
font-size:12px;
font-weight:bold;
}

/* ------ anchors
-----------------------------------------------*/

a {
text-decoration:none;
color:#fff;
}

圖5 微博用戶地圖

上面，實現了微博用戶地圖，我們可以在Google地圖上查看到微博用戶對應的地圖位置，在下面給出了每個用戶的描述信息。

1.1.3 總結

我們實現了微博用戶地圖程序，首先將Google地圖加載程序當中，然后，我們通過ajax請求調用微博API，獲取微博用戶的基本信息，當成功返回JSON數據時，從中獲取用戶的地址信息，然后通過Google的地理編碼服務將地址信息轉換為地理坐標，這樣我們就可以定位每個微博用戶的地理位置了，最后，通過marker把每個用戶的定位到Google地圖上顯示出來。

參考

https://developers.google.com/maps/documentation/javascript/geocoding?hl=zh-cn
https://developers.google.com/maps/documentation/javascript/tutorial?hl=zh-cn
https://developers.google.com/maps/documentation/javascript/overlays
http://tympanus.net/codrops/2011/04/13/interactive-google-map/

Demo

posted @ 2013-09-29 21:27 JK_Rush 閱讀(4461) 評論(2) 收藏舉報

刷新頁面返回頂部