造型Google地图InfoWindow
我一直在尝试对我的Google地图InfoWindow进行样式设置，但文档在这个主题上非常有限。 你如何deviseInfoWindow ？
谷歌写了一些代码来协助这个。 以下是一些示例： 使用InfoBubble ， 样式标记和信息窗口自定义 （使用OverlayView）的示例 。
上述链接中的代码采用不同的路线来实现类似的结果。 其要点在于直接deviseInfoWindows并不容易，使用额外的InfoBubble类而不是InfoWindow可能会更容易，或者可能会覆盖GOverlay。 另一个select是使用javascript（或jQuery）修改InfoWindow的元素，就像稍后的ATOzTOAbuild议的那样。
可能这些例子中最简单的是使用InfoBubble而不是InfoWindow。 您可以通过导入此文件（您应该自行托pipe）来获取InfoBubble： http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobubble/src/infobubble.js : http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobubble/src/infobubble.js
InfoBubble的Github项目页面 。
与InfoWindow相比，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类，并将其用作创build更灵活的信息窗口的基础。 它首先创build一个类：
/* 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窗口。
您可以单独使用jQuery来修改整个InfoWindow …
var popup = new google.maps.InfoWindow({ content:'<p id="hook">Hello World!</p>' });
这里<p>元素将作为实际InfoWindow的钩子。 一旦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类或只是添加一个新的元素。
玩弄元素来得到你需要的东西…
我用下面的代码来应用一些外部的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);
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; }
你也可以使用一个CSS类。
$('#hook').parent().parent().parent().siblings().addClass("class_name");
美好的一天！
使用Google地图实用程序库中的InfoBox插件。 它使得造型/pipe理地图popup窗口变得更容易。
请注意，您需要确保在google maps 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>
