标签: angular2-google-maps

我正在使用angular2-google-mapsAngular2的最新版本.我试图将一些本地地图组件功能转换为自己文件中的服务maps.service.ts.例如:

map.component.ts

getGeoLocation(lat: number, lng: number) {
if (navigator.geolocation) {
    let geocoder = new google.maps.Geocoder();
    let latlng = new google.maps.LatLng(lat, lng);
    let request = { latLng: latlng };
    geocoder.geocode(request, (results, status) => {
      if (status == google.maps.GeocoderStatus.OK) {
        let result = results[0];
        if (result != null) {
          this.fillInputs(result.formatted_address);
        } else {
          alert("No address available!");
        }
      }
    });
}
}

变成这样的东西: maps.service.ts

getGeoLocation(lat: number, lng: number): Observable<google.maps.GeocoderResult[]> {
    let geocoder = new google.maps.Geocoder();
    let latlng = new …

import { GoogleMapsAPIWrapper } from '@agm/core';
import { Component, Input } from '@angular/core';

@Component({
  selector: 'core-map',
  styleUrls: [ './map.component.scss' ],
  templateUrl: './map.component.html',
})
export class MapComponent {
  constructor(
    public gMaps: GoogleMapsAPIWrapper
  ) {}

  public markerClicked = (markerObj) => {
    this.gMaps.setCenter({ lat: markerObj.latitude, lng: markerObj.longitude });
    console.log('clicked', markerObj, { lat: markerObj.latitude, lng: markerObj.longitude });
  }
}
console output: Object {lat: 42.31277, lng: -91.24892}

也试过panTo同样的结果.

我一直在努力尝试在我使用的Angular 2项目中制作googlemaps 工作几个小时.PlaceResultAngular-cli

我必须googlemaps使用@types 进行安装并将其添加到配置文件的属性"types"下tsconfig.json.

{
    ...
    "types": [
      "google-maps"
    ]
  }
}

我google.maps.places.PlaceResult只需导入它即可成功使用我的Angular 2 Component!

import { ActivatedRoute, Params } from "@angular/router";
import { MapsAPILoader } from "angular2-google-maps/core";

import PlaceResult = google.maps.places.PlaceResult;
import GeocoderRequest = google.maps.GeocoderRequest;
...

几个小时之后,我不得不一起工作google.maps.Marker,它与PlaceResult和的定义文件相同GeocoderRequest.所以我只需将其导入如下:

[Line 12] import PlaceResult = google.maps.places.PlaceResult;
[Line 13] import GeocoderRequest = google.maps.GeocoderRequest;
[Line 14] import Marker = google.maps.Marker;
[Line 15] import LatLng = google.maps.LatLng; …

我正在一个页面中实现一个谷歌地图,其中一个地方ID传递给我,然后我需要获得这样的地方ID并加载该标记的地图.我正在浏览文档,但不清楚如何从<agm-map>标记中定位地图对象,以便我可以设置地点ID.以下是代码的一部分:

  public latitude: number;
  public longitude: number;
  public zoom: number;
  public placeid: string;

  constructor(
    private mapsAPILoader: MapsAPILoader,
    private ngZone: NgZone
  ) {}

  ngOnInit() {
      //set google maps defaults
      this.zoom = 4;
      this.latitude = 39.8282;
      this.longitude = -98.5795;
      this.placeid = "ChIJMS2FahDQzRIRcJqX_aUZCAQ";

      //set current position
      this.setCurrentPosition();

      this.mapsAPILoader.load().then(() => {
            //How do i set the agm-map here to load the map with the placeid

      });
    }

    private setCurrentPosition() {
      if ("geolocation" in navigator) {
        navigator.geolocation.getCurrentPosition((position) => {
          this.latitude = position.coords.latitude;
          this.longitude …

我正在寻找一种方法来使用常规谷歌地图中可用的zoomControlOptiions属性,如下所示:

zoomControlOptions: {
  style: google.maps.ZoomControlStyle.SMALL,
  position: google.maps.ControlPosition.LEFT_CENTER
},

Stackoverflow示例显示上面的代码
在官方谷歌地图文档中相同的事情

很遗憾,我在Angular 2 Google Maps API文档中没有看到此选项.有办法吗？尽管使用Angular 2包装器,有没有办法使用完整的功能？

请注意,只运行此代码工作正常:

    map.setOptions({
      zoom: 1,
      center: position,
      zoomControl: true
    });

    console.log(map.getZoom());

我能够获取本机谷歌地图对象并在其上运行方法/设置属性.当我尝试使用时会出现问题zoomControlOptions,这直接来自文档

编辑:所以,它实际上工作,现在的问题是绕过Typescript编译器抱怨.

编辑2:我修复了问题,但如果有人想要赏金 - 随意解释为什么zoomControlOptions不能原生可用.

我在angular 4应用程序中使用https://github.com/SebastianM/angular-google-maps.

我必须在CSS中指定地图高度,否则,地图将不会显示:

agm-map {
  height: 300px;
}

是否可以<agm-map>填充父容器中的剩余空间？

PS:我更喜欢使用https://github.com/angular/flex-layout的解决方案

我已经设置了angular2-google-mapangular2应用程序.

这是app.module.ts

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }  from './app.component';
import { AgmCoreModule} from 'angular2-google-maps/core';
@NgModule({
  imports:      [ BrowserModule, AgmCoreModule.forRoot({apiKey: 'AIzaSyAe3ci9yavJcWt7MaJE8DusAuZo-QeRqkU'}) ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ],
})
export class AppModule { }

我用命令安装了angular2-google-maps,

npm install angular2-google-maps --save

哪个成功安装.当我用npm start运行应用程序时,它显示错误说,

http:// localhost:3000/angular2-google-maps/core无法加载资源:服务器响应状态为404(未找到)

但我可以在node_modules中看到angular2-google-maps文件夹.问题是什么？

这个问题可能有重复的内容，或者其他一些问题已经回答了我想要的答案，但是我还是会问。.这是一个非常基本的问题，但是我也想要最简单的方法

我想做的是获取执行我的应用程序的设备的当前位置。.我已经看到了使用地理位置的其他答案，但是我不太了解如何将其实现到AGM，因为我对Ionic还是很陌生和棱角分明，我想知道是否可能有更简单的方法来实现这一目标...

您的回答将受到高度赞赏

这是我的代码：HTML

  <ion-header>

  <ion-navbar>
    <ion-title>viewmapings</ion-title>
    <ion-buttons end>
      <button ion-button (click)="onClose()">Close</button>
    </ion-buttons>
  </ion-navbar>

</ion-header>


<ion-content padding>
  <agm-map 
   [latitude]="lat"
   [longitude]="lng" 
   (mapClick)="onClickLoc($event)"
   [disableDoubleClickZoom] = "true"
   [streetViewControl] = "false"
    [zoom]="15">

    <agm-marker
     [latitude]="clickedLat" 
     [longitude]="clickedLng" 
     *ngIf="selected">
     <agm-info-window>Lat: {{clickedLat}} <br> Lng: {{clickedLng}}</agm-info-window>
    </agm-marker>

  </agm-map>
</ion-content>

SCSS：

page-viewmapings {
    agm-map{
        height: 100%;
    }
}

TS：

import { Component } from '@angular/core';
import { IonicPage, NavController, ViewController } from 'ionic-angular';


@IonicPage()
@Component({
  selector: 'page-viewmapings',
  templateUrl: 'viewmapings.html',
})
export class ViewmapingsPage {

  lat: number = 51.678418;
  lng: number …

我是Angular的新手，并且有一个可显示全屏Google地图的网络应用。我想在Google地图布局中添加一个“注销”按钮（而不是标题）。

我知道使用javascript Google Maps Api，这可能像：

var Logout = document.getElementById('Logout');
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(Logout);

但是，使用AGM-Angular Google Maps时，我没有找到方法。

现在我有：

map.component.html

<button id="Logout" [(ngModel)]="logoutButton" class="toggle-button controls button" (click)="logout()">Logout</button>

<agm-map [latitude]="lat" [longitude]="lng" [zoom]=12 [mapTypeControl]="true" (boundsChange)="centerChanged($event)" (idle)="loadParkings()" >

    <agm-marker *ngFor="let park of parkings" [latitude]="park.location[0]" [longitude]="park.location[1]"></agm-marker>
</agm-map>

map.component.ts

import {GoogleMapsAPIWrapper} from '@agm/core';

declare var google: any;

@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.css']
})

export class MapComponent implements OnInit {
  lat: number;
  lng: number;
  map: any;
  logoutButton: any;

  constructor(
    public mapApi: GoogleMapsAPIWrapper) {}

  ngOnInit(): void {
    if …