如何在Google Maps API v3中创建不能平移的文字叠加层？

我正在使用Google Maps API v3。我想在地图平移时不会移动的地图上创建文字叠加层。是操纵从MapPanes对象访问的DOM元素的最佳方法，还是最好创建一个自定义控件，即使除了显示文本之外它不会做很多事情？如何在Google Maps API v3中创建不能平移的文字叠加层？

来源

2011-02-24 DaveBurns

我发现为我工作的最简单方法是在创建新地图后添加了几行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);

你可能会想样式的文字看起来更好。

另一种方法是把格在你的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中将位置样式设置为绝对位置以避免渲染问题。

来源

2011-02-27 15:29:52 DaveBurns

位置：绝对 - 正是我所期待的。谢谢。 – user644745 2011-10-11 11:23:32

任何想法如何点击通过添加元素，以便地图可拖动下面？ – yckart 2013-05-22 09:38:27

@yckart - 没有答案，但这两个SO问题有我会追求的答案：http://stackoverflow.com/questions/8002960/pass-left-click-message-to-html-element-below-another-one和http://stackoverflow.com/questions/3268791/javascript-click-through-element。祝你好运，如果你成功了，请回复。 – DaveBurns 2013-05-22 13:45:41

从您所描述的情况来看，最好的方法是自定义控件。该文档是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的原因是因为事件被触发之前地图改变类型时正确地设置自己的身体。在当前事件循环之后运行你的函数。

来源

2011-02-24 05:33:30

如何在Google Maps API v3中创建不能平移的文字叠加层？

回答

相关问题