在Trulia地图中自定义Google地图标记

Question

如何制作Google地图标记，例如Trulia地图中使用的标记？

1. 标记底部有指针
2. 标记有价格标签。
3. 标记似乎具有可变长度，具体取决于其中的标签。
4. 标记在悬停时会变色（灰色）或者在正常颜色（绿色）旁边已经点击（橙色）。

这是否有图书馆？

屏幕截图位于

之下



更新

到目前为止，我找到了一个库MarkerWithLabel，我可以重现上面的2,3和4。请参阅下面的代码。 但我似乎无法在标签的底部放置一个指针。

请参阅小提琴http://jsfiddle.net/petrabarus/p8YhU/

var marker = new MarkerWithLabel({
    position: homeLatLng,
    draggable: true,
    raiseOnDrag: true,
    map: map,
    labelContent: "$425K",
    labelAnchor: new google.maps.Point(0, 0),
    labelClass: "labels", // the CSS class for the label
    icon: {},
    isClicked: false
});

google.maps.event.addListener(marker, 'click', function() {
    marker.isClicked = true;
    marker.set('labelClass', 'labels active');
});
google.maps.event.addListener(marker, 'mouseover', function() {
    marker.set('labelClass', 'labels hover');
});
google.maps.event.addListener(marker, 'mouseout', function() {
    if (marker.isClicked){
        marker.set('labelClass', 'labels active');
    } else {
        marker.set('labelClass', 'labels');
    }
});

更新

以前的答案是

但还有另一个问题。看来，当您显示图标时，标签的指针并不真正指向标记。见http://jsfiddle.net/petrabarus/y3M4u/。

MarkerWithLabel确实设置labelAnchor属性（参见this）。但是当标签太长时，锚定位也会被打破。

Answer 1

也许这可以帮助你example

var marker = new MarkerWithLabel({
    position: homeLatLng,
    draggable: true,
    raiseOnDrag: true,
    map: map,
    labelContent: "<div class='arrow'></div><div class='inner'>$425K</div>",
    labelAnchor: new google.maps.Point(0, 0),
    labelClass: "labels", // the CSS class for the label
    icon: {},
    isClicked: false
});

和css

.labels {
    margin-top:-3px;
    padding: 5px;
    position: absolute;
    visibility: visible;
    z-index: 1030;
}
.labels .arrow{
    border-top-color: #000000;
    border-right-color: rgba(0,0,0,0);
    border-bottom-color: rgba(0,0,0,0);
    border-left-color: rgba(0,0,0,0);
    border-width: 5px 5px 0;
    bottom: 0;
    left: 50%;
    margin-left: -5px;
    border-style: solid;
    height: 0;
    position: absolute;
    width: 0;
}
.labels .inner{
    background-color: #000000;
    border-radius: 4px;
    color: #FFFFFF;
    max-width: 200px;
    padding: 3px 8px;
    text-align: center;
    text-decoration: none;  
}