[PYTHON] Anfänger der Google Maps API und der Twitter API haben "Tweet Map" erstellt.
Einführung
Wenn ich wüsste, wann, wo und was ich getwittert habe, hätte ich gedacht, dass es Spaß machen würde wie ein Lebensprotokoll, also habe ich eine "Tweet-Karte" erstellt.
Ich berühre zum ersten Mal sowohl die Google Maps-API als auch die Twtter-API. Vielen Dank für Ihre Hilfe auf verschiedenen Websites. .. .. ..
⬆️ Zu diesem Zeitpunkt bin ich mit dem Fahrrad auf dem Shimanami Kaido gelaufen
(Es macht Spaß zu wissen, wo und was Sie tun! Es sind verrückte persönliche Informationen!)
0. Entwicklungsumgebung
PC: MacBook Air (Retina, 13-inch, 2018) OS: macOS Mojave (ver 10.14.1) Prozessor: 1,6 GHz Intel Core i5 Speicher: 16 GB 2133 MHz LPDDR3 Editor: Visual Studio-Code
1. Vorbereitung
Dieses Mal werden wir den Bewegungsverlauf aus dem Standortverlauf von Google Map herunterladen und verwenden. Darüber hinaus wird der Tweet-Inhalt über die Twitter-API erfasst. Daten-Download und Registrierung sind jeweils erforderlich.
Standortverlauf abrufen
Informationen zum Abrufen des Standortverlaufs finden Sie hier. Google Map-Verlauf herunterladen (Zeitleiste)
Google Maps-Aktionsprotokoll extrahieren
So registrieren Sie die Google Maps-API
Informationen zur Registrierungsmethode für die Verwendung der Google Masp-API finden Sie hier. Ich habe versucht, die Google Maps-API zu verwenden
So registrieren Sie die Twitter-API
Informationen zur Registrierungsmethode der Twitter-API finden Sie hier. Zusammenfassung der Schritte von der Registrierung der Twitter-API (Kontoanwendungsmethode) bis zur Genehmigung
Tweet Datenaufbereitung
Da die Standortverlaufsdaten im JSON-Format vorliegen und es zweckmäßig erscheint, mit dem Dateiformat übereinzustimmen, bereiten Sie die Tweet-Daten auch im JSON-Format (tweet_timeline.json) vor.
(Dieses Mal wollte ich eine Bibliothek namens tweepy verwenden, also habe ich sie in Python geschrieben.)
get_tweet_data.py
import tweepy
import json
import time
import calendar
#Einstellungen für Verbraucherschlüssel und Zugriffstoken für die Verwendung der Twitter-API
Consumer_key = '<API-Schlüssel, der durch Beantragung der Twitter-API-Registrierung erhalten wird>'
Consumer_secret = '<Verbraucher erhalten durch Beantragung der Twitter API-Registrierung_secret>'
Access_token = '<Zugriff durch Beantragung der Twitter API-Registrierung_token>'
Access_secret = '<Zugriff durch Beantragung der Twitter API-Registrierung_secret>'
#Authentifizierung
auth = tweepy.OAuthHandler(Consumer_key, Consumer_secret)
auth.set_access_token(Access_token, Access_secret)
api = tweepy.API(auth, wait_on_rate_limit=True)
#Tweet Datenarray
tweet_data = []
#Akquisitionskonto Kontoname@Geben Sie den Namen ohne ein
user = "＊＊＊＊＊＊"
#JSON-Datenerstellung
for tweet in tweepy.Cursor(api.user_timeline, screen_name=user, exclude_replies=True, include_entities=True).items():
#Konvertieren Sie die Tweet-Zeit der Twitter-API in UNIX
tweet_utc_time = time.strptime(
str(tweet.created_at), "%Y-%m-%d %H:%M:%S")
tweet_unix_time = calendar.timegm(tweet_utc_time)
#Wenn ein Bild vorhanden ist, fügen Sie das URL-Element des Bildes hinzu
if 'media' in tweet.entities:
for media in tweet.entities['media']:
tweet_image_url = media['media_url_https']
#Fügen Sie dem Tweet-Datenarray ein Bildelement hinzu
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:
#Element zum Tweet-Datenarray hinzufügen
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}
#JSON-Dateiname
fw = open('tweet_timeline.json', 'w')
#JSON-Dateiausgabe JSON.In Datei mit Dump-Funktion schreiben
json.dump(tweet_dict, fw, indent=4, ensure_ascii=False)
Da die Twitter-API in einem speziellen Format einige Zeit in Anspruch nehmen kann, wird sie entsprechend dem Standortverlauf in Unix-Zeit konvertiert, und die Bilddaten werden auch in einer JSON-Datei in einem benutzerfreundlichen Format zusammengefasst.
2. Map Tweet zu Google Map
Verwenden Sie danach den vorbereiteten Standortverlauf und die Tweet-Daten, um die Koordinaten und Tweet-Daten zuzuordnen, und fertig. Verwenden Sie zur Verwendung von GoogleMapsAPI Javascript, HTML, CSS.
Vielen Dank für Ihre Hilfe auf dieser Website. .. .. Es ist fast eine Kopierstufe. .. Platzieren Sie Markierungen aus JSON-Daten mit der Google Maps-API
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: { //Karte Breite und Länge
lat: 35.700000,
lng: 139.772000
},
zoom: 17, //Kartenvergrößerung
scrollwheel: false, //Gibt an, ob Sie mit dem Rad hinein- oder herauszoomen möchten
mapTypeControl: false, //Gibt an, ob Steuerelemente für die Kartenumschaltung angezeigt werden sollen
streetViewControl: false //Gibt an, ob Steuerelemente für die Straßenansicht angezeigt werden sollen
}
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('Es ist mir gelungen, die Twitter-Timeline zu erhalten.');
tweetData = data["timeline"];
ready['ajax'] = true;
},
function () {
console.log('Die Twitter-Timeline konnte nicht abgerufen werden.');
}
);
});
$(function () {
$.ajax({
url: 'Standortverlauf.json',
dataType: 'json',
cache: false
})
.then(
function (data) {
console.log('Die Standortinformationen wurden erfolgreich erfasst.');
mapData = data["locations"];
ready['ajax'] = true;
generate_map();
},
function () {
console.log('Fehler beim Abrufen der Standortinformationen.');
}
);
});
/**
*Was tun, wenn die Google Maps-API bereit ist?
*/
function api_ready() {
ready['api'] = true;
generate_map();
}
/**
*Erstellen Sie eine Karte
*/
function generate_map() {
if (ready['api'] && ready['ajax']) {
map = new google.maps.Map(document.getElementById('map'), {
//Zoomstufe
zoom: 10,
//Mittelpunkt Breite und Länge
center: new google.maps.LatLng(mapData[0].latitudeE7 * 0.0000001, mapData[0].longitudeE7 * 0.0000001),
//Anzeige der Entfernungsskala
scaleControl: true,
//Kartentyp
mapTypeId: google.maps.MapTypeId.ROADMAP
});
add_marker();
generate_polyline();
}
}
/**
*Fügen Sie der Karte Markierungen hinzu
*/
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));
//Blowout-Generation
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];
//Reflektieren Sie den Tweet-Inhalt im Ballon
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>';
//Schlüssel zum assoziativen Array"image"Wenn ja, fügen Sie ein Bild hinzu
if (tweetData[j].image) {
ins += "<img src='" + tweetData[j].image + ":thumb'></br >";
}
tw = 1;
}
}
ins += '</font>';
ins += '</div>';
//Generiere Blowout nur für Marker mit Tweet
if (tw == 1) {
//Installation von Markern
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++;
//Markierungsereigniseinstellungen
add_event_to_marker(marker, infoWindow, i);
}
aveLat += (item.latitudeE7 * 0.0000001);
aveLng += (item.longitudeE7 * 0.0000001)
markerNum++;
}
}
//Stellen Sie den Durchschnitt der Koordinaten auf die Mitte der Karte ein
aveLat /= markerNum;
aveLng /= markerNum;
map.setCenter(new google.maps.LatLng(aveLat, aveLng));
}
/**
*Fügen Sie einem Marker ein Ereignis hinzu
* @param {object} marker (required)Markierungsinformationen
* @param {object} infoWindow (required)Informationen zum Ballon
* @param {number} index (required)Indexnummer der Karteninformationen
*/
function add_event_to_marker(marker, infoWindow, index) {
var item = mapData[index];
item['marker'] = marker;
item['infoWindow'] = infoWindow;
item['infoWindow'].open(map, item['marker']);
//Zeigen Sie eine Sprechblase an, wenn Sie auf eine Markierung klicken
item['marker'].addListener('click', function (e) {
infoWindows_hide();
item['infoWindow'].open(map, item['marker']);
});
}
/**
*Verstecke den 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();
}
}
/**Zeigen Sie die Sprechblasen der Reihe nach an*/
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++;
}
}
}
/**Generieren Sie eine Polylinie*/
function generate_polyline() {
//Zeichne eine Linie
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 Karte</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=<Vorbereiteter GCP-Schlüssel>&callback=api_ready"></script>
</body>
</html>
sample.css
#map {
width: 1000px;
height: 600px;
}
Es ist als Tara Tara codiert, aber was ich tue, ist einfach und ich versuche, Tweets anzuzeigen, die zu jedem Zeitpunkt im Standortverlauf und in der Tweet-Zeit nahe an der Zeit liegen. Da die Koordinaten etwa alle 3 Minuten fein blieben, wird der Tweet angezeigt, der innerhalb der Zeit mit dem Standortverlauf und beim nächsten Mal (etwa 3 Minuten später) getwittert wurde.
Darüber hinaus wird die Flugbahn auch mithilfe der GoogleMap-Methode Polylinie angezeigt, sodass die Bewegungsbahn sichtbar ist.
3. Vorsichtsmaßnahmen
(1) Standortinformationen, Tweet-Inhalte und API-Schlüsselinformationen sind persönliche Informationen. Geben Sie sie daher niemals weiter!
(2) Bei der Ausführung in einer lokalen Umgebung tritt beim Zugriff auf eine lokale Datei mit Ajax mit Chrome ein Fehler auf. Führen Sie Chorme mit Sudo! [* Andere *] Zugriff auf lokale Dateien mit Ajax in Chrome
③ Sie können nur zu dem Datum zurückkehren, an dem Sie den Standortverlauf und die Tweet-Daten erhalten können! (Natürlich)
4. Referenzierte Webartikel
Es kann eine Referenz oder fast eine Kopie sein. .. .. .. Entschuldigung. .. .. Vielen Dank. (Ich habe auf verschiedene Websites verwiesen. Bitte lassen Sie mich wissen, wenn Sie sagen: "Oh, dieser Code ist eine Kopie des Codes, den ich geschrieben habe?")
・ Verwenden Sie die Google-Zeitleiste, um Reisen und Ausflüge aufzuzeichnen
・ Spielen Sie mit der Twitter-API Nr. 3 (Suchergebnisse abrufen)
Andere
Da es sich um einen Typ handelt, mit dem ich zufrieden bin, kann die Erklärung einige Auslassungen enthalten, aber wenn es schwer zu verstehen ist, fragen Sie bitte. .. ..
Recommended Posts