[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. .. .. ..
⬆️ 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
・ 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. .. ..