google-maps - 自定义 html 为谷歌地图制作标记

Question

有没有办法从 html 创建一个简单的标记或图层。我想到一个将用 css3 制作动画的圆圈。圆圈本身只是一个带有圆 Angular 的 div。

Answer 1

好吧，似乎是Custom Overlays会做我想做的。这是 ping 层:

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

这是将 em 添加到 map 的方法:

 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;

}