代码之家  ›  专栏  ›  技术社区  ›  Mads Lee Jensen

调整标记大小取决于缩放谷歌地图v3

  •  12
  • Mads Lee Jensen  · 技术社区  · 16 年前

    我试图搜索引用,但似乎找不到任何方法来调整MarkerImage的大小。

    2 回复  |  直到 5 年前
        1
  •  12
  •   CrazyEnigma    16 年前

    不幸的是,每次都要设置图标。但是,您可以预先定义它们,然后将它们应用于标记。

    zoomIcons = [null, icon1, icon2];  // No such thing as zoom level 0. A global variable or define within object.
    marker.setIcon(zoomIcons[map.getZoom()]);
    
        2
  •  35
  •   Simon    13 年前

    //create a marker image with the path to your graphic and the size of your graphic
    var markerImage = new google.maps.MarkerImage(
        'myIcon.png',
        new google.maps.Size(8,8), //size
        null, //origin
        null, //anchor
        new google.maps.Size(8,8) //scale
    );
    
    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(38, -98),
        map: map,
        icon: markerImage //set the markers icon to the MarkerImage
    });
    
    //when the map zoom changes, resize the icon based on the zoom level so the marker covers the same geographic area
    google.maps.event.addListener(map, 'zoom_changed', function() {
    
        var pixelSizeAtZoom0 = 8; //the size of the icon at zoom level 0
        var maxPixelSize = 350; //restricts the maximum size of the icon, otherwise the browser will choke at higher zoom levels trying to scale an image to millions of pixels
    
        var zoom = map.getZoom();
        var relativePixelSize = Math.round(pixelSizeAtZoom0*Math.pow(2,zoom)); // use 2 to the power of current zoom to calculate relative pixel size.  Base of exponent is 2 because relative size should double every time you zoom in
    
        if(relativePixelSize > maxPixelSize) //restrict the maximum size of the icon
            relativePixelSize = maxPixelSize;
    
        //change the size of the icon
        marker.setIcon(
            new google.maps.MarkerImage(
                marker.getIcon().url, //marker's same icon graphic
                null,//size
                null,//origin
                null, //anchor
                new google.maps.Size(relativePixelSize, relativePixelSize) //changes the scale
            )
        );        
    });
    
        3
  •  0
  •   Giovanni Gigante    5 年前

    要向地图中添加符合缩放级别的图像,请使用GroundOverlay。

    https://developers.google.com/maps/documentation/javascript/groundoverlays