Как выделить круг карты google по углу div на угловой 2

Question

Я работаю над угловым 2-мя приложениями и реализую угловые2-google-карты. Мое требование состоит в том, что я хочу выделить радиус окружности на карте google при наведении div.

Я делясь ссылкой http://www.geocodezip.com/v3_MW_example_hoverchange.html. При этом цвет меток метки меняется при наведении указателя мыши. Но я хочу выделить границу радиуса cirlce при наведении.

Есть ли способ реализовать это в угловом 2?

Вот мой пример кода: -

app.component.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> 

Answer 1

На первом нужна ссылка маркер в вашем компоненте:

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

и две функции для обработки событий MouseOver и MouseOut:

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

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

В этом случае мой объект маркер выглядит следующим образом:

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> 

Я улавливаю события mouseout и mouseOver и запускаю функцию с ссылкой на маркер в качестве параметра. Таким образом, вы можете изменить свойства представления маркера, и представление будет обновляться автоматически.

Счастливое кодирование!