调整Google Maps标记图标图像的大小

2020/11/14 07:22 · javascript ·  · 0评论

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

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

码:

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

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

如评论中所述,这是支持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
 });

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

删除原点和锚点将是更常规的图片

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

对于像本主题这样的完整初学者来说,实现这些答案之一可能比在网上控制或使用Photoshop这样的照片编辑器自己调整图像大小更困难

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

无需编程。

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

为我解决的问题是:

从SVG图像切换到PNG,然后跟随
Catherine Nyo进行图像处理,该图像的大小是您要使用的图像大小的两倍。

如果像我一样使用vue2-google-maps,则设置大小的代码如下所示:

<gmap-marker
  ..
  :icon="{
    ..
    anchor: { x: iconSize, y: iconSize },
    scaledSize: { height: iconSize, width: iconSize },
  }"
>
本文地址:http://javascript.askforanswer.com/diaozhenggoogle-mapsbiaojitubiaotuxiangdedaxiao.html
文章标签: ,   ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!