自定义Google地图标记，就像在Trulia地图中一样 [英] Custom Google Map Marker like in Trulia map

问题描述

如何制作像Google地图标记一样的Trulia地图？

1. 标记在底部有指针


2. 标记具有价格标签。


3. 标记似乎具有可变长度，取决于标签内部的标签。罢工>


4. 标记可以在被徘徊时改变颜色（灰色），或者已经在正常颜色（绿色）旁边点击（橙色）

是否有这样的库？

屏幕截图如下

UPDATE

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

查看小提琴 http://jsfiddle.net/petrabarus/p8YhU/

  var mark = new MarkerWithLabel（{
 position：homeLatLng，
 draggable：true，
 raiseOnDrag：true，
 map：map，
 labelContent：$ 425 K，
 labelAnchor：new google.maps.Point（0，0），
 labelClass：labels，//标签的CSS类
图标：{}，
 isClicked：false 
}）; 
 
 google.maps.event.addListener（marker，'click'，function（）{
 marker.isClicked = true; 
 marker.set（'labelClass'，'labels活跃'）; 
}）; 
 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 属性设置（参见这个）。但是当标签太长时，锚定位也会被打破。

解决方案

也许这可以帮助你示例

  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：标签，//标签的CSS类
图标：{}，
 isClicked：false 
}）; 
  

和css

  .labels {
 margin-top：-3px; 
 padding：5px; 
位置：绝对; 
可见性：可见; 
 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; 
剩下：50％; 
 margin-left：-5px; 
 border-style：solid; 
 height：0; 
位置：绝对; 
 width：0; 
} 
 .labels .inner {
 background-color：＃000000; 
 border-radius：4px; 
颜色：#FFFFFF; 
 max-width：200px; 
 padding：3px 8px; 
 text-align：center; 
 text-decoration：none; 
} 
  

How to make Google Map markers like the one used in Trulia map?

1. The markers have pointer in the bottom
2. The markers have price labels.
3. The markers seems to have variable length depend on the label inside them.
4. The markers can change color when it's being hovered (grey color) or it's already clicked (orange color) beside its normal color (green).

Is there a library for this?

Screenshot is below

UPDATE

So far I found a library MarkerWithLabel and I can reproduce the 2, 3, and 4 above. See below for the code. But I can't seem to put a pointer in the bottom of the label.

See fiddle 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

Previous answer was

But there is another problem. It seems when you display the icon, the pointer of the label doesn't really point to the marker. see this http://jsfiddle.net/petrabarus/y3M4u/.

The MarkerWithLabel does give labelAnchor property to set (see this). But when the label is too long, the anchor positioning will be broken too.

解决方案

maybe this can help you 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
});

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

这篇关于自定义Google地图标记，就像在Trulia地图中一样的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！