标签: angular-google-maps

有没有人有一个工作搜索框的例子,例如angular-google-maps-team在此网站的"搜索框"下显示的搜索框:https://angular-ui.github.io/angular-google-maps /#!/ API

如果你写了一些东西肯定会在下拉列表中找到它,但是当你按下回车键时,地图就不会响应. - 当您按Enter键时,如何使地图移动到正确的位置？

我正在尝试将AGM Angular Google Maps(https://github.com/SebastianM/angular-google-maps)添加到我的Angular4项目中

随后的指南:https://github.com/SebastianM/angular-google-maps/blob/master/docs/getting-started.jade

我使用agm组件访问页面时遇到的错误:

core.es5.js:1084 ERROR Error: Uncaught (in promise): Error: Template parse errors:
Can't bind to 'latitude' since it isn't a known property of 'agm-map'.
1. If 'agm-map' is an Angular component and it has 'latitude' input, then verify that it is part of this module.
2. If 'agm-map' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add …

我正在使用AGM贴图作为我的角度4应用程序,在那里我遇到问题,我将使用从api获取的多个标记作为纬度和经度数组.我想将缩放级别设置为完全覆盖地图上的所有标记.即使一个国家/地区中的一个标记和其他国家/地区的其他标记也是如此,它应该在加载时设置缩放级别以显示地图上的所有标记.有没有办法在AGM角度图中做到这一点？有谁可以帮助我

我正在尝试在编辑和拖动多边形时获取更新的多边形路径.我试着像下面的代码那样做.

在我的打字稿中:

 @ViewChild(AgmPolygon) polygon: any;
 this.polygon.getPaths().then((x: any[]) => {
   x.forEach(y => {
     console.log('-');
     y.forEach(z => console.log(z.lat(), z.lng()));
   });
 });

我按照以下链接也链接 第2个链接.

在我的HTML中:

<agm-map [latitude]="lat" [fullscreenControl]="true" 
    (mapClick)="mapClicked($event)" [longitude]="lng" [zoom]="8" [mapTypeControl]="true">

  <agm-polygon [fillColor]="item.fillColor" (polyMouseOut)="polyMouseOut($event)" 
    (polyMouseMove)="polyMouseMove($event)" [fillOpacity]="item.fillOpacity" 
    *ngFor="let item of zonesPath; let i=index" [editable]="item.ZoneID==ZoneID" 
    (polyMouseUp)="polyMouseUp(item,$event)" (polyMouseDown)="polyMouseDown($event)" 
    (polyDblClick)="polyDblClick($event)" (polyDragStart)="polyDragStart($event)" 
    (polyDragEnd)="polyDragEnd($event,item)" (polyDrag)="polyDrag($event)" 
    [polyDraggable]="false" [paths]="item.ZonePaths" (polyClick)="polyclick($event)">
  </agm-polygon>

  <agm-polygon [paths]="paths"></agm-polygon>
</agm-map>

我正在做*ngFor for polygon.and我的json数据是:

{
"ZoneID": "594dff0ee10452d8567b23c6",
"strokeColor" : "#038063",
"strokeOpacity" : 0.2,
"strokeWeight" : 2,
"fillColor" : "#038063",
"fillOpacity" : 0.35,
"draggable" : false, …

我在我的cordova移动应用程序中集成了angular-google-maps.我想使用以下功能刷新地图.

        function refreshMap() {
            $scope.map.control.refresh({
                latitude: $scope.location.T_Lat_Deg_W.value,
                longitude: $scope.location.T_Long_Deg_W.value
            })
        }

但是错误很少见

angular.js:13540 TypeError:$ scope.map.control.refresh不是函数

at Scope.refreshMap (mapController.js:122)
at fn (eval at <anonymous> (angular.js:1), <anonymous>:4:224)
at expensiveCheckFn (angular.js:15475)
at callback (angular.js:25008)
at Scope.$eval (angular.js:17219)
at Scope.$apply (angular.js:17319)
at HTMLAnchorElement.<anonymous> (angular.js:25013)
at defaultHandlerWrapper (angular.js:3456)
at HTMLAnchorElement.eventHandler (angular.js:3444)

这是这个问题的JSFiddle示例.

有没有办法解决这个问题？谢谢 !

我想将 Google Maps 与我的 Angular 项目集成。在试点版本中，我只是点击了这个链接https://angular-maps.com/guides/getting-started/。目前，我陷入了错误：

node_modules/@agm/core/lib/directives/map.d.ts:232:43 - error TS2694: Namespace 'google.maps' has no exported member 'MouseEvent'

232 mapDblClick: EventEmitter<google.maps.MouseEvent>;

我去了文件位置并得到了这个

    mapClick: EventEmitter<google.maps.MouseEvent | google.maps.IconMouseEvent>;
    /**
     * This event emitter gets emitted when the user right-clicks on the map (but not when they click
     * on a marker or infoWindow).
     */
    mapRightClick: EventEmitter<google.maps.MouseEvent>;
    /**
     * This event emitter gets emitted when the user double-clicks on the map (but not when they click
     * on a marker or infoWindow). …

我一直在尝试google.maps.Map在由Angular Google Maps库中的ui-gmap-google-map指令创建的对象上设置click事件侦听器.

我需要动态地执行此操作,所以看起来(至少通过我的简短测试)使用指令events上的ui-gmap-google-map参数将不起作用(因为它似乎只"读取"参数值一次,但也许我错了那).

所以我决定使用control参数,它用方法getGMap和扩充参数值命名的对象refresh.这是我的指令用法:

<ui-gmap-google-map center="appCtrl.mapSetup.center"
                    zoom="appCtrl.mapSetup.zoom"
                    control="appCtrl.mapSetup">
</ui-gmap-google-map>

最后,我正在异步加载Google Maps API,并依赖GoogleMapApi服务/承诺(Angular Google Maps的一部分)来了解何时可以安全地开始处理google.maps.Map对象(例如添加事件监听器等).以下是一个小例子:

// inside the AppController constructor, see the fiddle linked below
var mapSetup = this.mapSetup;
GoogleMapApi.then(function () {
    google.maps.event.addListener(mapSetup.getGMap(), 'click', function () {
        alert('hello');
    });

所以当页面被加载时(这里是小提琴),我得到"TypeError:undefined不是一个函数",因为该mapSetup对象没有用getGMap或增加refresh.根据我对文档的理解,它似乎应该是.

我addListener使用$timeout(Angular服务)使用几百毫秒的延迟来包装调用,然后它起作用,因为此时mapSetup对象已被增强getGMap.

有没有办法避免必须使用$timeout任意延迟等待直到指定的 …

我无法创建自定义标记.即使我将图像路径传递给icon参数,我仍然会获得默认的橙色标记.如果你看错了,请告诉我.

指令的模板:

<div id="searchMap" class="googleMaps-destinations">
<div class="google-maps">
    <ui-gmap-google-map center="map.center" zoom="map.zoom" options="map.options">
        <ui-gmap-marker 
            ng-repeat="marker in search.origin_airports" 
            coords="marker.originMarker.location" 
            icon="marker.originMarker.icon.url" 
            fit="false" 
            idkey="'<< marker.originMarker.id >>'" >
        </ui-gmap-marker>
    </ui-gmap-google-map>
</div>

我正在使用://maps.googleapis.com/maps/api/js?v=3&sensor=true with angular-google-maps/dist/angular-google-maps.js

从chrome打印我的Angular AGM Map我在地图中得到了这个大的灰色间隙:

正如你所看到的,不仅是那里的灰色条(如果我关闭"背景图形"它会变成白色),但它也会将地图图像移到它下面

以下是重现此问题所需的简单代码:

app.component.ts:

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

@Component({
    selector: 'app-root',
    template: `
        <button (click)="clickPrint()">print</button>
        <agm-map id="Gmap" [latitude]="34.051759" [longitude]="-118.244576" [zoom]="17"></agm-map>
        `,
    styles: [`
        agm-map {
            height: 800px; //height: 100%;
        }
        button {
            position: absolute;
            z-index: 10;
        }
    `]
})
export class AppComponent {
    clickPrint() {
        print()
    }
}

app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { AgmCoreModule } from '@agm/core'

@NgModule({ …

我有一个使用Angular Google Maps来显示位置的应用程序.一开始我能够显示地图,但是一段时间(可能是我修改了一些东西)我收到以下错误:

ERROR Error: Uncaught (in promise): Error: StaticInjectorError[NgZone]: 
StaticInjectorError[NgZone]: 
NullInjectorError: No provider for NgZone!
at _NullInjector.get (core.js:923)
at resolveToken (core.js:1211)
at tryResolveToken (core.js:1153)
at StaticInjector.get (core.js:1024)
at resolveToken (core.js:1211)
at tryResolveToken (core.js:1153)
at StaticInjector.get (core.js:1024)
at resolveNgModuleDep (core.js:10585)
at NgModuleRef_.get (core.js:11806)
at resolveDep (core.js:12302)
at _NullInjector.get (core.js:923)
at resolveToken (core.js:1211)
at tryResolveToken (core.js:1153)
at StaticInjector.get (core.js:1024)
at resolveToken (core.js:1211)
at tryResolveToken (core.js:1153)
at StaticInjector.get (core.js:1024)
at resolveNgModuleDep (core.js:10585)
at NgModuleRef_.get (core.js:11806)
at resolveDep (core.js:12302)
at resolvePromise (zone.js:824)
at …