google-maps - 按米缩放谷歌地图标记图像(固定地理大小)

Question

我有一个 svg 文件，我将它用于谷歌地图标记。大小为 65px x 65px。

我想确保这个自定义标记可以缩放到 1500 米。它应该在 map 缩放时缩放。

我不确定如何进行这项工作。需要一种算法来根据缩放级别计算 scaledSize 并使用户在 map 上为 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

根据this thread以下函数可用于计算谷歌地图中每像素的米数:

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>