如何自定义infoWindow（但不使用google-maps-utility-library-v3）？

Question

我想自定义我的infoWindow添加“border-radius”和“background-color”，但在我在这里搜索的每个类似问题中，答案是使用 google-maps-utility-library- V3 ...

我知道这是一个很好的解决方案，（因为其他原因，我使用它），但我想知道是否有另一种方法来实现我想做的...

我试着这样用jquery：

var infoWindow;  //like global variable

var centrocircle= new google.maps.LatLng(X,Z);
    var circleOptions = new google.maps.Circle({
        strokeColor: colore,
        strokeOpacity: 1,
        strokeWeight: 2,
        fillColor: colore,
        fillOpacity: 0.85,
        map: map,                   
        center: centrocircle,
        info: '<p id="hook">home</p>',
        radius: raggio*770
    });

google.maps.event.addListener(circleOptions, 'domready', function() {
    var l = $('#hook').parent().parent().parent().siblings();
    for (var i = 0; i < l.length; i++) {
        if($(l[i]).css('z-index') == 'auto') {
            $(l[i]).css('border-radius', '16px 16px 16px 16px');
            $(l[i]).css('border', '2px solid red');
        }
    }  
});

google.maps.event.addListener(circleOptions, 'click', function() {                  
    infoWindow.setPosition(this.center);
    infoWindow.setContent(this.info); 
    infoWindow.open(map,this);
})                

但不起作用....

我希望你能帮助我......谢谢！

修改

var infoWindow;  //like global variable

var tooltipHTML = 
    '<div id="content" style="width:400px">'+
    '   <div id="infoWindow">'+
    '   </div>'+
    '   <h2 id="firstHeading" class="firstHeading">NAME           CUSTOMER</h2>'+
    '   <div id="bodyContent">'+
    '       <p>MORE INFO OF: <b>CUSTOMER</b></p>'+
    '   </div>'+
    '</div>';

并且

var centrocircle= new google.maps.LatLng(X,Z);
var circleOptions = new google.maps.Circle({
   strokeColor: colore,
   strokeOpacity: 1,
   strokeWeight: 2,
   fillColor: colore,
   fillOpacity: 0.85,
   map: map,     
   center: centrocircle,
   info: tooltipHTML,
   radius: raggio*770
});

google.maps.event.addListener(circleOptions, 'click', function() {     
   infoWindow.setPosition(this.center);
   infoWindow.setContent(this.info); 
   infoWindow.open(map,this);
})

Answer 1

您可以自定义de infowindow将一些CSS规则应用于以下类＆＃34; .gm-style-iw＆＃34;。最近我写了一篇文章解释，你可以在这里阅读 - 5 ways to customize Google Maps InfoWindow

Answer 2

另一个解决方案仍然是一个hackish变通方法，并依赖于当前的层次结构/实现。

JSFiddle

我用它来完全按照我喜欢的方式实现内容，手动添加我自己的箭头（使用CSS），然后修改了位置，以便使用地图上的标记正确排列。

主要思想是隐藏所有周围的内容，并使用'pixelOffset'属性手动对齐标记。

var infoWindow = new google.maps.InfoWindow({
    pixelOffset: new google.maps.Size(4, 20),
});

google.maps.event.addListener(displayedInfoWindow, 'domready', function() {
    var el = $('.gm-style-iw');
    el.siblings().css('visibility', 'hidden');
    el.click(function() {
        displayedInfoWindow.close();
    });
});

displayedInfoWindow.setContent(myHtmlContent);
displayedInfoWindow.open(myMapObj, marker);

Answer 3

更好地使用工具提示：

根据需要声明HTML结构：

var tooltipHTML = 
    '<div id="content" style="width:400px">'+
    '   <div id="infoWindow">'+
    '   </div>'+
    '   <h2 id="firstHeading" class="firstHeading">NAME CUSTOMER</h2>'+
    '   <div id="bodyContent">'+
    '       <p>MORE INFO OF: <b>CUSTOMER</b></p>'+
    '   </div>'+
    '</div>';

您需要一个空的infoWindow：

var infowindow = new google.maps.InfoWindow({});

然后插入工具提示：

bindInfoWindow(circleOptions, map, infowindow, tooltipHTML);

bindInfoWindow函数为元素添加了一个监听器。

function bindInfoWindow(circle, map, infowindow, strDescription) {
    google.maps.event.addListener(circle, 'click', function() {
        infowindow.setContent(strDescription);
        infowindow.open(map, marker);
    });
}

编辑：有时，Circle tooltip's存在问题，因此，如果上述代码不起作用，我发现HERE可能是标题attibute的解决方法：< / p>

google.maps.event.addListener(circle,'mouseover',function(){
     this.getMap().getDiv().setAttribute('title',this.get('title'));});

google.maps.event.addListener(circle,'mouseout',function(){
     this.getMap().getDiv().removeAttribute('title');});