0

Googleマップで各ユーザーのローカリゼーションを表すマーカーを作成する必要があります。Googleマップ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

これはマーカーの適切な使用法ではありません。代わりに、Circleオーバーレイを使用します。円の半径はメートル単位で設定されます。

于 2013-11-12T19:23:41.093 に答える
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 に答える