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

前端之家收集整理的这篇文章主要介绍了在JavaScript Google Map的中心显示十字准线前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我想显示一个固定在Google地图中心的十字准线/网格,就像 Wikimapia.org一样.不幸的是,他们正在使用v2的API,我使用v3.

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

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

我试图将它重叠为地图外的一个div,但是我没有设法让它显示在地图之上 – 似乎在z-order摊牌中胜出.

@H_404_8@

解决方法

给定的解决方案对我来说没有效果,因为上覆的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
  };

创建我们的地图(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,function(){reticleMarker.setPosition(main_map.getCenter());});

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

谢谢.

跳跃

@H_404_8@ @H_404_8@

猜你在找的JavaScript相关文章