如何在Google Maps API v3中创建一个不平移的文本叠加层？

Question

我正在使用Google Maps API v3.我想在地图上创建一个文本覆盖,当地图被淘汰时,该覆盖不会移动.是操作可从MapPanes对象访问的DOM元素的最佳方法,还是最好创建一个自定义控件,即使除了显示文本之外它不会做太多其他操作？

Answer 1

我发现最简单的方法是在创建新地图后添加了几行JavaScript.所以,在此之后:

map = new google.maps.Map('myMapDivId', mapOptions);

添加这个:

var myTitle = document.createElement('h1');
myTitle.style.color = 'white';
myTitle.innerHTML = 'Hello World';
var myTextDiv = document.createElement('div');
myTextDiv.appendChild(myTitle);

map.controls[google.maps.ControlPosition.BOTTOM_CENTER].push(myTextDiv);

您可能希望将文本设置为更好看.

另一种方法是将div放在HTML中:

<div id="myTextDiv" style="color: white; position: absolute;">
    <h1>Hello World</h1>
</div>

然后在你的JavaScript中执行此操作:

var myControl = document.getElementById('myTextDiv');
map.controls[google.maps.ControlPosition.TOP_CENTER].push(myControl);

注意一个重要的区别:如果使用HTML路由来定义div,则必须在HTML中将位置样式设置为绝对,以避免出现问题.

Answer 2

从您的描述来看,最好的方法是自定义控件.这方面的文件就在这里.自定义控件可以根据需要简单或复杂.

你想要在地图窗格周围捣乱的一个原因是你想要这样一个"控制"位于标记/阴影/折线等之下.我现在这样做是为了在地图中心显示一个十字准线每时每刻.但是因为我将它保留为叠加层,所以我选择窗格以使标记位于其上方,这样它们就可以继续被点击并与之交互 - 使用mapPane.我是这样做的:

var CrosshairOverlay = function(map){
    this._holder = null;
    this.setMap(map);
};
CrosshairOverlay.prototype = new google.maps.OverlayView();
CrosshairOverlay.prototype.onAdd = function(){
    var map = this.getMap();
    var holder = this._holder = $('<div>').attr('id', 'crosshair')[0];

    var crosshairPaper = this._paper = R(holder, 150, 150);
    // ... all your drawing and rendering code here.
    var projection = this.getProjection();
    var wrappedHolder = $(holder);

    var updateCrosshairPosition = function(){
        var center = projection.fromLatLngToDivPixel(map.getCenter());
        wrappedHolder.css({left:center.x-75, top:center.y-75});
    }
    _.each(['drag','dragend','bounds_changed','center_changed','zoom_changed','idle','resize'], function(event){            
        google.maps.event.addListener(map, event, updateCrosshairPosition);
    });
    google.maps.event.addListener(map, 'maptypeid_changed', function(){
        _.defer(updateCrosshairPosition);
    });

    this.getPanes().mapPane.appendChild(holder);
};
CrosshairOverlay.prototype.draw = function(){
};
CrosshairOverlay.prototype.onRemove = function(){
    this._holder.parentNode.removeChild(this._holder);
    this._holder = null;
};

maptypeid_changed拥有自己的处理程序的原因defer是因为在更改类型时地图正确设置自己之前触发了该事件.只需在当前事件循环后运行您的函数.