html 显示信息,在信息窗口中显示 html 内容和图表

萧十郎

信息窗口的内容可以是任何字符串或HTML节点。从文档：content类型： 字符串|节点要在信息窗口中显示的内容。这可以是 HTML 元素、纯文本字符串或包含 HTML 的字符串。InfoWindow 将根据内容调整大小。要为内容设置显式大小，请将内容设置为具有该大小的 HTML 元素。要解决您的问题，请创建一个 HTML 节点以添加到同时包含字符串内容和图表的 InfoWindow 内容，并将其添加为节点：var infoWindowNode = document.createElement('div'); // main containing node for InfoWindow  var node        = document.createElement('div');    // for chartvar textNode = document.createElement('div');       // for "string content"textNode.innerHTML = contentString;infoWindowNode.appendChild(textNode);               // append "string content"infoWindowNode.appendChild(node);                   // append chartvar infoWindow  = new google.maps.InfoWindow();var chart       = new google.visualization.PieChart(node);chart.draw(data, options);infoWindow.setContent(infoWindowNode); // add node to InfoWIndow代码片段：var contentString = '

' +  '

' +  '

' +  '

Amol shah

' +  '

12324 - TM

' +  '

' +  ' Reporting : ' +  ' ABM: Jignesh Mehta ' +  ' RBM: Sunil boricha ' +  ' ZM: sachin pawar ' +  ' KPI : ' +  '

' +  '

';function drawChart(marker) {  // Create the data table.  var data = new google.visualization.DataTable();  data.addColumn('string', 'Topping');  data.addColumn('number', 'Slices');  data.addRows([    ['Mushrooms', 3],    ['Onions', 1],    ['Olives', 1],    ['Zucchini', 1],    ['Pepperoni', 2]  ]);  // Set chart options  var options = {    'title': 'Pizza sold @ ' +      marker.getPosition().toString(),    'width': 300,    'height': 150  };  var infoWindowNode = document.createElement('div');  var node = document.createElement('div');  var textNode = document.createElement('div');  textNode.innerHTML = contentString;  infoWindowNode.appendChild(textNode);  infoWindowNode.appendChild(node);  var infoWindow = new google.maps.InfoWindow();  var chart = new google.visualization.PieChart(node);  chart.draw(data, options);  infoWindow.setContent(infoWindowNode /*contentString + node */ );  infoWindow.open(marker.getMap(), marker);}function initialize() {  var mapOptions = {    center: new google.maps.LatLng(-33.891044, 151.275537),    zoom: 10,    mapTypeId: google.maps.MapTypeId.ROADMAP  };  var map = new google.maps.Map(document.getElementById("map_canvas"),    mapOptions);  var marker1 = new google.maps.Marker({    position: mapOptions.center,    map: map  });  google.maps.event.addListener(marker1, 'click', function() {    drawChart(this);  });  google.maps.event.trigger(marker1, 'click');}google.load('visualization', '1.0', {  'packages': ['corechart']});html,body,#map_canvas {  height: 100%;  width: 100%;  padding: 0;  margin: 0;}