4

我在谷歌地图（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
});
4

3 回答 3

2

您正在使用 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 中工作吗？

于 2012-12-10T20:30:10.583 回答
2

自 google maps 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

于 2014-01-21T20:40:49.453 回答
0

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

试试这个：

   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
    );

文档在这里。

于 2012-12-09T15:33:39.353 回答