在JavaScript Google Map的中心显示十字准线

Question

我想显示一个固定在谷歌地图中心的十字准线/十字线,就像Wikimapia.org那样.不幸的是他们正在使用API​​的v2而我正在使用v3.

当用户平移地图时,十字准线应保持固定在中心.

ControlPosition枚举没有CENTER选项,所以我想任何解决方案都会有点hacky.

我试图将它叠加为地图之外的div,但我还没有设法让它显示在地图上 - 它似乎在z顺序摊牌中被打败.

Answer 1

给定的解决方案对我不起作用,因为叠加的div在地图中创建了一个死角.使用Google Maps JavaScript API V3,我的项目的更好解决方案是在地图上创建一个具有1像素矩形形状的标记.然后使用maps 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,32],           // 1px
    type: 'rect'                     // rectangle
  };

创建我们的地图(main_map)后,我们添加标记......

  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, 'bounds_changed',
      function(){reticleMarker.setPosition(main_map.getCenter());});

它实际上很漂亮.我希望这有助于其他人.

谢谢.

跳跃

Answer 2

好吧,我是一个傻瓜,并且正在努力使它变得更加艰难.

而不是删除问题,这是一个解决方案,以防它帮助其他人:

<div id="container">
    <div id="map"></div>
    <div id="reticule"><img src="reticule.gif" /></div>
</div>

还有一些款式:

#container { position:relative; }
#map { height:100%; width:100%; }
#reticule {
    position:absolute;
    width:13px;
    height:13px;
    left:50%;
    top:50%;
    margin-top:-8px;
    margin-left:-8px;
    pointer-events: none;
}

那不是地图的确切中心

Answer 3

我正在使用我在DaftLogic.com上找到的解决方案.它似乎与BentFX基本相同,但更简洁.

var marker = new google.maps.Marker({
    map: map,
    icon: '/images/reticle.png'
});
marker.bindTo('position', map, 'center'); 

不幸的是,它也遇到了Drew注意到的问题,即十字准线没有永久固定在地图的中心.如果快速拖动地图或放大和缩小地图,您会看到十字准线移动一点,直到有时间重新定位.如果有人想出更好的解决方案,请告诉我们.