如何动态设置Google地图标记大小 [英] How to set Google maps marker size dynamically

问题描述

我试图通过缩放来缩放标记，但它似乎不能在这里工作是更好的概述的代码：

  function Icon（url）{
 this.url = url; 
 this.scaledSize = new google.maps.Size（30，30）; //缩小大小
 //this.origin = new google.maps.Point（0,0）; // origin 
 //this.anchor = new google.maps.Point（0，0）; // anchor 
} 
 
 var icon1 = new图标（'img / marker-test.png'）; 
 
 map.addListener（'zoom_changed'，function（）{
 if（map.zoom === 18）{
 //marker.setIcon(test）; 
 console.log（'check'）; 
 marker.scaledSize = new google.maps.Size（300，300）; 
 
} else {
 // marker。 setIcon（icon1）; 
} 
}）; 
  

有人知道如何解决这个问题吗？

解决方案

在我回答之前，有几点建议：

• 您已使用 map.zoom === 18 ，这是无效的。它应该是 map.getZoom（）=== 18



• marker.scaledSize 是无效的，因为 scaledSize 是图标对象的属性。 Ref：图标对象规范

  
  
  

  如果您需要动态设置标记大小，则需要通过图标属性指定标记图像（创建标记时），而不是字符串或保留为空（以显示默认标记）。




缩放不适用于默认标记。因此，您需要为标记提供自己的自定义图片。

比例与大小

缩放转换标记图像，大小指定图像的画布大小。设置小标记图像的大小属性不会显示标记图像的任何缩放效果。然而，如果标记图像足够大，并且之前已经按照缩小比例绘制，则放大效果会很好。



如果您只缩放图像而不设置大小，标记图像将放大预先指定的大小。这是标记图像的某些部分将不可见。

用简单的话来说，这是一个小提琴。尝试将缩放比例更改为18或更高，然后再更改为15或更低。

I am trying to size my marker by zooming, but it seems not to work here is the code for a better overview:

function Icon(url) {
    this.url = url;
    this.scaledSize = new google.maps.Size(30, 30); // scaled size
    //this.origin = new google.maps.Point(0,0); // origin
    //this.anchor = new google.maps.Point(0, 0); // anchor
}

var icon1 = new Icon('img/marker-test.png');

        map.addListener('zoom_changed', function() {
        if(map.zoom === 18){
            //marker.setIcon(test);
            console.log('check');
            marker.scaledSize = new google.maps.Size(300, 300);

        } else {
            //marker.setIcon(icon1);
        }
    });

Somebody knows how to fix this?

解决方案

Before I answer, a couple suggestions:

• You have used map.zoom === 18which is not valid. It should be map.getZoom() === 18

• marker.scaledSize is invalid as scaledSize is the property of Icon object. Ref:Icon Object Specification

  If you need to set the marker size dynamically, you need to specify the marker image(while creating marker) via icon property and not as a string or leave empty(to show default marker).

Scale wont work on default marker. So you need to provide your own custom image for the marker.

Scale vs Size

Scale transforms the marker image and size specifies the canvas size of the image. Setting size property of a small marker image will not show you any zoom effect of the marker image. However if the marker image is large enough and that it was previously been drawn with downscaling, upscaling will work fine.

If you just scale the image and not set the size, the marker image will zoom in the prespecifed size. That is some portions of the marker image will not be visible.

To put in easy words, here is a fiddle. Try changing zoom to 18 and over and then back to 15 and below.

这篇关于如何动态设置Google地图标记大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！