Пользовательский HTML-маркер для карт Google - PullRequest
Новая
       8

Пользовательский HTML-маркер для карт Google

7 голосов
/ 27 августа 2011

Есть ли способ создать простой маркер или слой из HTML. Я думаю о круге, который будет анимирован css3. Сам круг - это просто деление с закругленными углами.

1 Ответ

9 голосов
/ 27 августа 2011

Хорошо, кажется, что Custom Overlays будет делать то, что я хочу. Это пинг слой: 

    function PingLayer(bounds, map) {
        this.bounds = bounds;
        this.setMap(map);
    }

    PingLayer.prototype = new google.maps.OverlayView();

    PingLayer.prototype.onAdd = function() {
        var div = document.createElement('DIV');
        div.className = "ping";
        this.getPanes().overlayLayer.appendChild(div);
        div.appendChild(document.createElement("DIV"))
        this.div = div;

        setTimeout(function(){div.className += " startPing"}, 10);
    }

    PingLayer.prototype.draw = function() {

        var overlayProjection = this.getProjection();
        var sw = overlayProjection.fromLatLngToDivPixel(this.bounds.getSouthWest());
        var ne = overlayProjection.fromLatLngToDivPixel(this.bounds.getNorthEast());
        var div = this.div;
        div.style.left = sw.x - 60 + 'px';
        div.style.top = ne.y - 65 + 'px';
    }

Это способ добавить их на карту: 

 var swBound = new google.maps.LatLng(lat, lng);
 var neBound = new google.maps.LatLng(lat, lng);
 var bounds = new google.maps.LatLngBounds(swBound, neBound);   
 new PingLayer(bounds, map);

А вот CSS делает анимацию: 

.ping {
    position: absolute;
    width: 100px;
    height: 100px;
}
.ping div {
    top: 50px;
    left: 50px;
    position: relative;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    background: none;
    border: solid 5px #000;
    text-align: center;
    font-size: 20px;
    color: #fff;
    -moz-transition-property: width, height, top, left, opacity;

    -moz-transition-duration: 2s;

}

.ping.startPing div{
    width: 100px;
    height: 100px;
    top: 0;
    left: 0;
    opacity: 0;
    -moz-transition-duration: 2s;

}
...