如何使用infobox而不是infwindow？

现在工作正常。 infowindow太大而丑陋。我想实现信息框，因为它更具可定制性。有人可以指导我如何使用信息框对象来创建弹出式标记窗口吗？如何使用infobox而不是infwindow？

var map,geocoder; 
var bound = new google.maps.LatLngBounds(); 
function initializeMap() { 
    geocoder = new google.maps.Geocoder(); 
    var latlng = new google.maps.LatLng(39.88445,-86.11084); 
    var myOptions = { 
    maxZoom: 14, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    map = new google.maps.Map(document.getElementById("map_canvas"), 
     myOptions); 
} 
function codeAddress() { 
    var infowindow = new google.maps.InfoWindow({}); 
    $('.eachLocation').each(function(index) { 
     var counter=index+1; 
     var addy = $(this).parent().find('span.LocAddHidden').text(); 
     geocoder.geocode({ 'address': addy}, function(results, status) { 
      if (status == google.maps.GeocoderStatus.OK) 
      { 
       map.setCenter(results[0].geometry.location); 
       var marker = new google.maps.Marker({ 
        position: results[0].geometry.location, 
        map: map,    
        title:addy, 
        }); 
       //Adding a click event to the marker 
       google.maps.event.addListener(marker, 'click', function() { 
        infowindow.setContent('<div id=\"infowindow\" style="width:235px; height:105px;>' 
             +'Hello World'+'</div>'); 
        infowindow.open(map, this); 
       }); 
       bound.extend(marker.getPosition()); 
       map.fitBounds(bound); 
      } 
     });//geocode END 
     counter=counter+1; 
    }); 
}

来源

2012-02-16 Anjana Sharma

您必须阅读由谷歌提供的这个例子： http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/docs/examples.html

你会发现这里的基本源代码：查看源代码：HTTP：//谷歌地图的实用程序库-V3 .googlecode.com/SVN /中继/信息框/例子/信息框，basic.html

你需要这个插件添加到您的网页：http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js

然后，你可能能够运行一些信息框，而不是信息窗口，有什么像你的情况：

function codeAddress() { 
    var infoboxOptions = { 
      content: '' 
      ,disableAutoPan: false 
      ,maxWidth: 0 
      ,pixelOffset: new google.maps.Size(0, 0) 
      ,zIndex: null 
      ,boxStyle: { 
       background:'' 
       ,opacity: 0.75 
      } 
      ,closeBoxMargin: "2px 2px 2px 2px" 
      ,closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif" 
      ,infoBoxClearance: new google.maps.Size(1,1) 
      ,isHidden: false 
      ,pane: "floatPane" 
      ,enableEventPropagation: false 
     }; 
    var ib = new InfoBox(infoboxOptions); 
    $('.eachLocation').each(function(index) { 
     var counter=index+1; 
     var addy = $(this).parent().find('span.LocAddHidden').text(); 
     geocoder.geocode({ 'address': addy}, function(results, status) { 
      if (status == google.maps.GeocoderStatus.OK) 
      { 
       map.setCenter(results[0].geometry.location); 
       var marker = new google.maps.Marker({ 
        position: results[0].geometry.location, 
        map: map,    
        title:addy, 
        html: 'Your HTML/text...' 
        }); 
       //Adding a click event to the marker 
       google.maps.event.addListener(marker, 'click', function() { 
        ib.setContent(marker.html); 
        ib.open(map,this); 
       }); 
       bound.extend(marker.getPosition()); 
       map.fitBounds(bound); 
      } 
     });//geocode END 
     counter=counter+1; 
    }); 
}

在我的情况下，有一个很好的DIV与我自己的CSS，我用的，在标记：

HTML：$（本）。html的（）

它得到每个” .myClass'的内容（.eachLocation你的情况）

来源

2012-02-16 05:51:31 Valky

太谢谢你了！上帝祝福你！ :) – 2012-02-16 14:27:42

不客气，我的荣幸！ – Valky 2012-02-16 15:11:08

如何使用infobox而不是infwindow？

回答

相关问题