Google maps API:V2:使用bindInfoWindowHtml自定义信息窗口

时间:2010-03-29 22:15:24

标签: google-maps

API文档昨晚给了我“bindInfoWindowHtml”的希望 但它似乎没有取代默认的infoWindow,即使你提供自己的类等。

我尝试过使用 labeledmarker 等其他想法。但它不支持可拖动标记。因此无法在我的应用程序中使用它。

以下是显示信息的示例代码。窗口里面,原始的泡沫。 有没有办法覆盖那个窗口!

`
       

<style type="text/css">
    .infoWindowCustomClass
    {
        width: 500px;
        height: 500px;
        background-color: #CAEE96;
        color: #666;
    }
</style>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example</title>
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key="" type="text/javascript"></script>
<script type="text/javascript">

function load() {
  if (GBrowserIsCompatible())
  {
        // Create our "tiny" marker icon
        var blueIcon = new GIcon(G_DEFAULT_ICON);
        blueIcon.image = "http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png";

        // Set up our GMarkerOptions object
        markerOptions = { icon:blueIcon };

        var map = new GMap2(document.getElementById("map"));
        map.setCenter(new GLatLng(33.968064,-83.377047), 13);

        markerOptions.title = "fart";
        var point = new GLatLng(33.968064,-83.377047);
        var marker = new GMarker(point);
        var tempName = document.getElementById("infoWindowCustom");
        marker.bindInfoWindowHtml(tempName);
        map.addOverlay(marker);
    }
}

</script>`

这是DIV -

<DIV id="infoWindowCustom" name="infoWindowCustom" class="infoWindowCustomClass">
Name : <TEXTAREA NAME="nameID" ID="nameID" ROWS="2" COLS="25"></TEXTAREA>
Comments : <TEXTAREA NAME="commentsID" ID="commentsID" ROWS="4" COLS="25"></TEXTAREA>
</DIV>

1 个答案:

答案 0 :(得分:1)

解决方法如下 -

不是像上面那样绑定它,而是选择lang / lats并在那个地方启动一个div 这似乎工作得很好。