自定义Google Map Marker，例如Trulia地图

Question

如何使Google Map标记像Trulia地图中使用的那样？

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

有图书馆吗？

屏幕截图如下

UPDATE

到目前为止，我找到了一个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');
    }
});

UPDATE

先前的答案是

但是还有另一个问题。 似乎当您显示图标时，标签的指针并没有真正指向标记。 看到这个http://jsfiddle.net/petrabarus/y3M4u/ 。

该MarkerWithLabel确实给labelAnchor属性设置（见本 ）。 但是，如果标签太长，锚定位置也会被破坏。

Answer 1

也许这可以帮助你举例

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;  
}