Javascript 如何在angular 2中突出显示div悬停上的google地图圆圈

我正在开发angular2应用程序并实现angular2谷歌地图。我的要求是，我想突出显示谷歌地图上悬停一个div的边界圆半径

我正在分享一份推荐信。在这种情况下，placemarker颜色在悬停时发生变化。但我想突出显示悬停时的边界半径圆环

有没有办法在angular 2中实现这一点

下面是我的示例代码：-

应用程序组件.ts

import { Component } from '@angular/core';
import { marker } from './marker.interface';
declare var $ : any;
import {
   MapsAPILoader,
   SebmGoogleMapMarker,

} from 'angular2-google-maps/core';


 @Component({
   moduleId: module.id,
   selector: 'my-app',
   styles: [`
    .sebm-google-map-container {
     height: 500px;
  }
 `],
   templateUrl: './map.component.html'
 })
 export class AppComponent  { 
   circledisplay:boolean=true;
   zoom: number =10;
   // initial center position for the map
   lat: number = 51.673858;
   lng: number = 7.815982;


 markerDragEnd(m: marker, $event: MouseEvent) {
   console.log('dragEnd', m, $event);
 }

 markers: marker[] = [
  {
      lat: 51.673858,
      lng: 7.815982,
      label: 'A',
      draggable: true,
  range:5000
  },
  {
      lat: 51.373858,
      lng: 7.215982,
      label: 'B',
      draggable: false,
  range:3000
  },
  {
      lat: 51.723858,
      lng: 7.895982,
      label: 'C',
      draggable: true,
     range:7000
   }
 ]


}

map.component.html

<sebm-google-map 
  [latitude]="lat"
  [longitude]="lng"
  [zoom]="zoom"
  [disableDefaultUI]="false"
  [zoomControl]="false"
 >

  <sebm-google-map-marker 
      *ngFor="let m of markers; let i = index"
      (markerClick)="clickedMarker(m.label, i)"
      [latitude]="m.lat"
      [longitude]="m.lng"
      [label]="m.label"
      [markerDraggable]="m.draggable"
      (dragEnd)="markerDragEnd(m, $event)">

    <sebm-google-map-info-window [isOpen]="true"  [disableAutoPan]="false">
      <strong>{{m.label}}</strong>
    </sebm-google-map-info-window>
        <sebm-google-map-circle [visible]="circledisplay" id="text{{i}}" [latitude]="m.lat" [longitude]="m.lng" 
        [radius]="m.range"
        [fillColor]="'red'"
        [circleDraggable]="false"
        [editable]="false">
    </sebm-google-map-circle>
  </sebm-google-map-marker>



   </sebm-google-map>
 <div id="SebmGoogleMapMarker-0">Marker 1</div>
 <div id="SebmGoogleMapMarker-1">Marker 2</div>
 <div id="SebmGoogleMapMarker-2">Marker 3</div>

{{m.label}
标记1
标记2
标记3

首先，您需要在组件中使用标记引用，如下所示：

export class MapComponent {
    ...
    markers:Marker[] = [];
    ...

export class Marker {
    constructor(public latitude:number,
            public longitude:number,
            public fillColor:string,
            public fillOpacity:number,
            public radius:number,
            public zIndex:number,
            public strokeColor:string,
            public strokeOpacity:number,
            public strokeWeight:number
           ) {
    }
}

<sebm-google-map-circle
        *ngFor="let marker of markers"
        (mouseOut)="circleOut(marker)"
        (mouseOver)="circleOver(marker)"
        [latitude]="marker.latitude"
        [longitude]="marker.longitude"
        [fillColor]="marker.fillColor"
        [fillOpacity]="marker.fillOpacity"
        [radius]="marker.radius"
        [zIndex]="marker.zIndex"
        [strokeColor]="marker.strokeColor"
        [strokeOpacity]="marker.strokeOpacity"
        [strokeWeight]="marker.strokeWeight"
        [strokePosition]="marker.strokePosition">
</sebm-google-map-circle>

...

<div *ngFor="let marker of markers"
        (mouseleave)="circleOut(marker)"
        (mouseenter)="circleOver(marker)">marker</div>

还有两个用于mouseOver和mouseOut事件处理的函数：

    circleOut(marker) {
      marker.fillColor = "#EC407A";
    }

    circleOver(marker) {
      marker.fillColor = "#ff0057";
    }
}

在本例中，我的标记对象如下所示：

export class MapComponent {
    ...
    markers:Marker[] = [];
    ...

export class Marker {
    constructor(public latitude:number,
            public longitude:number,
            public fillColor:string,
            public fillOpacity:number,
            public radius:number,
            public zIndex:number,
            public strokeColor:string,
            public strokeOpacity:number,
            public strokeWeight:number
           ) {
    }
}

<sebm-google-map-circle
        *ngFor="let marker of markers"
        (mouseOut)="circleOut(marker)"
        (mouseOver)="circleOver(marker)"
        [latitude]="marker.latitude"
        [longitude]="marker.longitude"
        [fillColor]="marker.fillColor"
        [fillOpacity]="marker.fillOpacity"
        [radius]="marker.radius"
        [zIndex]="marker.zIndex"
        [strokeColor]="marker.strokeColor"
        [strokeOpacity]="marker.strokeOpacity"
        [strokeWeight]="marker.strokeWeight"
        [strokePosition]="marker.strokePosition">
</sebm-google-map-circle>

...

<div *ngFor="let marker of markers"
        (mouseleave)="circleOut(marker)"
        (mouseenter)="circleOver(marker)">marker</div>

模板如下所示：

export class MapComponent {
    ...
    markers:Marker[] = [];
    ...

export class Marker {
    constructor(public latitude:number,
            public longitude:number,
            public fillColor:string,
            public fillOpacity:number,
            public radius:number,
            public zIndex:number,
            public strokeColor:string,
            public strokeOpacity:number,
            public strokeWeight:number
           ) {
    }
}

<sebm-google-map-circle
        *ngFor="let marker of markers"
        (mouseOut)="circleOut(marker)"
        (mouseOver)="circleOver(marker)"
        [latitude]="marker.latitude"
        [longitude]="marker.longitude"
        [fillColor]="marker.fillColor"
        [fillOpacity]="marker.fillOpacity"
        [radius]="marker.radius"
        [zIndex]="marker.zIndex"
        [strokeColor]="marker.strokeColor"
        [strokeOpacity]="marker.strokeOpacity"
        [strokeWeight]="marker.strokeWeight"
        [strokePosition]="marker.strokePosition">
</sebm-google-map-circle>

...

<div *ngFor="let marker of markers"
        (mouseleave)="circleOut(marker)"
        (mouseenter)="circleOver(marker)">marker</div>

...
标记

所以你可以看到这两个区块的神奇之处：

*ngFor="let marker of markers"
        (mouseOut)="circleOut(marker)"
        (mouseOver)="circleOver(marker)"

 <div *ngFor="let marker of markers"
        (mouseleave)="circleOut(marker)"
        (mouseenter)="circleOver(marker)">marker</div>

*ngFor=“让标记中的标记”
（鼠标输出）=“圆圈输出（标记）”
（鼠标悬停）=“圆圈悬停（标记）”
标记

我捕获mouseOut和mouseOver事件，并触发一个以marker引用为参数的函数。因此，您可以更改标记表达的属性，视图将自动更新

快乐编码