Google地图自定义信息框

我正在尝试按照此示例合并自定义信息框，但我的代码不起作用。 有人可以看一看，看看我哪里出错了吗？

我已经评论了示例代码的开始/结束位置以及我试图调用它的位置。

function initialize() { var mapOptions = { zoom: 12, center: new google.maps.LatLng(52.204872,0.120163), mapTypeId: google.maps.MapTypeId.ROADMAP, styles: styles, scrollwheel: false }; var map = new google.maps.Map(document.getElementById('map_canvas'),mapOptions); setMarkers(map, sites); infowindow = new google.maps.InfoWindow({ content: "loading..." }); } var sites = [ // List all locations for each pin ['The Frontroom', 52.202977,0.138938, 1, '
The Frontroom. 
23-25 Gwydir Street, Cambridge, CB1 2LG 
01223 305 600
'], ]; function setMarkers(map, markers) { for (var i = 0; i < markers.length; i++) { var sites = markers[i]; var siteLatLng = new google.maps.LatLng(sites[1], sites[2]); var marker = new google.maps.Marker({ position: siteLatLng, map: map, title: sites[0], zIndex: sites[3], html: sites[4], icon: "http://visualartscambridge.org/wp-content/uploads/2013/03/map-pin.png" }); // Begin example code to get custom infobox var boxText = document.createElement("div"); boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background: yellow; padding: 5px;"; var myOptions = { content: boxText ,disableAutoPan: false ,maxWidth: 0 ,pixelOffset: new google.maps.Size(-140, 0) ,zIndex: null ,boxStyle: { background: "url('tipbox.gif') no-repeat" ,opacity: 0.75 ,width: "280px" } ,closeBoxMargin: "10px 2px 2px 2px" ,closeBoxURL: "http://sofzh.miximages.com/javascript/close.gif" ,infoBoxClearance: new google.maps.Size(1, 1) ,isHidden: false ,pane: "floatPane" ,enableEventPropagation: false }; // end example code for custom infobox google.maps.event.addListener(marker, "click", function () { infowindow.setContent(this.html); // Call myOptions when marker is clicked and opened infowindow.open(map, myOptions, this); }); } } google.maps.event.addDomListener(window, 'load', initialize); 

Answer 1

删除现有代码的这部分：

 google.maps.event.addListener(marker, "click", function () { infowindow.setContent(this.html); // Call myOptions when marker is clicked and opened infowindow.open(map, myOptions, this); }); 

用InfoBox示例替换它：

 var ib = new InfoBox(myOptions); google.maps.event.addListener(marker, "click", function (e) { ib.open(map, this); // change the map variable appropriately }); 

工作实例

对于多个点，使用函数闭包（createMarker函数）来维护标记和infoBox之间的关联：

 function createMarker(site, map){ var siteLatLng = new google.maps.LatLng(site[1], site[2]); var marker = new google.maps.Marker({ position: siteLatLng, map: map, title: site[0], zIndex: site[3], html: site[4] /* , icon: "http://visualartscambridge.org/wp-content/uploads/2013/03/map-pin.png" this icon no longer available */ }); // Begin example code to get custom infobox var boxText = document.createElement("div"); boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background: yellow; padding: 5px;"; boxText.innerHTML = marker.html; var myOptions = { content: boxText ,disableAutoPan: false ,maxWidth: 0 ,pixelOffset: new google.maps.Size(-140, 0) ,zIndex: null ,boxStyle: { background: "url('http://google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.1.12/examples/tipbox.gif') no-repeat" ,opacity: 0.75 ,width: "280px" } ,closeBoxMargin: "10px 2px 2px 2px" ,closeBoxURL: "http://sofzh.miximages.com/javascript/close.gif" ,infoBoxClearance: new google.maps.Size(1, 1) ,isHidden: false ,pane: "floatPane" ,enableEventPropagation: false }; // end example code for custom infobox google.maps.event.addListener(marker, "click", function (e) { ib.close(); ib.setOptions(myOptions); ib.open(map, this); }); return marker; } function setMarkers(map, markers) { for (var i = 0; i < markers.length; i++) { createMarker(markers[i], map); } } 

使用实例中的所有要点的工作示例

Answer 2

请确保它具有属性html。 因为它指的是当时的标记。

 google.maps.event.addListener(marker, "click", function () { infowindow.setContent(this.html); // Call myOptions when marker is clicked and opened infowindow.open(map, myOptions, this); }); 

还试着限制你的全局变量。 请试试这个小提琴一次。

Answer 3

好吧，从你的html / jsp中获取http://google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.1.9/中的 inbox.js文件。 您还需要从代码中删除infowindow对象

并使用。修改您的代码

 function setMarkers(map, markers) { ......// same as your code var ib = new InfoBox(myOptions); google.maps.event.addListener(marker, "click", function (e) { ib.open(map, this); }); .....//same as your code } 

如果你第一次没有成功，我们可能需要尝试几次。 请每次都使用结果发布修改后的代码。