Question

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

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;
    });
}

Answer 1

您必须阅读Google提供的此示例： http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/docs/examples.html

您可以在此处找到基本源代码：view-source：http：//google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/examples/infobox-basic.html

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

然后，您可以运行一些信息框而不是infowindow，在您的情况下使用类似的东西：

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）

我如何使用信息框而不是信息窗？

1 个答案: