我想显示一个固定在Google地图中心的十字准线/网格,就像
Wikimapia.org一样.不幸的是,他们正在使用v2的API,我使用v3.
当用户平移地图时,十字准线应保持固定在中心.
对于ControlPosition枚举,没有CENTER选项,所以我想,任何解决方案都会有点黑客.
我试图将它重叠为地图外的一个div,但是我没有设法让它显示在地图之上 – 似乎在z-order摊牌中胜出.
解决方法
给定的解决方案对我来说没有效果,因为上覆的div在地图上造成了死亡点.使用Google Maps JavaScript API V3,我的项目更好的解决方案是在地图上创建一个标有1像素矩形形状的标线.然后使用地图bounds_changed事件来重新标记该标记.
标线片图像为63 x 63 png. (图像/ reticle.png)
定义标记图像和形状…
var reticleImage = new google.maps.MarkerImage(
'images/reticle.png',// marker image
new google.maps.Size(63,63),// marker size
new google.maps.Point(0,0),// marker origin
new google.maps.Point(32,32)); // marker anchor point
var reticleShape = {
coords: [32,32,32],// 1px
type: 'rect' // rectangle
};
reticleMarker = new google.maps.Marker({
position: latlng,map: main_map,icon: reticleImage,shape: reticleShape,optimized: false,zIndex: 5
});
这里的var latlng是用于创建main_map的LatLng对象. zIndex应该大于任何其他标记zIndex,以保持标线在顶部.
然后,当map bounds_changed被触发时,我们添加一个要调用的事件处理程序.
google.maps.event.addListener(main_map,'bounds_changed',centerReticle);
最后我们有centerReticle()函数.
function centerReticle(){
reticleMarker.setPosition(main_map.getCenter());
}
由于我们没有使用’bounds_changed’事件做任何事情,我们可以通过将匿名函数传递给addListener调用来整理代码.这样我们就不必定义centerReticle()函数.
google.maps.event.addListener(main_map,function(){reticleMarker.setPosition(main_map.getCenter());});
它实际上很漂亮.我希望这有助于别人.
谢谢.
跳跃
