如何更改@angular/google-maps库中的地图标记颜色

Question

我目前正在使用

@angular/google-maps

库开发 Angular 应用程序，我需要更改地图标记的颜色。

相关详情如下：

角度版本：

14.3.0

@angular/google-maps": "^14.2.7

节点版本：

18.10

当前实施 在我的组件模板中，我有以下地图标记代码：

<google-map
  height="400px"
  width="100%"
  [center]="state.center"
  [zoom]="state.zoom"
>
<map-marker
  *ngIf="state.marker"
  #mapMarker="mapMarker"
  [position]="state.marker"
  [options]="markerOptions" // trying to set marker options here
></map-marker>
</google-map>

组件

public markerOptions;

public ngOnInit() {
  markerOptions: MarkerOption = {
    content: this._createPin().element
  };
}

private _createPin(): Pin {
  const pinElementOptions: PinOptions = {
    background: '#0482b7',
    borderColor: '#0482b7'
  };
  return new google.maps.marker.PinElement(pinElementOptions);
}

标记仍具有默认颜色（红色）。

问题 如何自定义地图标记的颜色？是否需要设置特定属性，或者是否需要使用自定义图标？任何指导或示例将不胜感激！ 谢谢！

Answer 1

您需要提供自定义图标，而不是依赖默认标记。可以使用markerOptions对象中的图标选项自定义Google地图标记。

.HTML

<google-map height="400px" width="100%" [center]="state.center" [zoom]="state.zoom">
  <map-marker *ngIf="state.marker"
    #mapMarker="mapMarker"
    [position]="state.marker"
    [options]="markerOptions"
  ></map-marker>
</google-map>

.TS

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-your-map',
  templateUrl: './your-map.component.html',
  styleUrls: ['./your-map.component.css']
})
export class mapComponent implements OnInit {
  public markerOptions: google.maps.MarkerOptions;
  public state = {
    center: { lat: 40.73061, lng: -73.935242 },
    zoom: 12,
    marker: { lat: 40.73061, lng: -73.935242 }
  };

  public ngOnInit(): void {
    this.markerOptions = {
      icon: {
        path: google.maps.SymbolPath.CIRCLE, // You can change this to a custom SVG path or use default shapes
        scale: 10, // Size of the marker
        fillColor: '#0482b7', // color
        fillOpacity: 1,
        strokeWeight: 1, // Border width
        strokeColor: '#0482b7' // Border color
      }
    };
  }
}

如果您想使用自定义 SVG 作为标记，请将图标替换为自定义 SVG 路径。

this.markerOptions = {
  icon: {
    url: 'path/to/custom-icon.svg',
    scaledSize: new google.maps.Size(40, 40) // Scale the SVG
  }
};

希望它能完美工作..