缩放谷歌地图标记图像米(固定的地理大小)

Question

我有一个svg文件，我正在使用它的谷歌地图标记。尺寸:65px * 65px

我想确保这个定制的标记可以缩放到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地图中的每像素米:

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)
}

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}
#map {
    height: 100%;
}

<script src="https://maps.googleapis.com/maps/api/js?&callback=initMap&signed_in=true" async defer></script>
<div id="map"></div>