Javascript 谷歌地图Api-信息窗口中的多个项目

我试图显示包含从GeoJson数据绘制的高程图以及单击的GeoJson功能类型（Tip_属性）的信息窗口。似乎我已经成功地将立面图放入了信息窗口，但我无法获取其他属性

我的申请代码是：

var elevator;
var map;
var chart;
var infowindow;

//loading the visualization API
google.load('visualization', '1', {packages: ['columnchart']});

//initializing the map
function initialize() {
var options = {
    center: new google.maps.LatLng(44.701991, 22.624884),
    zoom: 12,
    mapTypeId: google.maps.MapTypeId.TERRAIN
};

map = new google.maps.Map(document.getElementById("map"), options);

//loading the GeoJSON file, which contains the Tip_drum attribute
trasee = new google.maps.Data();
map.data.loadGeoJson('http://googledrive.com/host/0B55_4P6vMjhITEU4Ym9iVG8yZUU/trasee.geojson');

//creating the infowindow content
infowindow = new google.maps.InfoWindow(
{content: '<div class = "corp" style="width: 260px; height: 200px">' + '<div id = "elevation_chart">' +
'</div>' + '</div>'}
)

//adding events
map.data.addListener('click', function (event) {
    infowindow.setPosition(event.latLng)
    infowindow.setMap(map)
    if (event.feature.getGeometry().getType() === 'LineString') {
        drawPath(event.feature.getGeometry().getArray());
    }
});

map.data.addListener('mouseover', function(event) {
map.data.revertStyle();
  map.data.overrideStyle(event.feature, {strokeWeight: 8, strokeColor: 'blue'});
});

map.data.addListener('mouseout', function(event) {
map.data.revertStyle();
});
 elevator = new google.maps.ElevationService();     
}

//creating the functions needed for Elevation Charts
function drawPath(path) {
chart = new google.visualization.ColumnChart(document.getElementById('elevation_chart'));

var pathRequest = {
    'path': path,
    'samples': 256
};

elevator.getElevationAlongPath(pathRequest, plotElevation);
}

function plotElevation(results, status) {
if (status != google.maps.ElevationStatus.OK) {
    return;
}
var elevations = results;

var elevationPath = [];
for (var i = 0; i < results.length; i++) {
    elevationPath.push(elevations[i].location);
}

var data = new google.visualization.DataTable();
data.addColumn('string', 'Sample');
data.addColumn('number', 'Elevation');
for (var i = 0; i < results.length; i++) {
    data.addRow(['', elevations[i].elevation]);
}

document.getElementById('elevation_chart').style.display = 'block';
chart.draw(data, {
    height: 150,
    width: 260,
    legend: 'none',
    titleY: 'Elevation (m)'
});
}

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

var电梯；
var映射；
var图；
var信息窗口；
//加载可视化API
load（'visualization'，'1'，{packages:['columnchart']}）；
//初始化地图
函数初始化（）{
变量选项={
中心：新google.maps.LatLng（44.701991,22.624884），
缩放：12，
mapTypeId:google.maps.mapTypeId.TERRAIN
};
map=新的google.maps.map（document.getElementById（“map”），选项）；
//加载GeoJSON文件，该文件包含Tip_drum属性
trasee=new google.maps.Data（）；
map.data.loadGeoJson（'http://googledrive.com/host/0B55_4P6vMjhITEU4Ym9iVG8yZUU/trasee.geojson');
//创建infowindow内容
infowindow=新建google.maps.infowindow(
{内容：'+''+
'' + ''}
)
//添加事件
map.data.addListener（'click'，函数（事件）{
infowindow.setPosition（event.latLng）
infowindow.setMap（map）
if（event.feature.getGeometry（）.getType（）=='LineString'）{
drawPath（event.feature.getGeometry（）.getArray（））；
}
});
map.data.addListener（'mouseover'，函数（事件）{
map.data.revertStyle（）；
overrideStyle（event.feature，{strokeWeight:8，strokeColor:'blue'}）；
});
map.data.addListener（'mouseout'，函数（事件）{
map.data.revertStyle（）；
});
电梯=新的google.maps.ElevationService（）；
}
//创建立面图所需的函数
函数drawPath（路径）{
chart=新的google.visualization.ColumnChart（document.getElementById（'elevation_chart'））；
var路径请求={
“路径”：路径，
“样本”：256
};
电梯.GetElevationLongPath（路径请求，绘图高程）；
}
功能图高程（结果、状态）{
if（status！=google.maps.ElevationStatus.OK）{
返回；
}
var=结果；
var提升路径=[]；
对于（var i=0；i

---

JSFIDLE中的完整应用程序代码，此处：

将类型也作为参数传递给drawPath：

drawPath(event.feature.getGeometry().getArray(),
         event.feature.getProperty('Tip_drum'));

function drawPath(path, type) {
    chart = new google.visualization.ColumnChart(document.getElementById('elevation_chart'));

    //creates a textNode based on the type and inserts it before the chart
    document.getElementById('elevation_chart').parentNode
       .insertBefore(document.createTextNode(type),
                     document.getElementById('elevation_chart'));

    var pathRequest = {
        'path': path,
            'samples': 256
    };

    elevator.getElevationAlongPath(pathRequest, plotElevation);
}

然后使用drawPath中的参数：

drawPath(event.feature.getGeometry().getArray(),
         event.feature.getProperty('Tip_drum'));

function drawPath(path, type) {
    chart = new google.visualization.ColumnChart(document.getElementById('elevation_chart'));

    //creates a textNode based on the type and inserts it before the chart
    document.getElementById('elevation_chart').parentNode
       .insertBefore(document.createTextNode(type),
                     document.getElementById('elevation_chart'));

    var pathRequest = {
        'path': path,
            'samples': 256
    };

    elevator.getElevationAlongPath(pathRequest, plotElevation);
}

---

演示：

您的小提琴不再显示轨迹。请在问题本身中发布一个链接，而不是指向外部站点的链接。这个问题的最后一个版本发生了什么？在触发

domready

事件之前，您将无法访问infowindow中的DOM。在这种情况下，您的方法可以正常工作，但是如果我想添加多个属性（例如，描述和其他详细信息），如何使用换行符分隔所有文本节点>您还可以使用带有insertBefore的元素节点，例如，您可以在textNode之后插入

-元素以获得换行符。当然，您也可以将textNodes放入块元素（如p或div）中并插入该元素。见：