有没有办法将 Google 地图标记始终固定在其地图的中心? [英] Is there a way to Fix a Google Maps Marker to the Center of its Map always?

问题描述

更准确地说，我试图实现的是，当我拖动一个谷歌地图时，有一个谷歌地图标记始终固定在地图的中心.我认为这将改善用户体验，这就是我现在的做法:

To be more precise, what I try to accomplish is that while I Drag a Google Map there's a Google Maps Marker that stays fixed at the center of the map at all times. This will improve User experience in my opinion, This is how I'm doing it now:

var map, marker, options;

options = {
  center: new google.maps.LatLng(latitude, longitude),
  zoom: 15,
  mapTypeId: google.maps.MapTypeId.ROADMAP,
  mapTypeControl: false,
  overviewMapControl: false,
  zoomControl: true,
  draggable: true
};

map = new google.maps.Map(mapContainer, options);

marker = new google.maps.Marker({
  position: new google.maps.LatLng(latitude, longitude),
  map: map,
  animation: google.maps.Animation.DROP
});

//This line is what makes the Marker stick to the center of the map
marker.bindTo('position', map, 'center');

我在上面的代码中遇到的问题是.. 当我将地图拖到标记下方时它不够平滑，即.当拖动结束时，标记会从最后一个"中心到新"中心进行奇怪的跳转.(这在移动设备上更明显)，因此我需要的是标记真正永久固定到其地图的中心.

The problem I have with the code above is that.. When I drag the map underneath the Marker it's not smooth enough, ie. the Marker makes a wierd jump from the 'last' center to the 'new' center when dragging ends. (this is more noticeable on mobile devices), Therefore what I need is that the Marker is Really permanently fixed to the Center of its Map.

有没有办法做到这一点?(我想我曾经在一个网站上看到过这个)

Is there a way to get this done? (I think I've seen this in a web-site once)

如果你们能帮助我，请告诉我.

Let me know If you guys can help me.

谢谢.

推荐答案

另一种方法，没有使用真正的 google.maps.Marker:

A different approach, that did not use a real google.maps.Marker:

地图初始化后，在地图容器中注入一个div，给它一个className(例如centerMarker)，进一步的事情将通过CSS完成:

after the map has been initialized, inject a div into the map-container, give it a className(e.g. centerMarker), the further things will be done via CSS:

.centerMarker{
  position:absolute;
  /*url of the marker*/
  background:url(http://maps.gstatic.com/mapfiles/markers2/marker.png) no-repeat;
  /*center the marker*/
  top:50%;left:50%;

  z-index:1;
  /*fix offset when needed*/
  margin-left:-10px;
  margin-top:-34px;
  /*size of the image*/
  height:34px;
  width:20px;

  cursor:pointer;
}

演示:http://jsfiddle.net/doktormolle/jcHqt/

这篇关于有没有办法将 Google 地图标记始终固定在其地图的中心?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！