0

我需要创建一个标记，代表每个用户在谷歌地图上的本地化，我使用谷歌地图 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;
},
4

2 回答 2

0

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

 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
});
于 2014-04-29T18:06:20.217 回答
0

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

于 2013-11-12T19:23:41.093 回答