@angular/google-maps 13.3.9 – 使标记具有圆形形状和图像

huangapple
go评论95阅读模式
英文:

@angular/google-maps 13.3.9 - Make marker have round shape and image

问题

我需要在我的地图中添加一个自定义标记。我只希望它具有圆形形状和一个图像，但我无法让它起作用。 代码：

  1. <div class="map-container">
  2.   <google-map width="100%" height="100%" [center]="center" [zoom]="zoom">
  3.     <map-marker
  4.       *ngFor="let marker of markers"
  5.       [position]="marker.position"
  6.       [options]="marker.options"
  7.       [title]="marker.title"
  8.     ></map-marker>
  9.   </google-map>
  10. </div>

以及如何填充标记：

  1. this.markers.push({
  2.   position: { lat: parseFloat(lat), lng: parseFloat(lon) },
  3.   title: nombre,
  4.   icon: {
  5.     url: restaurant.imagenes[0]?.ruta_imagen,
  6.     scaledSize: new google.maps.Size(size, size),
  7.   } as google.maps.Icon,
  8.   options: {
  9.     draggable: false,
  10.     shape: {
  11.       coords: [size / 2, size / 2, size / 2],
  12.       type: 'circle',
  13.     },
  14.   } as google.maps.MarkerOptions,
  15. });

尽管我尝试了各种变化，但我得到的只是一个方形图像。有人可以帮忙吗？谢谢！

英文:

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:

  1.     &lt;div class=&quot;map-container&quot;&gt;
  2.   &lt;google-map width=&quot;100%&quot; height=&quot;100%&quot; [center]=&quot;center&quot; [zoom]=&quot;zoom&quot;&gt;
  3.     &lt;map-marker
  4.       *ngFor=&quot;let marker of markers&quot;
  5.       [position]=&quot;marker.position&quot;
  6.       [options]=&quot;marker.options&quot;
  7.       [title]=&quot;marker.title&quot;
  8.     &gt;&lt;/map-marker&gt;
  9.   &lt;/google-map&gt;
  10. &lt;/div&gt;

And how I fill the markers:

  1. this.markers.push({
  2.         position: { lat: parseFloat(lat), lng: parseFloat(lon) },
  3.         title: nombre,
  4.         icon: {
  5.           url: restaurant.imagenes[0]?.ruta_imagen,
  6.           scaledSize: new google.maps.Size(size, size),
  7.         } as google.maps.Icon,
  8.         options: {
  9.           draggable: false,
  10.           shape: {
  11.             coords: [size / 2, size / 2, size / 2],
  12.             type: &#39;circle&#39;,
  13.           },
  14.         } as google.maps.MarkerOptions,
  15.       });

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.

huangapple
  • 本文由 发表于 2023年6月18日 23:17:27
  • 转载请务必保留本文链接：https://go.coder-hub.com/76501221.html
  • angular
  • angular-maps
  • ionic-framework
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定