我在服务器上有照片:
- 不同尺寸
- 在广场上
我想把它们作为标记加载,但我想要一张圆形中的照片
下面我有一个代码,可以将照片加载为标记,缩放效果很好,但我不知道如何获得圆形照片效果。
互联网上没有具体而好的解决方案,如果有的话,这些条目来自几年前。
const profileImage = {
url:"@Model.LogoPath",
scaledSize: new google.maps.Size(50, 50)
};
userLocationMarker = new google.maps.Marker({
position: myLatLng,
map,
title: "Start",
icon: profileImage
});
我找到了一个解决方案:
-
关闭标记中的优化
optimized: false
-
添加带有图像的图层
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); }
所有代码:
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);
}