javascript - 在 JavaScript 谷歌地图的中心显示十字准线

Question

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

当用户四处平移 map 时，十字准线应保持固定在中心。

ControlPosition 没有 CENTER 选项枚举，所以我想任何解决方案都会有点老套。

我试图将它作为 div 覆盖在 map 之外，但我没能让它显示在 map 顶部——它似乎在 z 顺序摊牌中被打败了。

Answer 1

给定的解决方案对我不起作用，因为覆盖的 div 在 map 中创建了一个死点。对于我的项目，使用 Google Maps JavaScript API V3 的一个更好的解决方案是在 map 上创建十字线作为具有 1 像素矩形形状的标记。然后使用 map 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
  };

创建 map (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());});

它实际上工作起来非常流畅。我希望这对其他人有帮助。

谢谢。

跳过