我如何使谷歌地图不更改标记的自定义图标大小

How I make that google maps not change the custom icons size of marker?

本文关键字：自定义 图标 何使 谷歌地图      更新时间：2023-09-26

我需要创建一个标记来表示每个用户在谷歌地图上的本地化，我使用谷歌地图 api v3，我把标记放在地图上，这很容易，但是当我进行缩放时，我如何做到这一点图标不会调整大小，我怎么做在缩放更改或任何位置更改时不调整图标大小？

这样做的重点是，我有一个圆形图像，代表每个用户的 50 米无线电，如果图像发生变化，圆圈的无线电也会发生变化。

这是我的代码：

//Creamos el marcador para saber donde esta el usuario
marker:function(map,latLng) {
    //create a marker image with the path to your graphic and the size of your graphic
    var markerImage = new google.maps.MarkerImage(
        '/img/marker.png',
        new google.maps.Size(130,130), //size
        null, //origin
        null, //anchor
        new google.maps.Size(130,130) //scale
    );
    var marker = new google.maps.Marker({
        position: latLng,
        map: map,
        icon: markerImage //set the markers icon to the MarkerImage
    });
    marker.setMap(map);
    //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 = 130; //the size of the icon at zoom level 0
        var maxPixelSize = 130; //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
            )
        );
    });

    return marker;
},

这不是标记的适当用法。相反，您将使用圆形叠加层。圆的半径以米为单位设置。

为了解决这个问题，我需要根据地图的缩放比例缩放图像，这是一个单一的解决方案，但你可以在这里改进：

 var icon = {
        url: 'icon.png',
        size: new google.maps.Size(10, 10),
        scaledSize: new google.maps.Size(10, 10),
        anchor: new google.maps.Point(5, 5)
    };
   var iconMarker = new google.maps.Marker({
        position: latLng,
        map: map,
        icon: icon
    });
var size = RADIUS_SIZE / metersPerPixel(_gmap.getZoom() + 1);
icon.size = new google.maps.Size(size, size);
icon.scaledSize = new google.maps.Size(size, size);
icon.anchor = new google.maps.Point(size / 2, size / 2);
iconMarker.setMap(null);
iconMarker = new google.maps.Marker({
    position: iconMarker.getPosition(),
    map: map,
    icon: icon
});
相关文章：