Weibo user Map

1.1.1 Summary

Currently, many applications provide the location function. Users can locate their locations as long as their location information is available. Today, we will create a Google Map-based Weibo user map, here, we will use the Weibo API to obtain the geographical information of Weibo users, and then use the Google location service to convert users' geographic information into corresponding geographical coordinates. Finally, load it to Google maps based on geographical coordinates.

Directory

• Index page
• Javascript implementation
• CSS style

1.1.2 body Index page

First, we define the Index page of the program, which is used to load and display Google Maps. The specific implementation is as follows:

Above, the first div (map) is used to load and display Google maps, the second div (weibo) is used to display the profile pictures, descriptions, usernames, and personal information of weibo users, and the third div (posts) it is used to load and display the microblog information recently sent by the corresponding user. Finally, a div (get) is used to store the Weibo user name. Our program will obtain the corresponding Weibo data based on these user names.

Javascript implementation

Next, we use the jQuery plug-in to implement the Weibo user map plug-in. We have defined three methods: weiboMap () and weiboMap. size () and weiboMap. init () is defined as follows:

(($) {    $.fn.weiboMap = (options) {        };    $.fn.weiboMap.size = () {        };    $.fn.weiboMap.init = () {        };})(jQuery);

WeiboMap () method obtains Weibo data by calling the Weibo API, and then loads the returned data to the Index page. weiboMap. size () gets the size of the current window, which is used to set the initial size of the Google map; weiboMap. init () initializes Google Maps, sets the map zoom, map center location (Beijing is the center here), map size and map type.

Above, we only gave the definition of three methods, but we haven't provided specific implementation yet. Let's implement the above method!

$.fn.weiboMap.size = () {    w = $(window).width(),            h = $(window).height();    {        width: w,        height: h    };}

Above, we implemented the weiboMap. size () method, which obtains the size of the current window, and then returns an object containing the length and width attributes.

$.fn.weiboMap.init = () {    size = $.fn.weiboMap.size();    $().css({        width: size.width,        height: size.height    });    map = google.maps.Map(document.getElementById(), $.fn.weiboMap.defaults.data);    geocoder = google.maps.Geocoder();}

We initialize Google map by using weiboMap. init (). First, we set the length and width of map div, and then created Google Maps and geocode objects.

When creating a new map instance, we need to specify a div element in the webpage as the map container. Here we get the map element through the getElementById () method.

Constructor: Map (mapDiv: Node, opts? : MapOptions)

Note: The first parameter sets the HTLM container of the map. The second parameter is optional. It is used to set the zoom, display location, map size, and map type of the Google map. (For details, refer to here ).

We have implemented the weiboMap. size () and weiboMap. init () methods. Next we will continue to implement weiboMap ().

WeiboMap () is responsible for calling the Weibo API to obtain Weibo data and then loading the data to the Google map. Therefore, two functions are involved: calling the Weibo API and Google map geographic location.

First, we define getusers((get the Weibo user name set on the index.html page, and then obtain the corresponding user information and Weibo information based on the user name.

getUsers() {    arr = Array();    $().find().each((i) {        $element = $();        arr[i] = $element.val();    });    arr;}

Above, we get the username in the get element through the find () method, and store it in the array and return the array. Next, we implement the show () method, it calls the Weibo API Based on the Weibo user name to obtain the basic information and microblog information of the user. Because the basic information of the user contains the geographical information, we use Google's geocoding service to convert users' geographic information into geographical coordinates. For example, we convert the geographical information from Beijing to the corresponding latitude and longitude 39.90, And the longitude 116.41, as shown below:

show() {    users = getUsers();    (i = users.length - 1; i >= 0; i--) {        $.getJSONP({            url: opts.url,            timeout: 30000,            data: {                source: opts.appKey,                access_token: opts.accessToken,                screen_name: users[i]            },            error: (xhr, status, e) {                console.log(e);            },            complete: () {            },            success: (json) {                (json.data.error) {                    ;                }                arr = Array(),                            img = json.data.profile_image_url,                            screen_name = json.data.screen_name;                geocoder.geocode({                    address: json.data.location                }, (response, status) {                    (status == google.maps.GeocoderStatus.OK) {                        x = response[0].geometry.location.lat(),                                    y = response[0].geometry.location.lng(),                                    blogUrl,                                marker = google.maps.Marker({                                    icon: img,                                    map: map,                                    title: screen_name,                                    animation: google.maps.Animation.DROP,                                    position: google.maps.LatLng(x, y)                                });                        blogUrl = json.data.url !== ? json.data.url : + json.data.id;                        arr.push();                        arr.push(+ screen_name + + img + );                        arr.push();                        arr.push(+ screen_name + + json.data.name + );                        arr.push(+ json.data.description + );                        arr.push(+ blogUrl + + blogUrl + );                        arr.push(+ json.data.followers_count + + json.data.friends_count + );                        arr.push();                        arr.push();                        html = arr.join();                        arr = [];                        $().find().append(html);                        google.maps.event.addListener(marker, , () {                            open(.title);                        });                    }                });            }        });    };}

Above, we call the Weibo API through the getJSONP () method to obtain Weibo user data, such as name, description, geographical location, and Avatar path. Then, we use Google's geocoding service to convert users' geographic location information into specific geographic coordinates. Finally, we load the avatar of a Weibo user to the corresponding coordinates of the map and add the user's name and description information.

Next, we open Chrome's developer tool. In the Network, we can see that the getJSONP () method sends a request to the Weibo users/show interface to obtain Weibo data.

When the request is successful, Weibo will return data in JSON format. The data structure is as follows:

Previously, we obtained Weibo data. We obtained the corresponding geographic coordinate value based on the user's location value. here we can use Google's location service to get the user's location information) the specific implementation is as follows:

x = response[0].geometry.location.lat(),        y = response[0].geometry.location.lng(),        blogUrl,        marker = google.maps.Marker({        icon: img,        map: map,        title: screen_name,        animation: google.maps.Animation.DROP,        position: google.maps.LatLng(x, y)    });

We create a marker instance based on the user's Weibo profile picture, name, and geographical coordinates. It is used to display the location of the corresponding Weibo user on the map. Then, we describe the user's name and description, the number of fans and followers is loaded into the weibo div.

As shown in the preceding figure, the location information of Weibo users is used for geographic location locating. In this way, you can view the geographical location of each Weibo user on the map. Below the map, we provide the description of Weibo users.

Now, we have implemented the Weibo user map function. As we query more users, the space for displaying user information is limited, do we need to use the entire window to Display User information?

In fact, we can view the information of Weibo users through scrolling. The specific implementation is as follows:

getYCoordinate(e) {    y = e.pageY;    y;}checkYCoordinate(y) {    all = $().height(),                inside = $().find().height();    (y < (all - inside)) {        y = all - inside;    } (y > 0) {        y = 0;    }    y;}update(e) {    y = getYCoordinate(e),                movey = y - my,    top = ey + movey,            check = checkYCoordinate(top);    console.log(top, check);    $().find().css({        top: check + });}init();init() {    $().find().bind({        mousedown: (e) {            e.preventDefault();            mouseDown = ;            mouseY = getYCoordinate(e),            element = $().position();            my = mouseY;            ey = element.top;            update(e);        },        mousemove: (e) {            (mouseDown)                update(e);            ;        },        mouseup: () {            (mouseDown)                mouseDown = ;            ;        },        mouseleave: () {            (mouseDown)                mouseDown = ;            ;        }    });}

You can drag the weibo div vertically to view the weibo user information up and down. First, the init () method is bound to the mousedown, mousemove, mouseup, and mouseleave events. When you click the weibo div area, call the getYCoordinate () method to obtain the current Y coordinate of the mouse. When you drag the mouse, call the update () method to update the top attribute of the inside div.

CSS style

Now, we can view Weibo user information through vertical drag. Next, we will add the CSS effect to adjust the interface layout. The specific implementation is as follows:

url("reset.css");, {:;:;}{:;:;:;:;}{:;}{:;:;:;:;:;:;:;:;:;}{:;:;:;:;}{:;:;:;}{:;:;}{:;:;:;}{:;:;:;:;:;:;}{:;:;:;:;:;}{:;:;:;}{:;}{:;}{:;:;:;:;:;:;:;:;:;:;:;}{:;:;:;:;:;:;}{:;:;}

The preceding figure shows the Weibo user map. We can view the location of the Weibo user's map on the Google map. The following shows the description of each user.

1.1.3 Summary

We implemented the Weibo user map program. First, we loaded Google maps into the program. Then, we called the Weibo API through ajax requests to obtain basic information about Weibo users. When JSON data is successfully returned, obtain the user's address information from the address information, and then convert the address information to geographical coordinates through Google's geocode service, so that we can locate the geographical location of each Weibo user. Finally, use marker to locate each user and display it on Google map.

Reference

• 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