Google融合表格数据并将图像更改为标记

如何解决Google融合表格数据并将图像更改为标记

| 这是我的问题。我想将不同的图像设置为融合表提供的标准标记。当我将此坐标与一个标记关联时，我从包含我的点\“（coord，coord）\”但的列中提取数据，但未显示该坐标！我认为该解决方案非常简单，但我无法做到：(.。请阅读此代码中间的“这里是问题”一节，以取得清晰的主意。谢谢！！！！

 function initialize() {
  geocoder = new google.maps.Geocoder();
  map = new google.maps.Map(document.getElementById(\'map_canvas\'),{
    center: new google.maps.LatLng(46.06454,13.23561),//the center lat and long
    zoom: 9,//zoom

    mapTypeId: google.maps.MapTypeId.ROADMAP //the map style
  });


  //make gviz request
  setData();

}

/* GVIZ - get data from Fusion Tables */

function setData() {
  //create a viz query to send to Fusion Tables
  var query = new google.visualization.Query(\'http://www.google.com/fusiontables/gvizdata?tq=\' + encodeURIComponent(\"SELECT dove FROM 781907\"));

  //set the callback function that will be called when the query returns
  query.send(getData);

}

function getData(response) {

  numRows = response.getDataTable().getNumberOfRows();


  for (i = 0; i < numRows; i++) {

      var row = response.getDataTable().getValue(i,0);


    codeAddress(row);
  }
}


var geocoder;


function codeAddress(latlng) {

// HERE IS THE PROBLEM!!!!
// Test show correctly \"(lat,lng)\" BUT no marker showed on the map!
            document.getElementById(\"test\").innerHTML = latlng; 
      geocoder.geocode( { \'latLng\': latlng},function(results,status) {
        if (status == google.maps.GeocoderStatus.OK) {

        var marker = new google.maps.Marker({
          map: map,position: latlng
//icon: new google.maps.MarkerImage(\"http://www.google.com/images/icons/product/fusion_tables-32.png\")

      });

    } 
  });
}

更新：基于@Trott \的答案，也许像这样吗？但仍然无法运行。有什么建议吗？

function getData(response) {

  numRows = response.getDataTable().getNumberOfRows();

  //create an array of row values
  for (i = 0; i < numRows; i++) {
    rowtext = response.getDataTable().getValue(i,0);
    var strArr[] = rowtext.split(\",\");
    document.getElementById(\"via\").innerHTML = rowtext;
    row = new google.maps.LatLng(strArr[0],strArr[1]);
    codeAddress(row);
  }
}

    

解决方法

geocoder.geocode()

需要

LatLng

对象。您的变量ѭ4simply只是文本。您将需要找到一种将其转换为

LatLng

对象的方法。最明显的方法可能是使用正则表达式或其他方法进行解析，然后将经纬度和经度传递给

new google.maps.LatLng()

。可能会有一个更优雅的解决方案，但这将起作用。 如果有帮助，这里是我对您的代码进行的一些快速修改，以确认我上面写的内容。我只是硬编码了您的第一对坐标。您仍然需要写一些东西来解析数据。

function codeAddress(latlng) {
//Whoops,latlng is a string.  We need it to be an object.  Let\'s just hardcode one for demo purposes.
latlng=new google.maps.LatLng(46.0724339,13.249490000000037);
geocoder.geocode( { \'latLng\': latlng},function(results,status) {

        if (status == google.maps.GeocoderStatus.OK) {

        var marker = new google.maps.Marker({
          map: map,position: latlng,icon: new google.maps.MarkerImage(\"http://www.google.com/images/icons/product/fusion_tables-32.png\")

      });

    }
  });
}

更新：如果您（@Massimo）想要按照更新时的方式进行操作，则需要删除括号和空格。尝试更多类似这样的方法：

function getData(response) {

  numRows = response.getDataTable().getNumberOfRows();

  //create an array of row values
  for (i = 0; i < numRows; i++) {
    var rowtext = response.getDataTable().getValue(i,0);
    var sanitizedText = rowtext.replace(/[\\(\\)\\s]/g,\"\");
    var strArr = sanitizedText.split(\",\");
    document.getElementById(\"via\").innerHTML = rowtext;
    row = new google.maps.LatLng(strArr[0],strArr[1]);
    codeAddress(row);
  }
}