自定义信息窗口 [英] Customizing an InfoWindow

问题描述

是否可以更改InfoWindow的边框颜色，对齐方式，填充和其他属性?我已经找了一个星期，但我总是以此处.而且它不提供代码.

Is it possible to change the color of the border, the alignment, padding and other attributes of an InfoWindow? I've been looking for this for a week but I always end up here. And it does not provide a code.

这是我的代码.

        //Declare an infoWindow variable - shows when a marker is tapped/clicked
        var infoWindow = new google.maps.InfoWindow;

        // Change this depending on the name of your PHP file
        downloadUrl("outputXML.php", function(data)
        {
            var xml = data.responseXML;
            var markers = xml.documentElement.getElementsByTagName("marker");
            for (var i = 0; i < markers.length; i++) {
            var name = markers[i].getAttribute("name");
            var address = markers[i].getAttribute("address");
            var type = markers[i].getAttribute("type");
            var point = new google.maps.LatLng(
                    parseFloat(markers[i].getAttribute("lat")),
                    parseFloat(markers[i].getAttribute("lng")));
            var html = "<b>" + name + "</b> <br/>" + address;
            var icon = customIcons[type] || {};
            var marker = new google.maps.Marker({
                map: map,
                position: point,
                icon: icon.icon,
                title:name
                });
            bindInfoWindow(marker, map, infoWindow, html);
            }
       });               
        
        function bindInfoWindow(marker, map, infoWindow, html) {
            google.maps.event.addListener(marker, 'click', function() {
              infoWindow.setContent(html);
              infoWindow.open(map, marker);
            });
          }

          function downloadUrl(url, callback) {
            var request = window.ActiveXObject ?
                new ActiveXObject('Microsoft.XMLHTTP') :
                new XMLHttpRequest;

            request.onreadystatechange = function() {
              if (request.readyState == 4) {
                request.onreadystatechange = doNothing;
                callback(request, request.status);
              }
            };

            request.open('GET', url, true);
            request.send(null);
          }//END FUNCTION BINDINFOWINDOW
        
            function doNothing() {} //For request.onreadystatechange

顺便说一句，我是从在线数据库中捕获这些值的，我们不必介意它们都工作正常，唯一的问题是如何自定义infoWindow.

By the way, I'm catching those values from an online database, we don't have to mind that, they're all working fine, the only problem is how to customize an infoWindow.

请帮助我.谢谢.

添加:我忘了说我将其插入到android应用程序中.我正在使用webview.

ADD: I forgot to say that I will insert this into an android application. I'm using webview.

推荐答案

您传递给InfoWindow的内容可能是:文本，HTML或DOM元素.默认情况下，InfoWindow的大小适合您传递的whataver内容，因此以描述方式控制内容的最佳方法是创建div，将CSS类分配给div，然后您将完全控制您的InfoWindow内容的外观.

The content that you pass to an InfoWindow may be: text, HTML, or a DOM element. The InfoWindow is by default sized to fit whataver content you pass, so the best way to control the content the way you describe is to create a div, assign a CSS class to the div, and then you will have complete control over the appearance of your InfoWindow content.

此外，如果您想更好地控制窗口结构本身的实际外观，则可以考虑使用

Also, if you want to have more control over the actual appearance of the window structure itself, you may want to consider using the InfoBubble Utility Library as a stylable drop-in replacement for the standard InfoWindow.

这篇关于自定义信息窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！