[JAVA] Les débutants de l'API Google Maps et de l'API Twitter ont créé "Tweet Map"

introduction

Si je savais quand, où et ce que je tweetais, je pensais que ce serait amusant comme un journal de vie, alors j'ai fait une "carte des tweets".

C'est la première fois que je touche à la fois à l'API Google Maps et à l'API Twtter. Merci pour votre aide sur divers sites. .. .. ..

スクリーンショット 2019-11-25 14.14.55.png ⬆️ C'est alors que j'ai couru sur le Shimanami Kaido à vélo (C'est amusant de savoir où et ce que vous faites! Ce sont des informations personnelles folles!)

0. Environnement de développement

PC: MacBook Air (Retina, 13-inch, 2018) OS: macOS Mojave (ver 10.14.1) Processeur: Intel Core i5 1,6 GHz Mémoire: 16 Go 2133 MHz LPDDR3 Éditeur: Visual Studio Code

1. Préparation

Cette fois, nous téléchargerons l'historique des mouvements à partir de l'historique de localisation de Google Map et l'utiliserons. De plus, le contenu du tweet est acquis à l'aide de l'API Twitter. Le téléchargement et l'enregistrement des données sont requis pour chacun.

Obtenir l'historique des positions

Pour savoir comment obtenir l'historique des positions, reportez-vous ici. Télécharger l'historique Google Map (chronologie)

Extraire le journal d'activité Google Maps

Comment enregistrer l'API Google Maps

Pour connaître la méthode d'enregistrement requise lors de l'utilisation de l'API Google Masp, reportez-vous ici. J'ai essayé d'utiliser l'API Google Maps

Comment enregistrer l'API Twitter

Pour la méthode d'enregistrement de l'API Twitter, reportez-vous ici. Résumé des étapes de l'enregistrement de l'API Twitter (méthode de demande de compte) à l'approbation

Préparation des données des tweets

Étant donné que les données d'historique de localisation sont au format json et qu'il semble pratique de faire correspondre le format de fichier, préparez également les données du tweet au format json (tweet_timeline.json).

(Cette fois, je voulais utiliser une bibliothèque appelée tweepy, alors je l'ai écrite en python.)

get_tweet_data.py


import tweepy
import json
import time
import calendar


#Paramètres de clé du consommateur et de jeton d'accès pour l'utilisation de l'API Twitter
Consumer_key = '<Clé API obtenue en postulant pour l'enregistrement API Twitter>'
Consumer_secret = '<Consommateur obtenu en demandant l'inscription à l'API Twitter_secret>'
Access_token = '<Accès obtenu en demandant l'inscription à l'API Twitter_token>'
Access_secret = '<Accès obtenu en demandant l'inscription à l'API Twitter_secret>'

#Authentification
auth = tweepy.OAuthHandler(Consumer_key, Consumer_secret)
auth.set_access_token(Access_token, Access_secret)

api = tweepy.API(auth, wait_on_rate_limit=True)


#Tableau de données Tweet
tweet_data = []

#Compte d'acquisition Nom du compte@Entrez le nom à l'exclusion
user = "******"

#création de données json
for tweet in tweepy.Cursor(api.user_timeline, screen_name=user, exclude_replies=True, include_entities=True).items():

    #Convertir l'heure du tweet de l'API Twitter en UNIX
    tweet_utc_time = time.strptime(
        str(tweet.created_at), "%Y-%m-%d %H:%M:%S")
    tweet_unix_time = calendar.timegm(tweet_utc_time)

    #S'il y a une image, ajoutez l'élément URL de l'image
    if 'media' in tweet.entities:
        for media in tweet.entities['media']:
            tweet_image_url = media['media_url_https']

            #Ajouter un élément d'image au tableau de données tweet
            tweet_data.append({
                "id": tweet.id, "created_at": tweet_unix_time, "text": tweet.text,
                "fav": tweet.favorite_count, "RT": tweet.retweet_count, "image": tweet_image_url
            })

    else:
        #Ajouter un élément au tableau de données tweet
        tweet_data.append({
            "id": tweet.id, "created_at": tweet_unix_time, "text": tweet.text,
            "fav": tweet.favorite_count, "RT": tweet.retweet_count
        })

tweet_dict = {"timeline": tweet_data}

#nom de fichier json
fw = open('tweet_timeline.json', 'w')
#json sortie de fichier json.Écrire dans un fichier avec la fonction de vidage
json.dump(tweet_dict, fw, indent=4, ensure_ascii=False)

Étant donné que l'API Twitter peut prendre du temps dans un format spécial, elle est convertie en heure Unix pour correspondre à l'historique de localisation, et les données d'image sont également résumées dans un fichier json dans un format facile à utiliser.

2. Associez le Tweet à Google Map

Après cela, utilisez l'historique de localisation préparé et les données de Tweet pour mapper les coordonnées et les données de Tweet, et vous avez terminé. Pour utiliser GoogleMapsAPI, utilisez javascript, html, css.

Merci beaucoup pour votre aide sur ce site. .. .. C'est presque un niveau de copie. .. Placer des marqueurs de données json avec l'API Google Maps

sample.js


const START_DAY = '2019/4/7';
const END_DAY = '2019/4/8';
const POINTS = 1;

var date;
var ready = { api: false, ajax: false };
var map;
var mapData;
var mapOptions = {
    center: { //Latitude et longitude de la carte
        lat: 35.700000,
        lng: 139.772000
    },
    zoom: 17, //Agrandissement de la carte
    scrollwheel: false, //Faire un zoom avant / arrière en actionnant la molette
    mapTypeControl: false, //Afficher ou non les commandes de changement de carte
    streetViewControl: false //Afficher ou non les commandes Street View
}
var latlngs = [];
var tweetdata;

var infoWindowIndex = [];

var startDay = new Date(START_DAY);
var unixTimestampstartDay = Math.round(startDay.getTime());
console.log(unixTimestampstartDay)

var endDay = new Date(END_DAY);
var unixTimestampendDay = Math.round(endDay.getTime())
console.log(unixTimestampendDay)

var aveLat = 0;
var aveLng = 0;


$(function () {
    $.ajax({
        url: 'tweet_timeline.json',
        dataType: 'json',
        cache: false
    })
        .then(
            function (data) {
                console.log('J'ai réussi à obtenir la chronologie de Twitter.');
                tweetData = data["timeline"];
                ready['ajax'] = true;

            },
            function () {
                console.log('Échec de l'obtention de la chronologie Twitter.');
            }
        );
});

$(function () {
    $.ajax({
        url: 'Historique de localisation.json',
        dataType: 'json',
        cache: false
    })
        .then(
            function (data) {
                console.log('Les informations de localisation ont été acquises avec succès.');
                mapData = data["locations"];
                ready['ajax'] = true;

                generate_map();
            },
            function () {
                console.log('Impossible d'obtenir les informations de localisation.');
            }
        );
});


/**
 *Que faire une fois que l'API Google Maps est prête
 */
function api_ready() {
    ready['api'] = true;
    generate_map();
}

/**
 *Générer une carte
 */
function generate_map() {
    if (ready['api'] && ready['ajax']) {
        map = new google.maps.Map(document.getElementById('map'), {
            //Le niveau de zoom
            zoom: 10,
            //Latitude et longitude du point central
            center: new google.maps.LatLng(mapData[0].latitudeE7 * 0.0000001, mapData[0].longitudeE7 * 0.0000001),
            //Affichage de l'échelle de distance
            scaleControl: true,
            //Type de carte
            mapTypeId: google.maps.MapTypeId.ROADMAP

        });
        add_marker();
        generate_polyline();
    }
}

/**
 *Ajouter des marqueurs à la carte
 */
function add_marker() {
    var markerNum = 0;
    var j = 0;

    var infoWindowNum = 0;
    for (var i = 0; i < mapData.length; i += POINTS) {
        var item = mapData[i];
        if (startDay <= item.timestampMs && item.timestampMs <= endDay) {

            date = new Date(Number(item.timestampMs));
            latlngs.push(new google.maps.LatLng(item.latitudeE7 * 0.0000001, item.longitudeE7 * 0.0000001));

            //Génération de Blowout
            var ins = '<div class="map-window">';
            ins += '<font size="2">'
            //ins += '<p class="map-window_name">' + date + '</p>';
            var flag = 0;
            var tw = 0;
            var itemNext = mapData[i + POINTS];

            //Refléter le contenu du Tweet dans la bulle
            for (var j = 0; j < tweetData.length; j++) {
                if (item.timestampMs <= (tweetData[j].created_at * 1000) && (tweetData[j].created_at * 1000) < itemNext.timestampMs) {
                    console.log(date);
                    console.log(tweetData[j].text);
                    ins += '<p class="map-window_name">' + tweetData[j].text + '</p>';
                    //Clé du tableau associatif"image"S'il y en a, ajoutez une image
                    if (tweetData[j].image) {
                        ins += "<img src='" + tweetData[j].image + ":thumb'></br >";
                    }
                    tw = 1;
                }
            }
            ins += '</font>';
            ins += '</div>';

            //Générer une éruption uniquement pour les marqueurs avec Tweet
            if (tw == 1) {
                //Installation de marqueurs
                var marker = new google.maps.Marker({
                    position: latlngs[markerNum],
                    map: map,
                    animation: google.maps.Animation.DROP,
                });

                var infoWindow = new google.maps.InfoWindow({
                    content: ins
                });

                infoWindowIndex[infoWindowNum] = i;
                infoWindowNum++;

                //Paramètres d'événement marqueur
                add_event_to_marker(marker, infoWindow, i);
            }

            aveLat += (item.latitudeE7 * 0.0000001);
            aveLng += (item.longitudeE7 * 0.0000001)
            markerNum++;
        }

    }
    //Définit la moyenne des coordonnées au centre de la carte
    aveLat /= markerNum;
    aveLng /= markerNum;
    map.setCenter(new google.maps.LatLng(aveLat, aveLng));

}

/**
 *Ajouter un événement à un marqueur
 * @param {object} marker     (required)Informations sur le marqueur
 * @param {object} infoWindow (required)Informations sur le ballon
 * @param {number} index      (required)Numéro d'index des informations cartographiques
 */
function add_event_to_marker(marker, infoWindow, index) {
    var item = mapData[index];
    item['marker'] = marker;
    item['infoWindow'] = infoWindow;

    item['infoWindow'].open(map, item['marker']);

    //Afficher une bulle lorsqu'un marqueur est cliqué
    item['marker'].addListener('click', function (e) {
        infoWindows_hide();
        item['infoWindow'].open(map, item['marker']);
    });
}

/**
 *Cachez le ballon
 */
function infoWindows_hide() {
    for (var i = 0; i < infoWindowIndex.length; i++) {
        if (startDay <= mapData[infoWindowIndex[i]]['timestampMs'] && mapData[infoWindowIndex[i]]['timestampMs'] <= endDay)
            mapData[infoWindowIndex[i]]['infoWindow'].close();
    }
}

/**Affichez les bulles dans l'ordre*/
function infoWindows_open() {
    var j = 0;
    for (var i = 0; i < mapData.length; i++) {
        if (infoWindowIndex[j] == i) {
            mapData[i]['infoWindow'].open(map, mapData[i]['marker']);
            j++;
        }
    }
}


/**Générer une polyligne*/
function generate_polyline() {
    //Tracer une ligne
    lines = new google.maps.Polyline({
        path: latlngs,
        strokeColor: "#8a2be2",
        strokeOpacity: .7,
        strokeWeight: 5
    });
    lines.setMap(map);
}

map.html


<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8" />

    <title>Tweet carte</title>

    <link rel="stylesheet" href="sample.css" />

</head>

<body>

    <div id="map"></div>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script src="./sample.js"></script>
    <script
        src="https://maps.googleapis.com/maps/api/js?key=<Clé GCP préparée>&callback=api_ready"></script>

</body>

</html>

sample.css


#map {
    width: 1000px;
    height: 600px;
}

Il est codé comme Tara Tara, mais ce que je fais est simple et j'essaie d'afficher des tweets proches de l'heure à chaque point de l'historique de localisation et de l'heure du tweet. Plus précisément, étant donné que les coordonnées sont restées finement toutes les 3 minutes environ, le Tweet qui a été tweeté dans le temps avec l'historique de localisation et la prochaine fois (environ 3 minutes plus tard) est affiché.

De plus, la trajectoire est également affichée à l'aide de la méthode GoogleMap appelée polyline afin que la trajectoire du mouvement puisse être vue.

3. Précautions

(1) Les informations de localisation, le contenu du Tweet et les informations de clé API sont des informations personnelles, ne les divulguez donc jamais!

(2) Lors de l'exécution dans un environnement local, une erreur se produira lors de l'accès à un fichier local avec Ajax avec chrome. Exécutez Chorme avec sudo! [* Other *] Accéder aux fichiers locaux avec Ajax sur Chrome

③ Vous pouvez uniquement revenir à la date à laquelle vous pouvez obtenir l'historique de localisation et les données de Tweet! (Bien sûr)

4. Articles Web référencés

Ce peut être une référence ou presque une copie. .. .. .. Excusez-moi. .. .. Merci beaucoup. (J'ai fait référence à divers sites, alors faites-le moi savoir si vous dites: "Oh, ce code est une copie de celui que j'ai écrit?")

Utilisez Google Timeline pour enregistrer les voyages et les sorties

[Capture le 10ème jour] Convertissez le fichier created_at de l'API Twitter en heure UNIX et enregistrez-le à DATETIME

Jouez avec l'API Twitter # 3 (Obtenez les résultats de la recherche)

Autre

Puisqu'il s'agit d'un type que je suis satisfait de faire, il peut y avoir des omissions dans l'explication, mais s'il est difficile à comprendre, veuillez demander. .. ..

Recommended Posts

Les débutants de l'API Google Maps et de l'API Twitter ont créé "Tweet Map"
[Google Maps API] La carte n'est pas affichée et devient vide [Rails]
[Rails] google maps api Comment publier et afficher des informations cartographiques
Utiliser l'API Twitter (enregistrement de compte API et acquisition de tweet)
Afficher l'API Google Maps avec Rails et affichage des broches
Créez une carte thermique de tweet avec l'API Google Maps
À propos de l'événement de changement de caméra de l'API Google Maps Android
[Affichage de la carte] Affichez une carte à partir de l'adresse enregistrée par l'utilisateur à l'aide de l'API JavaScript de Google Maps et de l'API de géocodage!
Les débutants en Python utilisent l'API non officielle de Google Play Music pour jouer de la musique
[Ruby on Rails] Affichage et épinglage de GoolgeMAP à l'aide de l'API Google
Présentation de l'API Google Map avec rails
Jeton d'accès à l'API Google et jeton d'actualisation
[Rails] Description de l'API Google Maps lorsque la latitude et la longitude ne peuvent pas être enregistrées
J'ai fait go language pour api et la configuration minimum de react pour le front
Obtenez des informations sur les retards sur Twitter et tweet
Tweet à l'aide de l'API Twitter en Python
[Rails 6 / API Google Map] Publiez une adresse et définissez plusieurs marqueurs sur la carte