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

从您的描述来看，最好的方法是自定义控件。文档为here。自定义控件可以根据需要简单或复杂。

你想要在地图窗格周围捣乱的一个原因是你想要这样的“控制”位于标记/阴影/折线等下面。我现在这样做是为了在中心显示十字准线在任何时候的地图。但是因为我将其保留为叠加层，所以我选择窗格以使标记位于其上方，因此可以使用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处理程序的原因是因为在更改类型时地图正确设置之前触发了该事件。只需在当前事件循环后运行您的函数。

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

2 个答案: