javascript 调整 Google 地图标记图标图像的大小

Resize Google Maps marker icon image

提问by Golan_trevize

When I load an image into the icon property of a marker it displays with its original size, which is a lot bigger than it should be.

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

I want to resize to the standard to a smaller size. What is the best way to do this?

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

Code:

代码：

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

回答by Catherine Nyo

If the original size is 100 x 100 and you want to scale it to 50 x 50, use scaledSize instead of Size.

如果原始尺寸为 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
});

回答by Philippe Boissonneault

As mentionned in comments, this is the updated solution in favor of Icon object with documentation.

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

Use Icon object

使用图标对象

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

回答by Jono

MarkerImage has been deprecated for Icon

已为 Icon 弃用 MarkerImage

Until version 3.10 of the Google Maps JavaScript API, complex icons were defined as MarkerImage objects. The Icon object literal was added in 3.10, and replaces MarkerImage from version 3.11 onwards. Icon object literals support the same parameters as MarkerImage, allowing you to easily convert a MarkerImage to an Icon by removing the constructor, wrapping the previous parameters in {}'s, and adding the names of each parameter.

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

Phillippe's code would now be:

菲利普的代码现在是：

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

回答by ibrahimyanik

Delete origin and anchor will be more regular picture

删除原点和锚点会更规则图片

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

回答by jumper

So I just had this same issue, but a little different. I already had the icon as an object as Philippe Boissonneaultsuggests, but I was using an SVG image.

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

What solved it for me was:
Switch from an SVG image to a PNG and following Catherine Nyoon having an image that is double the size of what you will use.

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

回答by bearacuda13

A complete beginner like myself to the topic may find it harder to implement one of these answers than, if within your control, to resize the image yourselfwith an online editor or a photo editor like Photoshop.

像我这样的完全初学者可能会发现实施这些答案中的一个比在您的控制范围内使用在线编辑器或像 Photoshop 这样的照片编辑器自己调整图像大小更难。

A 500x500 image will appear larger on the map than a 50x50 image.

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

No programming required.

无需编程。