标签: angular-google-maps

在尝试将angular google maps - agm库集成到我的 angular 项目中时，出现此错误：

某些配置或可能是我错过了一些我在这个项目中使用材料 6 和角度 6 的东西，感谢您的帮助

在终端控制台中

ERROR in node_modules/@types/googlemaps/index.d.ts(63,25): error TS1122: A tuple type element list cannot be empty.
node_modules/@types/googlemaps/index.d.ts(72,25): error TS1122: A tuple type element list cannot be empty.
node_modules/@types/googlemaps/index.d.ts(94,15): error TS1122: A tuple type element list cannot be empty.
node_modules/@types/googlemaps/index.d.ts(100,18): error TS1122: A tuple type element list cannot be empty.
node_modules/@types/googlemaps/index.d.ts(106,20): error TS1122: A tuple type element list cannot be empty.
node_modules/@types/googlemaps/index.d.ts(115,26): error TS1122: A tuple type element list …

我使用 npm 安装了 agm/core，如下所示：

npm install @agm/core

显示以下警告：

npm WARN @agm/core@3.0.0-beta.0 requires a peer of @angular/common@^9.1.0 || ^10.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN @agm/core@3.0.0-beta.0 requires a peer of @angular/core@^9.1.0 || ^10.0.0 but none is installed. You must install peer dependencies yourself.

尽管如此，我还是继续按照如下文档将 AgmCoreModule 导入 AppModule：

AgmCoreModule.forRoot({
      apiKey: 'MY MAP KEY',
      libraries: ['places']
    })

但是，当尝试使用ng serve为应用程序提供服务时，会出现以下错误：

Error: node_modules/@agm/core/lib/services/google-maps-api-wrapper.d.ts:50:41 - error TS2314: Generic type 'MapHandlerMap<T>' requires 1 type argument(s).
50     subscribeToMapEvent<N …

第一次使用angular-google-maps.我很困惑如何绘制多边形并抓取该区域中的所有邮政编码.我不知道该怎么做.以下是我的代码

<div ng-app="myapp" ng-controller="mapsController">
    <!--It displays the markers links-->
    <div class="locations">
        <ul>
            <li ng-repeat="l in locations" ng-click="ShowLocation(l.LocationID)"><a href="#">{{l.Title}}</a></li>
        </ul>
    </div>
    <div class="maps">
        <!-- Add directive code (gmap directive) for show map and markers-->
        <ui-gmap-google-map style="box-shadow:2px 2px 2px 2px lightgrey" center="map.center" zoom="map.zoom">
            <ui-gmap-marker ng-repeat="marker in markers" coords="marker.coords" options="marker.options" events="marker.events" idkey="marker.id">
                <ui-gmap-window options="windowOptions" show="windowOptions.show">
                    <ui-gmap-drawing-manager options="drawingManagerOptions" control="drawingManagerControl"></ui-gmap-drawing-manager>
                </ui-gmap-window>
            </ui-gmap-marker>
        </ui-gmap-google-map>
    </div>
</div>

在我的script.js中,我编写了以下代码

var app = angular.module('myapp', ['uiGmapgoogle-maps']); //dependency we should add to angular application
app.controller('mapsController', function ($scope, uiGmapGoogleMapApi) {
    //this is …

我对角度很新,我认为这是一个基本问题.

我创建我的地图

<agm-map [latitude]="lat" [longitude]="lng">
    <agm-marker [latitude]="location.lat" [longitude]="location.lng" *ngFor="let location of locations; let i=index">
        <agm-snazzy-info-window [maxWidth]="200" [closeWhenOthersOpen]="true">
            <ng-template>
                <strong>{{location.title}}</strong>
                <p>adresse</p>
            </ng-template>
        </agm-snazzy-info-window>
    </agm-marker>
</agm-map>

当我手动设置标记时,一切正常,但是当我*ngFor用来遍历我的列表时,会创建标记的html,但显然在地图的脚本查找标记之后,所以没有标记被渲染(地图本身就是) .

从我的控制器:

export class LocationMapComponent implements OnInit {

 lat: number = 51.678418;
 lng: number = 7.809007;
 locations: Location[];

 async ngOnInit() {

}

public async getLocations()  {
    this.locations = await this._locationService.getLocations();

}

constructor(private _locationService:LocationService, private _coreCOMService: CoreCOMService, private _coreLanguageService: CoreLanguageService, private _coreLogService: CoreLogService, private _componentFactoryResolver: ComponentFactoryResolver, private _coreSystemService: CoreSystemService) {

    this.getLocations();
}

}

这些位置是从一个从远程数据库中获取它们的服务加载的.我确实认为问题是在执行ngFor循环之前渲染了地图,我不确定如何确保首先执行循环或者如何告诉地图仅在循环之后(重新)渲染标记已经完成了. …

我对此有疑问 Angular Google Maps插件的元素.Windows元素文档中的示例源代码使用元素内部的ng-non-bindable属性.显然,这是必要的,以便Angular绑定在页面上正确呈现.这在文档中没有明确说明,所以我想知道为什么这个属性是必要的,特别是因为关于ng-non-bindable的官方Angular文档清楚地表明Angular不会解析带注释的HTML元素中的Angular文字.<div><ui-gmap-windows>

为了说明,这是我的HTML部分中的代码片段(假设此windows元素的范围中的属性模型具有名称和描述字段):

<ui-gmap-markers models="markers" coords="'self'">
  <ui-gmap-windows>
    <div>{{name}}: {{description}}</div>
  </ui-gmap-windows>
</ui-gmap-markers>

如果没有ng-non-bindable作为<div>(或没有div)的属性,模型的值将不会绑定到这些Angular文字.只有冒号将在窗口中呈现,如":".但是,一旦我输入属性:

<ui-gmap-markers models="markers" coords="'self'">
  <ui-gmap-windows>
    <div ng-non-bindable>{{name}}: {{description}}</div>
  </ui-gmap-windows>
</ui-gmap-markers>

然后窗口的文本将正确呈现.它会说"位置1:这是位置1的位置".

所以再一次,我想知道为什么这里确实需要ng-non-bindable.它将极大地帮助我更好地理解这个Angular库,也许Angular作为一个整体,更好.

我已经创建了一个用于显示此行为的plunker,基本上我所做的是从角度贴图中获取演示示例,并且每次点击地图上的标记时稍微更改它以隐藏5个标记.标记确实是隐藏的,但是聚类器永远不会改变.现在这里是一个奇怪的部分,如果你稍微拖动地图,它将正确更新群集,但它不会自动刷新.

onclick事件

$scope.clickHandler = function(e) {
    var count = $scope.randomMarkers.length;
    var hidden = 0;
    for (var i = 0; i < count; i++) {
        var oneModel = $scope.randomMarkers[i];
        if (oneModel.options.visible) {
           console.log("hiding: " + oneModel.latitude);
           oneModel.options.visible = false;
           hidden++;
           if (hidden == 5) break;
        }
    }
}

和标记定义

var ret = {
    latitude: latitude,
    longitude: longitude,
    title: 'm' + i,
    events: {
      click: $scope.clickHandler
    },
    options: {
      visible: true
    }
  };

是与示例唯一真正的区别(除了告诉markers指令实际使用标记模型选项属性).

对于角度谷歌地图,如何删除折线？我在使用templateUrl的指令中使用带有JavaScript的角度版本1.

版本:angular-google-maps 2.1.5

这是我目前的HTML:

 <ui-gmap-google-map center="config.map.center" zoom="config.map.zoom" options="config.map.options" events="config.map.events" draggable="true">
        <ui-gmap-polygon path="compatiblePolygon" stroke="polygonConfig.stroke" fill="polygonConfig.fill" fit="true" static="false" visible="polygonConfig.visible" editable="true" draggable="true" clickable="true" events="polygonConfig.events">
        </ui-gmap-polygon>

        <ui-gmap-markers coords="'self'" options="marker.options" models="compatiblePoints" idkey="'id'" clickable="true" click="markerClicked">
        </ui-gmap-markers>

        <ui-gmap-drawing-manager options="drawingManager" static="false" events="config.drawing.events">
        </ui-gmap-drawing-manager>
    </ui-gmap-google-map>

这是我需要删除的折线的img:

到目前为止,我已经尝试了点击我的清晰地图按钮:

scope.polygonConfig.events.setMap(null);

但我得到这个控制台错误:

"无法读取属性'setMap'的未定义"

我也试过这个:

                   uiGmapIsReady.promise(1).then(function (instances) {
                        const map = instances.reduce(function(previous, current) {
                            return current.map;
                        });
                        scope.mapInstance = map;
                        map.setMap(null);
                    });

但我得到这个错误:map.setMap不是一个函数

这是我最近的尝试:

              <ui-gmap-polygon path="compatiblePolygon" stroke="polygonConfig.stroke" fill="polygonConfig.fill" fit="true" static="true" visible="polygonConfig.visible" editable="polygonConfig.editable" draggable="polygonConfig.draggable" clickable="true" events="polygonManager.events">
              </ui-gmap-polygon>


                scope.polygonManager = {
                    events: {
                        rightclick: function(polygon) …

我可以使用Google Draw管理器绘制多个多边形.现在我无法从多个多边形中选择特定的多边形并删除和编辑它.编辑或删除后也无法获取新数组.

我的demo.js代码如下:

$scope.map = {
        center: { latitude: 19.997454, longitude: 73.789803 },
        zoom: 10,
        //mapTypeId: google.maps.MapTypeId.ROADMAP,
        //radius: 15000,
        stroke: {
            color: '#08B21F',
            weight: 2,
            opacity: 1
        },
        fill: {
            color: '#08B21F',
            opacity: 0.5
        },
        geodesic: true, // optional: defaults to false
        draggable: false, // optional: defaults to false
        clickable: false, // optional: defaults to true
        editable: false, // optional: defaults to false
        visible: true, // optional: defaults to true
        control: {},
        refresh: "refreshMap",
        options: { scrollwheel: true },
        Polygon: …

我目前正在学习 Angular5 和 RxJS。我正在尝试运行一个简单的应用程序：

• 用于输入术语的搜索栏
• keyup 触发函数，然后调用服务
• 服务返回封装在 observable 中的 api 调用
• observable 使用异步管道订阅，模板更新使用 api 调用的结果

我尝试了两个选项，每个选项都有一个问题：

a) 订阅组件并更新模板数据：

this.placePredictionService.getPlacePredictions(term).subscribe( data => 
{
  this.results = data;
 });

模板会在 {{results}} 绑定上更新，但仅在第二个函数调用时更新。然后使用第一次调用的结果更新模板。为什么？

b) 使用异步管道返回可观察和更新模板

private results$: Observable<any[]>;
this.results$ = this.placePredictionService.getPlacePredictions(term);

这样，模板中不会发生任何事情。我不明白什么？我的理解欠缺什么？非常感谢您提供有关调查内容的提示。

两个问题的解决方案：谢谢@Richard Matsen！

a) 问题是，Google Maps API 的调用不在 Angular Zone 内，因此未自动触发更改检测。将 API 调用包装在 ngZone.run() 函数中的服务中可以解决问题：

this.autocompleteService.getPlacePredictions({input: term}, data => {
    this.ngZone.run(() => {
      this.predictions.next(data);
    });

  });

b) 使用主题不会在每次新击键时产生新流解决了异步管道无法正常工作的问题，请参阅下面的代码注释。

完整的组件、服务和模板是这样的：

app.component.ts

import { Component } from '@angular/core';
import { MapsAPILoader } …

我尝试将谷歌地图包含在多个位置。

对于一个位置，Iframe 工作正常。我不知道如何在 Iframe 中实现多个位置。所以我尝试了年度股东大会。我也将相同的 APIKey 用于 AGM。但是出现Google Maps JavaScript API 错误： ApiTargetBlockedMapError错误。

这是我的 IFrame 代码

<iframe src="https://www.google.com/maps/embed/v1/place?q=11.0443324,77.04292389999999&key=MY_APIKEY" width="98%" height="100%" frameborder="0"></iframe>

对于 AGM 在 NgModule 中添加密钥

AgmCoreModule.forRoot({AgmCoreModule.forRoot({
     apiKey: 'MY_APIKEY',
     }) 
<agm-marker *ngFor="let loc of mSupplierLocationList" [label]="loc.label" [latitude]="loc.latitude" [longitude]="loc.longitude" >
</agm-marker>
</agm-map>