造型谷歌地图InfoWindow

113

谷歌写了一些代码来协助这一点。以下是一些示例：Example using InfoBubble,Styled markers和Info Window Custom（使用OverlayView）。

上述链接中的代码采用不同的路线来实现类似的结果。其要点在于，直接设计InfoWindows并不容易，并且使用额外的InfoBubble类而不是InfoWindow，或者可以轻松地覆盖GOverlay。另一种选择是使用javascript（或jQuery）修改InfoWindow的元素，就像后来的ATOzTOA建议的那样。

可能最简单的这些示例是使用InfoBubble而不是InfoWindow。 InfoBubble可通过导入该文件（您应该自己托管）来获得：http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobubble/src/infobubble.js

InfoBubble's Github project page。

InfoBubble非常风格化，相对于信息窗口：

infoBubble = new InfoBubble({ 
     map: map, 
     content: '<div class="mylabel">The label</div>', 
     position: new google.maps.LatLng(-32.0, 149.0), 
     shadowStyle: 1, 
     padding: 0, 
     backgroundColor: 'rgb(57,57,57)', 
     borderRadius: 5, 
     arrowSize: 10, 
     borderWidth: 1, 
     borderColor: '#2c2c2c', 
     disableAutoPan: true, 
     hideCloseButton: true, 
     arrowPosition: 30, 
     backgroundClassName: 'transparent', 
     arrowStyle: 2 
}); 

infoBubble.open();

你也可以用给定的地图和标记调用它来打开：

infoBubble.open(map, marker);

又如，信息窗口自定义示例从Google Maps API扩展了GOverlay类，并将其用作创建更灵活的信息窗口的基础。它首先创建类：

/* An InfoBox is like an info window, but it displays 
* under the marker, opens quicker, and has flexible styling. 
* @param {GLatLng} latlng Point to place bar at 
* @param {Map} map The map on which to display this InfoBox. 
* @param {Object} opts Passes configuration options - content, 
* offsetVertical, offsetHorizontal, className, height, width 
*/ 
function InfoBox(opts) { 
    google.maps.OverlayView.call(this); 
    this.latlng_ = opts.latlng; 
    this.map_ = opts.map; 
    this.offsetVertical_ = -195; 
    this.offsetHorizontal_ = 0; 
    this.height_ = 165; 
    this.width_ = 266; 

    var me = this; 
    this.boundsChangedListener_ = 
    google.maps.event.addListener(this.map_, "bounds_changed", function() { 
     return me.panMap.apply(me); 
    }); 

    // Once the properties of this OverlayView are initialized, set its map so 
    // that we can display it. This will trigger calls to panes_changed and 
    // draw. 
    this.setMap(this.map_); 
}

在这之后进行覆盖GOverlay：

InfoBox.prototype = new google.maps.OverlayView();

您应该然后覆盖你需要的方法：createElement，draw，remove和panMap。它变得相当复杂，但理论上你现在只是在地图上绘制一个div，而不是使用普通的Info窗口。

来源

2011-04-12 13:20:27

+0

@Herman是否与KML层标记也这项工作？ – 2012-10-09 11:00:53

+0

@ShyamK这里有一个与[造型KML信息窗口]相关的问题（http://stackoverflow.com/questions/8421260/styling-kml-with-css-in-google-maps-v3），它可能会帮助你。我认为我的答案中的很多例子可能不适用于KML（我不确定），但也可以很容易地进行调整以适应这种情况。 – 2012-10-09 12:18:45

+11

应该注意的是，这里的一个链接是InfoBox对象（另一种类型的信息窗口）的示例，而不是InfoWindow对象（原始的Google信息窗口）。很高兴知道您是否在使用Google搜索引擎，并且可能会困惑于为什么您可以找到新的InfoBox（）和新的InfoWindow（）。 InfoBox是更新的，更容易自定义IMO，并且还有更多可以自定义的内容。另一个例子也可以在[这个SO答案]中看到（http://stackoverflow.com/a/7628522/881250） – Donamite 2013-06-23 11:37:30

31

可以修改使用jQuery独自整个信息窗口...

var popup = new google.maps.InfoWindow({ 
    content:'<p id="hook">Hello World!</p>' 
});

这里<p>元素将作为一个钩到实际的信息窗口。一旦domready触发，该元素将变得活跃并且可以使用javascript/jquery访问，如$('#hook').parent().parent().parent().parent()。

下面的代码只是在InfoWindow周围设置了一个2像素边框。

google.maps.event.addListener(popup, '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'); 
     } 
    } 
});

你可以做任何事情，比如设置一个新的CSS类或者只是添加一个新的元素。

玩的元素来获得你所需要的...

来源

2012-12-22 08:59:36 ATOzTOA

+4

这适用于我（少一个父母），并且可以运行acorss浏览器（opera，ff，即safari，chrome），但在IE9下不起作用。 – johntrepreneur 2013-03-19 17:13:24

+0

支持包含一些额外的代码，我正在寻找如何使用。谢谢 – MetalPhoenix 2014-11-18 16:41:14

+0

当我将它包含在文档（就绪），窗口（加载）中，或者在页面加载后直接粘贴到控制台时，我得到'popup is not defined'。我是否缺少外部js文件或什么？（3）> div：nth-child（4）> div> div> div：nth-child（2）{ – user1380540 2016-02-25 20:13:29

-1

你可以使用一个CSS类了。

$('#hook').parent().parent().parent().siblings().addClass("class_name");

美好的一天！

来源

2013-08-02 03:43:57 mariofertc

2

我用下面的代码应用一些外部CSS：

boxText = document.createElement("html"); 
boxText.innerHTML = "<head><link rel='stylesheet' href='style.css'/></head><body>[some html]<body>"; 

infowindow.setContent(boxText); 
infowindow.open(map, marker);

来源

2013-11-06 09:42:53 leochab

2

google.maps.event.addListener(infowindow, 'domready', function() { 

    // Reference to the DIV that wraps the bottom of infowindow 
    var iwOuter = $('.gm-style-iw'); 

    /* Since this div is in a position prior to .gm-div style-iw. 
    * We use jQuery and create a iwBackground variable, 
    * and took advantage of the existing reference .gm-style-iw for the previous div with .prev(). 
    */ 
    var iwBackground = iwOuter.prev(); 

    // Removes background shadow DIV 
    iwBackground.children(':nth-child(2)').css({'display' : 'none'}); 

    // Removes white background DIV 
    iwBackground.children(':nth-child(4)').css({'display' : 'none'}); 

    // Moves the infowindow 115px to the right. 
    iwOuter.parent().parent().css({left: '115px'}); 

    // Moves the shadow of the arrow 76px to the left margin. 
    iwBackground.children(':nth-child(1)').attr('style', function(i,s){ return s + 'left: 76px !important;'}); 

    // Moves the arrow 76px to the left margin. 
    iwBackground.children(':nth-child(3)').attr('style', function(i,s){ return s + 'left: 76px !important;'}); 

    // Changes the desired tail shadow color. 
    iwBackground.children(':nth-child(3)').find('div').children().css({'box-shadow': 'rgba(72, 181, 233, 0.6) 0px 1px 6px', 'z-index' : '1'}); 

    // Reference to the div that groups the close button elements. 
    var iwCloseBtn = iwOuter.next(); 

    // Apply the desired effect to the close button 
    iwCloseBtn.css({opacity: '1', right: '38px', top: '3px', border: '7px solid #48b5e9', 'border-radius': '13px', 'box-shadow': '0 0 5px #3990B9'}); 

    // If the content of infowindow not exceed the set maximum height, then the gradient is removed. 
    if($('.iw-content').height() < 140){ 
     $('.iw-bottom-gradient').css({display: 'none'}); 
    } 

    // The API automatically applies 0.7 opacity to the button after the mouseout event. This function reverses this event to the desired value. 
    iwCloseBtn.mouseout(function(){ 
     $(this).css({opacity: '1'}); 
    }); 
    });

// CSS放在样式表

.gm-style-iw { 
    background-color: rgb(237, 28, 36); 
    border: 1px solid rgba(72, 181, 233, 0.6); 
    border-radius: 10px; 
    box-shadow: 0 1px 6px rgba(178, 178, 178, 0.6); 
    color: rgb(255, 255, 255) !important; 
    font-family: gothambook; 
    text-align: center; 
    top: 15px !important; 
    width: 150px !important; 
}

来源

2016-08-29 11:22:41

+0

this}代码在Chrome中的尾部存在问题。您必须点击两次以获取尾部以显示正确的位置 – cpcdev 2016-09-07 03:36:27

+6

复制自http://en.marnoto.com/2014/09/5-formas-de-personalizar-infowindow.html – 2016-09-27 05:15:09

0

使用来自谷歌地图工具库中的InfoBox插件。它使得造型/管理地图弹出窗口变得更容易。

请注意，你需要确保它后加载谷歌地图API：

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=initMap" async defer></script> <script src="/js/infobox_packed.js" async defer></script>

来源

2017-04-14 13:40:38 Yarin

造型谷歌地图InfoWindow

回答

相关问题