好吧，似乎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添加到地圖的方法：

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;

}

總結

以上是生活随笔為你收集整理的自定义地图怎么做成html,自定义html为谷歌地图制作标记的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。