InvalidValueError:setCenter:不是LatLng或LatLngLiteral:在属性lng中:不是数字

时间:2017-04-04 11:50:21

标签: html angular typescript

我正在开发angular2-google-maps,但在实施时我一直都会遇到此错误

  

InvalidValueError:setCenter:不是LatLng或LatLngLiteral:in   属性lng:不是数字

请参阅我的代码



import { AgmCoreModule, MapsAPILoader, GoogleMapsAPIWrapper } from 'angular2-google-maps/core';
import { MapDirective } from './map.directive';

declare var google: any;
@Component({
  selector: 'map-component',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.css',],
  providers: [GoogleMapsAPIWrapper]
})
export class MapComponent implements OnInit {
 
  geoloc: marker;

  ngOnInit(): void {
   navigator.geolocation.getCurrentPosition((position) => {
      this.lat = <number>position.coords.latitude;
      this.lng = <number>position.coords.longitude;
    });
  }

  // google maps zoom level
  zoom: number = 18;

  // initial center position for the map
  lat: number;
  lng: number;

  clickedMarker(label: string, index: number) {
    console.log(`clicked the marker: ${label || index}`)
  }

  mapClicked($event: any) {
    this.markers.push({
      lat: $event.coords.lat,
      lng: $event.coords.lng,
      draggable: true
    });
  }

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

  markers: marker[] = [
    {
      lat: 51.673858,
      lng: 7.815982,
      label: 'A',
      draggable: true
    },
    {
      lat: 51.373858,
      lng: 7.215982,
      label: 'B',
      draggable: false
    },
    {
      lat: 51.723858,
      lng: 7.895982,
      label: 'C',
      draggable: true
    }
  ]
}
// just an interface for type safety.
interface marker {
  lat: number;
  lng: number;
  label?: string;
  draggable: boolean;
}
&#13;
.sebm-google-map-container {
       height: 100%;
     }
&#13;
<sebm-google-map 
      [latitude]="lat"
      [longitude]="lng"
      [zoom]="zoom"
      [disableDefaultUI]="false"
      [zoomControl]="true"
      [mapTypeControl]="true"
      (mapClick)="mapClicked($event)">
    
     <!--<sebm-google-map-marker 
          (markerClick)="clickedMarker(geoloc.label, i)"
          [latitude]="geoloc.lat"
          [longitude]="geoloc.lng"
          [label]="geoloc.label"
          [markerDraggable]="geoloc.draggable"
          (dragEnd)="markerDragEnd(geoloc, $event)">-->

      <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>
          <strong>InfoWindow content</strong>
        </sebm-google-map-info-window>
        
      </sebm-google-map-marker>
      
      <sebm-google-map-circle [latitude]="lat + 0.3" [longitude]="lng" 
          [radius]="5000"
          [fillColor]="'red'"
          [circleDraggable]="true"
          [editable]="true">
      </sebm-google-map-circle>

    </sebm-google-map>
&#13;
&#13;
&#13;

它在地图上给我我的位置,但在使用相同坐标时给出错误..请帮助

0 个答案:

没有答案