Google Maps v3 - 如何设置“气球”的样式并为国家着色？答案

【问题标题】：Google Maps v3 - how to style the "baloon" and to color a country?Google Maps v3 - 如何设置“气球”的样式并为国家着色？
【发布时间】：2012-01-18 06:58:24
【问题描述】：

有谁知道当您单击一个地方时如何设置出现在 Google Maps v3 中的气球样式？我想改变默认的“漫画风格”。

第二个问题：是否可以自动（或以其他方式）为国家/地区着色（即我希望美国带有红色覆盖层，加拿大带有黄色覆盖层等等）？

谢谢，大

【问题讨论】：

下次 - 最好单独发布 2 个问题

标签： google-maps google-maps-api-3 google-maps-styled

【解决方案1】：

我可以看到 infowindow 气球具有内联样式，因此将样式应用于它们是一个问题。因此，一种替代方法是为气泡创建自己的类（或找到一个，例如看这里：Google Maps: How to create a custom InfoWindow?）。

您的第二个问题：没有简单而通用的方式来显示您想要的叠加层。我的意思是，没有这样的 API 调用。但是使用多边形可以相对容易地完成。（看How do i Add and Remove polygons on a Google Map (version 3)?），你只需要国家边界，你可以在网上找到。

【讨论】：

google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/… 适合我。

【解决方案2】：

我通过在单击标记时切换自定义元素解决了样式问题。我需要创建更小的信息窗口，所以我制作了一个自定义元素，在没有漫画风格指针的情况下单击标记来显示。

google.maps.event.addListener(marker, 'click', function() {
  loadInfoWindow(map, marker);
});

function loadInfoWindow(map, marker){
        clearInfoWindow();
        pixelOffset = getPixelPosInMap(map, marker);
        var iwc = ''; // infowindow markup goes here
        $('#iwContainer').css({'margin-top':(pixelOffset.y - 100), 'margin-left':(pixelOffset.x - 40)}).html(iwc).fadeIn('fast');
    }

function getPixelPosInMap(map, marker){
        var scale = Math.pow(2, map.getZoom());
        var nw = new google.maps.LatLng(
            map.getBounds().getNorthEast().lat(),
            map.getBounds().getSouthWest().lng()
        );
        var worldCoordinateNW = map.getProjection().fromLatLngToPoint(nw);
        var worldCoordinate = map.getProjection().fromLatLngToPoint(marker.getPosition());
        return new google.maps.Point(
            Math.floor((worldCoordinate.x - worldCoordinateNW.x) * scale),
            Math.floor((worldCoordinate.y - worldCoordinateNW.y) * scale)
        );
    }

此代码使用 jQuery 获取信息窗口容器#iwContainer。对于信息窗口容器，我有以下样式。

#iwContainer {
  position: absolute;
  display: none;
  background-color: white;
  color: #900;
  font-size: 10px;
  padding: 5px;
  width: 90px;
  border: 1px solid #900;
  border-radius: 5px;
  z-index: 100;
  opacity: 0.85;
}

【讨论】：