按米缩放Google地图标记图像（固定地理尺寸）

Question

我有一个svg文件，正在将其用于Google地图标记。尺寸为65像素x 65像素。

我想确保此自定义标记可以缩放到1500米。地图缩放时，它应该缩放。

我不确定如何使这项工作。需要一种算法来根据缩放级别计算scaledSize并使用户在地图上为1500米。

            var offset = new google.maps.Point(50, 50);
            var getIcon = function (uid, selected) {
                return {
                    url: svg_url,
                    anchor: offset,
                    scaledSize: sccaledSize // not sure what to put here
                };
            };
            new google.maps.Marker({
                    position: new google.maps.LatLng(xx,yy),
                    icon: getIcon(Uid, false)
                });

Answer 1

根据该线程，以下功能可用于计算Google Maps中每个像素的米：

function getScale(latLng,zoom){
  return 156543.03392 * Math.cos(latLng.lat() * Math.PI / 180) / Math.pow(2, zoom)
}

因此，图标的大小可以这样指定：

 var zoom = map.getZoom();
 var scale = getScale(position,zoom + 1); //meters per pixel
 var width = 1500 / scale; 
 var height = width;

 var icon = {
    url: "https://openclipart.org/download/82549/blue-circle.svg",
    anchor: new google.maps.Point(50, 50),
    scaledSize: new google.maps.Size(width, height)
 };

完整的例子

function getScale(latLng,zoom){
  return 156543.03392 * Math.cos(latLng.lat() * Math.PI / 180) / Math.pow(2, zoom)
}

 var zoom = map.getZoom();
 var scale = getScale(position,zoom + 1); //meters per pixel
 var width = 1500 / scale; 
 var height = width;

 var icon = {
    url: "https://openclipart.org/download/82549/blue-circle.svg",
    anchor: new google.maps.Point(50, 50),
    scaledSize: new google.maps.Size(width, height)
 };

var map;
var marker;

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 11,
    center: { lat: 60.1823822, lng: 25.0036073 }
  });

 

  

 //var circle = new google.maps.Circle({
 //     center: map.getCenter(),
 //     radius: 1500,  //in meters
 //     map: map
 // });

 
  marker = createMarker(map.getCenter(),map);

  google.maps.event.addListener(map, 'zoom_changed', function() {
     marker.setMap(null);
     marker = createMarker(marker.getPosition(),map);
   });

}


function createMarker(position,map) {
     var zoom = map.getZoom();
     var scale = getScale(position,zoom + 1); //meters per pixel
     var width = 1500 / scale; 
     var height = width;

     var icon = {
        url: "https://openclipart.org/download/82549/blue-circle.svg",
        anchor: new google.maps.Point(50, 50),
        scaledSize: new google.maps.Size(width, height)
     };

     return new google.maps.Marker({
        position: position,
        map: map,
        icon: icon
     });
}


function getScale(latLng,zoom){
  return 156543.03392 * Math.cos(latLng.lat() * Math.PI / 180) / Math.pow(2, zoom)
}