有没有办法从 html 创建一个简单的标记或图层。我想到了一个用css3动画的圆圈。圆圈本身只是一个带有圆角的 div。
问问题
7649 次
1 回答
9
好的,似乎自定义叠加层会做我想要的。这是 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 添加到地图的方法:
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;
}
于 2011-08-27T19:37:27.793 回答