Google地图自定义信息窗口

时间:2016-06-10 00:06:49

标签: javascript angularjs google-maps google-fusion-tables

http://plnkr.co/edit/VcsNt1roifC0n64MgzrP

});
var node=document.createElement('div');
  node.innerHTML= '';//set chart URL
  self.infowindow.setOptions({content:node,map:self.map});
 };
}

第126行: 尝试为我的多边形图层绘制一个custominfo窗口(我将在其中使用html)。一旦我到达上面的舞台,我无法让它工作;导致我的地图无法加载。任何帮助表示赞赏。

===

第108行

// Polygon for Outlines
self.polygon2 = new google.maps.FusionTablesLayer({
  suppressInfoWindows: true,
  query: {
    from: self.outlineFTID,
    select: self.outlineColumn
  },
  styleId: 2,
  templateId: 2
});

// generate new polygon window
self.infowindow = new google.maps.InfoWindow();
google.maps.event.addListener(self.polygon1, 'click', function(e) {});
//call drawVisualization when the infowindow is ready
google.maps.event.addListenerOnce(self.infowindow, 'domready', function() {

});

它到目前为止工作...但是当我添加以下内容时它会中断:

//create the content for the infowindow
  var node=document.createElement('div');
  node.innerHTML= 'hello';//set your chart URL
  self.infowindow.setOptions({position:e.latLng,content:node,map:self.map});
 });
}

1 个答案:

答案 0 :(得分:3)

像这样的Cusomize信息窗口,你可以在我的情况下在描述变量中写任何html,我写自己需要的HTML。

var description = '<h3>'+j.name+'</h3>'
                + '<div>'
                + '<p><b>Map:</b> Open Society Map, <a href="#" onclick="abcd(\''
                + mapOpengeneral + '\')">'+j.name+" "+'Map</a></p>'
                + '</div>';
          var infowindow = new google.maps.InfoWindow({
                content : description
            });
          google.maps.event.addListener(marker,
                    'mouseover', function() {
                        infowindow.open(map, marker);
                    });