标签: angular-google-maps

getGMap()返回Map对象的一个​​实例.如果映射未就绪,则此函数返回undefined.是否有事件或方式告诉Map已准备好并且调用getGMap肯定会返回Google Map？

谢谢

佳日

我正在尝试使用angular-google-maps,但它在错误中打破了chrome

TypeError: _.contains is not a function

我的DOM元素看起来像

<div id="dashboard_map" class="tab-pane fade in active" ng-controller="mapsCtrl" ng-init="url = '/api/companies'; initialise();">
  <div class="panel panel-default"  ng-hide="!custom">
    <div class="panel-heading row">
      <div class="col-md-5">
        {!! Lang::get('google_maps.map1.title') !!}
      </div>
    <div class="col-md-2 col-md-offset-5">
      <i class="filter glyphicon glyphicon-filter pull-right" ng-click="custom=!custom"></i>
    </div>
  </div>
  <div class="panel-body">
    <div id="map_canvas">
        <ui-gmap-google-map center='map.center' zoom='map.zoom'>
        </ui-gmap-google-map>
    </div>
  </div>
</div>  

然后我按顺序加载gmap3,gmap3menu,lodash,angularjs,angular-resource,angular-simple-logger和finally-google-maps.我的控制器包含以下$ scope属性

$scope.map = {center: {latitude: 40.1451, longitude: -99.6680 }, zoom: 4 };

显示地图但我无法摆脱错误.

任何想法/建议都非常感谢.

我正在尝试将高度和宽度的css应用于图标.

我用agm-marker图标的代码如下: -

<agm-marker *ngFor="let m of mapData; let i = index"
    [latitude]="m.lat"
    [longitude]="m.lng"
    [label]="labelOptions"
    [iconUrl]="iconUrl">
</agm-marker>

.TS

public iconUrl = 'http://developerdrive.developerdrive.netdna-cdn.com/wp-content/uploads/2013/08/ddrive.png';

请让我知道如何操纵此图标的大小.这是我添加的自定义图标

我正在开发一个使用 agm 的项目。除了缩放问题，一切都很好。我在地图上放置了很多标记，当我点击其中一个时，我想放大它的纬度和经度。我可以将此标记的纬度和经度居中，但缩放只工作一次而不是第二次。有没有人帮我解决这个问题。顺便说一句，我是 Angular 的新手。

谢谢。

我正在使用 Angular Material 和 Angular Google Maps。我在 Snazzy-Info-Window 中有一个 Angular Material 表单，它在正常模式下工作正常。它很好地显示了 mat-select，但是当我单击全屏按钮时，mat-select 中的 mat-options 不显示。一旦我退出全屏模式，我就会看到选项面板。

这是一个错误还是我错过了什么。如果我使用本机选择而不是 mat-select，则会显示下拉选项。

正常模式

全屏模式

在谷歌地图的全屏模式下，mat-select 不显示面板，但当我检查它时它就在那里。

要设置地图缩放级别包括所有的位置标记，我已经尝试了两种选择，如建议这个职位。

这是我所做的：

export class LocationSelectionComponent implements OnInit, AfterViewInit {

@ViewChild('AgmMap') agmMap: AgmMap;

ngAfterViewInit() {
  console.log(this.agmMap);
  this.agmMap.mapReady.subscribe(map => {
  const bounds: LatLngBounds = new window['google'].maps.LatLngBounds();
  for (const mm of this.mapMarkers) {
    if (mm.latitude !== this.currentLocationLatitude && mm.longitude !== this.currentLocationLongitude) {
      bounds.extend(new window['google'].maps.LatLng(mm.latitude, mm.longitude));
     }
   }

   map.fitBounds(bounds);
  });
 }
}

请注意， this.mapMarkers 是一个数组，其中包含地图标记的坐标。这些填充在ngOnInit().

正如上面帖子的评论中提到的，我还尝试了以下方法：

onMapReady(map: AgmMap) {
 const bounds: LatLngBounds = new window['google'].maps.LatLngBounds();
 for (const mm of this.mapMarkers) {
   if (mm.latitude !== this.currentLocationLatitude && mm.longitude !== this.currentLocationLongitude) { …

地理编码后，我无法将我的 Google 地图放在标记上。

我有两个标记：初始标记（一个居中，不改变），另一个根据地理编码而变化，地理编码后，每次都以中心为中心。

我的代码：TS

zoom = 10;

addressData: FormGroup;
submitted = false;
success = false;

lat: number;
lng: number;

userLat: number;
userLng: number;

currentCenter = { lat: null, lng: null };

private geoCoder: google.maps.Geocoder;

@ViewChild('googleMap') googleMap: AgmMap;

constructor(private maps: MapsAPILoader, private bulider: FormBuilder) { }

ngOnInit() {
    this.addressData = this.bulider.group({
        address: ["", Validators.required],
    });

    this.maps.load().then(() => {
        this.geoCoder = new google.maps.Geocoder();
    });
}

getAddress() {

    this.submitted = true;

    if (this.addressData.invalid) {
        return;
    }

    this.success = true;

    this.googleMap.mapReady.subscribe(map => …

我正在尝试使用 ng-map 中的 ng-repeat 将地图标记动态添加到地图中，如下所示，

<div id="map-canvas">
    <ng-map default-style="true">
        <marker id='ID{{school.id}}' ng-repeat="school in vm.schools" position="{{school.location}}" on-click="vm.showDetail(school)" icon="assets/img/marker-excellent.png">
        </marker>

        <info-window id="marker-info">
            <div ng-non-bindable="">
                <h5>{{vm.school.name}}</h5>
            </div>
        </info-window>
    </ng-map>
</div>

这将创建多个具有相同标记图标的标记。我想根据 {{school.rating}} 的值使用不同的标记图标。但是，当 ng-repeat 正在执行以在地图上呈现标记时，我无法弄清楚如何根据 rating 值更改标记图标 url。

目前，我正在执行以下操作，但我认为这是一种低效的方法。

<div id="map-canvas">
    <ng-map default-style="true">
        <marker id='ID{{school.id}}' ng-if="school.overallRating >= 4.5" ng-repeat="school in filteredSchools = (search.schools | filter:boardsFilter)" position="{{school.location}}" on-click="search.showDetail(school)" icon="assets/img/marker-excellent.png">
        </marker>

        <marker id='ID{{school.id}}' ng-if="school.overallRating < 4.5 && school.overallRating >= 3.5" ng-repeat="school in filteredSchools = (search.schools | filter:boardsFilter)" position="{{school.location}}" on-click="search.showDetail(school)" icon="assets/img/marker-good.png">
        </marker>

        <marker id='ID{{school.id}}' ng-if="school.overallRating < …

我正在使用有角度的谷歌地图 (AGM) 来查找地址。现在我希望当一个人选择并解决它时，它会填充输入。在哪里可以找到单个地址元素名称，例如 street、str。号码，邮政编码等将数据绑定到输入字段？

从 angular google maps API 中，我们有一个具有以下定义的 markerClick() 函数，

 @Output() markerClick: EventEmitter<void> = new EventEmitter<void>();

但是当我在我的应用程序中使用时，我得到NULL。

我有以下应用程序代码，

在我的 HTML 文件中，

<agm-map [latitude]="latitude" [longitude]="longitude" [zoom]="zoom">
        <agm-marker *ngFor="let marker of coordinates;" 
        [iconUrl]="icon" 
        [latitude]="marker.latitude" 
        [longitude]="marker.longitude"
        [markerClickable]="true"
        (markerClick)="markerClicked($event)">
    </agm-marker>
    </agm-map>

在 .TS 文件中，

 markerClicked($event: MouseEvent) {
    console.log('clicked'); ----------------(1)
    console.log($event);--------------------(2)
  }

对于语句 (2)，我得到 NULL 作为控制台输出。我期待它是标记对象。我的理解有误吗？如何从markerClick() 函数中获取纬度和经度。

请注意，我已经将mapClick()函数用于agm -map 标签，但是当我使用该函数时，它没有响应对地图上已绘制标记的点击。