Question

我在Google地图（V3）标记上显示。为了更快地加载图标，所有图标都存储在一个精灵中。我注意到图标有时被裁剪（在底部或/和右边缘缺少1像素宽的边框）。有趣的是，您可以缩放地图，然后问题就会消失。这是谷歌的错误还是我做错了什么。 Firefox，Chrome和IE会出现问题。

有没有人有类似的经历或问题的解决方案？

我做了一个简化的问题例子。此示例也可以在线访问： http://www.gps-tracks.com/MarkerIconSpriteProblem.aspx

var markerIcon = new google.maps.MarkerImage(
  "pictures/NetzCats/C03-MapSpritesS03.png",
  new google.maps.Size(20, 16),
  new google.maps.Point(140, 1600),
  new google.maps.Point(10, 8)
  //new google.maps.Size(20, 16)
);

var marker = new google.maps.Marker({
  position: myLatlng,
  map: map,
  title: 'Hello World!',
  icon: markerIcon
});

Answer 1

您正在使用v3.10 http://jsfiddle.net/skdz6/

src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"

使用版本3.9，一切正常http://jsfiddle.net/skdz6/1/

src="https://maps.googleapis.com/maps/api/js?v=3.9&sensor=false"

有谁知道让它在v3.10中运行？

Answer 2

自Google地图API 3.11版以来，Icon对象取代了MarkerImage。 Icon支持与MarkerImage相同的参数。

自版本以来，标记的属性有了更明确的定义。对我来说这样做得更好。

示例可能如下所示：

var image = {
  url: place.icon,
  size: new google.maps.Size(71, 71),
  origin: new google.maps.Point(0, 0),
  anchor: new google.maps.Point(17, 34),
  scaledSize: new google.maps.Size(25, 25)
};

有关详细信息，请查看此网站：https://developers.google.com/maps/documentation/javascript/markers

Answer 3

您正在将图标缩小到其大小的一半，因此它将不可避免地丢失一个边框或另一个边框，并且您正在交换尺寸和点，以及属性的顺序。

请改为尝试：

   var markerIcon = new google.maps.MarkerImage(
      new google.maps.Point(5, 8), // anchor (POINT)
      new google.maps.Point(140, 1600),//<====== origin (POINT)
      new google.maps.Size(10, 8), //<======scaledSize (SIZE)
      new google.maps.Size(20, 16), //<====== Size (SIZE)          
      "pictures/NetzCats/C03-MapSpritesS03.png" //URL
    );

Documentation here

谷歌地图V3中的裁剪标记图标（精灵）

3 个答案: