将照片四舍五入作为标记



我在服务器上有照片:

  • 不同尺寸
  • 在广场上

我想把它们作为标记加载,但我想要一张圆形中的照片

下面我有一个代码,可以将照片加载为标记,缩放效果很好,但我不知道如何获得圆形照片效果。

互联网上没有具体而好的解决方案,如果有的话,这些条目来自几年前。

const profileImage = {
url:"@Model.LogoPath",
scaledSize: new google.maps.Size(50, 50)
};
userLocationMarker = new google.maps.Marker({
position: myLatLng,
map,
title: "Start",
icon: profileImage
});

我找到了一个解决方案:

  1. 关闭标记中的优化

    optimized: false

  2. 添加带有图像的图层

    var myoverlay = new google.maps.OverlayView();
    myoverlay.draw = function () {
    this.getPanes().markerLayer.id = 'myMarker';
    };
    myoverlay.setMap(map);
    
  3. 为您的图像添加样式

    #myMarker img {
    border-radius: 100px;
    border: 2px solid rgba(255,255,255, 0.1);
    }
    

所有代码:

function initMap() {
map = new google.maps.Map(document.getElementById("map"), {
fullscreenControl: false,
streetViewControl: false,
disableDefaultUI: true,
styles: CustomMapStyles
});
const myLatLng;
const profileImage = {
url:"http://qwerty.jpg",
scaledSize: new google.maps.Size(50, 50)
};
userLocationMarker = new google.maps.Marker({
position: myLatLng,
map,
title: "MyMarker",
optimized: false,
icon: profileImage
});
var myoverlay = new google.maps.OverlayView();
myoverlay.draw = function () {
this.getPanes().markerLayer.id = 'myMarker';
};
myoverlay.setMap(map);
}

#myMarker img {
border-radius: 100px;
border: 2px solid rgba(255,255,255, 0.1);
}

相关内容

  • 没有找到相关文章

最新更新