Question

我正在开发角度2应用程序并实现angular2-google-maps。我的要求是我希望在悬停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事件并使用标记引用作为参数触发函数。因此，您可以更改标记表示的属性，并且视图将自动更新。

快乐的编码！

如何在角度2中突出显示div上的谷歌地图圈

1 个答案: