英文:
@angular/google-maps 13.3.9 - Make marker have round shape and image
问题
我需要在我的地图中添加一个自定义标记。我只希望它具有圆形形状和一个图像，但我无法让它起作用。 代码：
<div class="map-container">
<google-map width="100%" height="100%" [center]="center" [zoom]="zoom">
<map-marker
*ngFor="let marker of markers"
[position]="marker.position"
[options]="marker.options"
[title]="marker.title"
></map-marker>
</google-map>
</div>
以及如何填充标记：
this.markers.push({
position: { lat: parseFloat(lat), lng: parseFloat(lon) },
title: nombre,
icon: {
url: restaurant.imagenes[0]?.ruta_imagen,
scaledSize: new google.maps.Size(size, size),
} as google.maps.Icon,
options: {
draggable: false,
shape: {
coords: [size / 2, size / 2, size / 2],
type: 'circle',
},
} as google.maps.MarkerOptions,
});
尽管我尝试了各种变化，但我得到的只是一个方形图像。有人可以帮忙吗？谢谢！
英文:
I need to add a custom marker into my map. All I want is for it to have a circle shape and an image inside, but I can't get it to work. Code:
<div class="map-container">
<google-map width="100%" height="100%" [center]="center" [zoom]="zoom">
<map-marker
*ngFor="let marker of markers"
[position]="marker.position"
[options]="marker.options"
[title]="marker.title"
></map-marker>
</google-map>
</div>
And how I fill the markers:
this.markers.push({
position: { lat: parseFloat(lat), lng: parseFloat(lon) },
title: nombre,
icon: {
url: restaurant.imagenes[0]?.ruta_imagen,
scaledSize: new google.maps.Size(size, size),
} as google.maps.Icon,
options: {
draggable: false,
shape: {
coords: [size / 2, size / 2, size / 2],
type: 'circle',
},
} as google.maps.MarkerOptions,
});
As much as I try variations, all I get is a squared image. Can someone help? Thanks!
答案1
得分: 0
最好的方法是使用自定义SVG。
英文:
I did some digging and, using the angular-maps, you have no way to display a round image unless the image is already round.
Best I could get was using a custom SVG.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论