Question

我一直在玩twitter API获取随机推文甚至地理标记的推文以及谷歌地图API。但是我想将这两个结合起来并尝试在谷歌地图上显示地理标记的推文。这是我的代码，用于获取地理标记的推文工作正常。

var geo = (geo.coordinates[0], geo.coordinates[1]) 
//var geo = (34.052234, -118.243685) 
client.get('search/tweets', { q:string.teamname, geocode: geo, count: 5},
    function searchTweets(err, data, response) {
        for(var index in data.statuses){
            var tweet = data.statuses[index]; 
            console.log(tweet.text);
            console.log(tweet.geo.coordinates) 
        }
   });

在另一个文件中，我根据经度和纬度生成了一张地图，我了解到，一旦我检索到推文的坐标，我就可以用同样的方式在Google地图上表示推文。但是，我的代码无效。我的问题是，如何组合这两段代码来生成一个标有地理位置推文的地图？

function initialize() {

  var myLatlng = new google.maps.LatLng(geo.coordinates[0], geo.coordinates[1]);
  var mapOptions = {
  center: myLatlng
  zoom: 10,
  }
  var map = new google.maps.Map(document.getElementById("map-canvas"),      mapOptions);
  var marker = new google.maps.Marker({
  position: myLatlng,
  map: map,
  title:"Tweet});

  var infowindow = new google.maps.InfoWindow({
  content: 'Geo tagged Tweet',
  maxWidth:200 });

 infowindow.open(map,marker);
 google.maps.event.addListener(marker, 'click', function() {
 infowindow.open(map, marker); });
 }

 google.maps.event.addDomListener(window, 'load', initialize);

Answer 1

我会做这样的事情（未经测试 - 我只是写下一些想法）。

1）你应该删除init以便它只包含地图设置。确保在函数外部声明map，并包含对使用lat / lng数据提取数据的函数的调用。

var map;

function initialize() {
  var lat = geo.coordinates[0];
  var lng = geo.coordinates[1]
  var myLatlng = new google.maps.LatLng(lat, lng);
  var mapOptions = { center: myLatlng, zoom: 10 }
  map = new google.maps.Map(document.getElementById("map-canvas"),      mapOptions);
  getData(lat, lng, processData);
}

2）将数据提取代码包装在新的函数声明中，该声明接受lat / lng数据和回调。

function getData(lat, lng, callback) {
  client.get('search/tweets', { q:string.teamname, geocode: geo, count: 5},
    function searchTweets(err, data, response) {
      callback(data.statuses);
    }
  )
};

3）处理推文信息。为每条推文创建一个标记（将标记添加到标记数组）并更新地图

function processData(data) {

  var markers = [];

  for (var i = 0, l = data.length; i < l; i++) {

    var marker = new google.maps.Marker({
        id: i,
        position: myLatlng(data[i].geo.coordinates[0], data[i].geo.coordinates[1),
        map: map,
        title: "Tweet"
    });

    markers.push(marker);

    var infowindow = new google.maps.InfoWindow({
        content: data[i].text,
        maxWidth: 200
    });

    infowindow.open(map, marker);

    google.maps.event.addListener(marker, 'click', function() {
       infowindow.open(map, marker);
    });

  }
}

如何在地图上显示地理定位的推文

1 个答案: