在JavaScript Google地图的中心显示十字光标

给定的解决方案对我不起作用,因为上面的div在地图上创建了一个死点。对我的项目来说,使用googlemapsjavascriptapiv3更好的解决方案是在地图上创建十字线作为一个1像素矩形形状的标记。然后使用maps bounds\u changed事件重新居中标记。

十字线图像为63 x 63 png。(图像/十字线.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
  };

创建地图(主地图)后,我们添加标记。。。

  reticleMarker = new google.maps.Marker({
    position: latlng,
    map: main_map,
    icon: reticleImage, 
    shape: reticleShape,
    optimized: false,
    zIndex: 5
  });

这里的var latlng是用于创建主地图的相同latlng对象。为了使十字线保持在最上面,十字线应该比其他任何标记的十字线都大。

  google.maps.event.addListener(main_map, 'bounds_changed', centerReticle);

最后我们得到了center十字线()函数。

  function centerReticle(){
    reticleMarker.setPosition(main_map.getCenter());
  }

  google.maps.event.addListener(main_map, 'bounds_changed',
      function(){reticleMarker.setPosition(main_map.getCenter());});

它实际上工作得很好。我希望这能帮助别人。

谢谢。

好吧,我是个傻瓜,让事情变得比应该的更难。

与其删除问题,不如给出一个解决方案,以防帮助其他人解决问题:

<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;
}

那不是地图的确切中心

DaftLogic.com . 它看起来与BentFX基本上是相同的解决方案,但要简洁得多。

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

不幸的是,它也有问题,绘制时注意到十字准线不是永久固定在地图的中心。如果您快速拖动地图或放大或缩小地图,您将看到十字光标稍微移动,直到有时间重新居中。如果有人提出更好的解决方案,请告诉我们。