167

当我将图像加载到标记的图标属性中时，它会以其原始大小显示，这比它应该的要大得多。

我想将标准尺寸调整为更小的尺寸。做这个的最好方式是什么？

代码：

function addMyPos(latitude,longitude){
  position = new google.maps.LatLng(latitude,longitude)
  marker = new google.maps.Marker({
    position: position,
    map: map,
    icon: "../res/sit_marron.png"
  });
}
4

7 回答 7

367

如果原始尺寸是 100 x 100，并且您想将其缩放到 50 x 50，请使用 scaledSize 而不是 Size。

var icon = {
    url: "../res/sit_marron.png", // url
    scaledSize: new google.maps.Size(50, 50), // scaled size
    origin: new google.maps.Point(0,0), // origin
    anchor: new google.maps.Point(0, 0) // anchor
};

var marker = new google.maps.Marker({
    position: new google.maps.LatLng(lat, lng),
    map: map,
    icon: icon
});
于 2014-07-17T04:27:36.407 回答
72

正如评论中提到的，这是支持带有文档的 Icon 对象的更新解决方案。

使用图标对象

var icon = {
    url: "../res/sit_marron.png", // url
    scaledSize: new google.maps.Size(50, 50), // scaled size
    origin: new google.maps.Point(0,0), // origin
    anchor: new google.maps.Point(0, 0) // anchor
};

 posicion = new google.maps.LatLng(latitud,longitud)
 marker = new google.maps.Marker({
  position: posicion,
  map: map,
  icon: icon
 });
于 2013-02-26T18:29:55.267 回答
20

MarkerImage 已被 Icon 弃用

在 Google Maps JavaScript API 3.10 版之前，复杂图标被定义为 MarkerImage 对象。Icon 对象文字是在 3.10 中添加的，并从 3.11 版本开始替换 MarkerImage。Icon 对象文字支持与 MarkerImage 相同的参数，允许您通过删除构造函数、将先前的参数包装在 {} 中并添加每个参数的名称来轻松地将 MarkerImage 转换为 Icon。

Phillippe 的代码现在是：

 var icon = {
     url: "../res/sit_marron.png", // url
     scaledSize: new google.maps.Size(width, height), // size
     origin: new google.maps.Point(0,0), // origin
     anchor: new google.maps.Point(anchor_left, anchor_top) // anchor 
 };

 position = new google.maps.LatLng(latitud,longitud)
 marker = new google.maps.Marker({
  position: position,
  map: map,
  icon: icon
 });
于 2013-08-14T12:46:27.963 回答
13

删除origin和anchor图片会更规则

  var icon = {
        url: "image path", // url
        scaledSize: new google.maps.Size(50, 50), // size
    };

 marker = new google.maps.Marker({
  position: new google.maps.LatLng(lat, long),
  map: map,
  icon: icon
 });
于 2018-01-24T11:46:09.023 回答
3

如果您像我一样使用 vue2-google-maps，设置大小的代码如下所示：

<gmap-marker
  ..
  :icon="{
    ..
    anchor: { x: iconSize, y: iconSize },
    scaledSize: { height: iconSize, width: iconSize },
  }"
>
于 2020-06-30T07:40:48.237 回答
1

像我这样对该主题的完全初学者可能会发现，如果在您的控制范围内，使用在线编辑器或像 Photoshop 之类的照片编辑器自己调整图像大小，实现这些答案之一更难。

500x500 的图像在地图上会比 50x50 的图像更大。

无需编程。

于 2017-07-19T19:53:19.003 回答
1

所以我只是遇到了同样的问题，但有点不同。正如Philippe Boissonneault建议的那样，我已经将图标作为对象，但我使用的是 SVG 图像。

为我解决的问题是：
从 SVG 图像切换到 PNG 并跟随Catherine Nyo获得一个两倍于您将使用的图像大小的图像。

于 2019-01-11T04:30:20.143 回答