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

我想显示一个十字线/十字线，它固定在谷歌地图的中心，就像我一样。不幸的是，他们使用的是API的v2，而我使用的是v3

当用户在地图周围平移时，十字线应保持固定在中心

枚举没有

CENTER

选项，所以我想任何解决方案都会有点粗糙

---

我试着把它作为地图外的一个div来覆盖，但我没能把它显示在地图的顶部——它似乎在z顺序的对决中被击败了。

好吧，我是个傻瓜，我把这件事弄得比应该的更难

与其删除该问题，不如提供一个解决方案，以防它帮助其他人解决问题：

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

---

这不是地图的确切中心

给定的解决方案对我不起作用，因为上面的div在地图中创建了一个死点。我的项目的一个更好的解决方案是使用GoogleMapsJavaScriptAPIv3，在地图上创建一个1像素矩形的十字线作为标记。然后使用“地图边界更改”事件重新居中标记

十字线图像为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对象相同。zIndex应大于任何其他标记zIndex，以保持十字线在顶部

然后，我们添加一个事件处理程序，在触发映射边界时调用它

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

最后是centerretriele（）函数

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

由于我们没有对“bounds_changed”事件执行任何其他操作，我们可以通过向addListener调用传递匿名函数来整理代码。。。这使我们不必定义CenterRetriele（）函数

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

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

谢谢

---

跳过

我正在使用在中找到的解决方案。它似乎与BentFX基本相同，但更简洁

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

---

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

我偶然发现了这个JSFIDLE，它使用简单的css优雅地处理这个问题

#wrap1{
宽度：300px；
高度：300px；
位置：相对位置；
}
#地图画布{
宽度：100%；
身高：100%；
}
#交叉{
位置：绝对位置；
宽度：2倍；
高度：20px；
背景：#000；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
指针事件：无；
}
#十字架：以前{
内容：“；
位置：绝对位置；
宽度：20px；
高度：2倍；
背景：#000；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
}

new google.maps.Map（document.getElementById（'Map-canvas'）{
缩放：8，
中心：新google.maps.LatLng（-34.397150.644）
});

---

感谢作者，

@gGalen，在提出这个问题两天后，你才能接受自己的答案。太棒了，是的，我的解决方案造成了一个死点，虽然很小，但相当令人讨厌。给我一点白色来测试一下……嗨，德鲁，我很高兴你注意到了我的答案，因为这似乎就是诀窍。像往常一样，我在寻找答案的时候发现了你的问题，但在意识到我不会对它感到满意之前，我从未把上面的div从地图的左上角拿开。我目前正在开发一个twitter网络应用程序Pitytwits。我回避地理编码这个术语，因为人们想让它变得更加科学。我不做地理编码，我只是收集拉丁语并把它们放在地图上。这里有几条推特和截图我刚刚试了一下，效果很好，再也没有死点了！非常感谢。希望我能投两次票：）这种方法的一个小问题是，当你放大和缩小（无论如何在Win7 Chrome上）时，标记会有点不稳定。它在缩放动画的中间帧会被拉伸。有什么想法吗？也许还有另一个可以吸引的活动，我不知道？我使用的是Linux，在Firefox中，当你缩放/平移时，它会有一点摆动，但在chrome中，它非常稳定。我不认为会有比改变界限更频繁/更可靠的事件发生。我注意到了另一个怪癖。我使用反弹设置选定标记的动画。当它们反弹时，它们不能在十字线后面单击。固定覆盖层仍然可能是更好的修复方法。虽然我现在有很多事情要做，但这需要暂时搁置。玩得高兴marker.bindTo（）；功能很好。请注意，在DaftLogic.com解决方案中，当您将光标悬停在十字线上时，光标会发生变化，当您拖动光标时，光标会出现死点。通过为标记定义一个空（1px矩形）形状，可以克服这两个问题。

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