标签: angular-google-maps

所以我使用http://angular-ui.github.io/angular-google-maps/#!/api中的angular-google-maps指令 ,我无法在地图实例上看到我的标记.我已经尝试过几乎所有的东西,我非常渴望得到建议.我已经尝试将$ scope.markers移动到我的$ scope.map对象,尝试将其移动到我的$ watch函数中,并将值直接添加到html中,没有运气.我认为这与我必须添加的$ scope.control.refresh()函数有关,以便地图在选项卡内完全加载(我使用的是angular-bootstrap选项卡).

谢谢你的帮助!

HTML

   <div ng-controller="LocationCtrl" ng-cloak>
  <div class="map-canvas" ng-if="locationActive">
    <ui-gmap-google-map draggable="true" center='map.center' zoom='map.zoom' control="control">
      <ui-gmap-marker coords="markers.coords" idKey="markers.idKey">
      </ui-gmap-marker>
    </ui-gmap-google-map>
  </div>
</div>

JAVASCRIPT

(function() {
  'use strict';

  var locationCtrl = function($scope, uiGmapIsReady, $timeout) {
    $scope.map = {
      center: { latitude: 36.132411, longitude: -80.290481 },
      zoom: 15
    };

    $scope.control = {};

    $scope.active = $scope.$parent.active;
    $scope.locationActive = $scope.active().active;
    $scope.$watch($scope.active, function() {
      $timeout(function() {
        uiGmapIsReady.promise().then(function () {
          $scope.control.refresh();
          var map = $scope.control.getGMap();
          $scope.markers= {
            idKey: 1,
            coords: …

在我的项目中使用Bower安装angular-google-maps库后,我收到此错误.

Uncaught Error: [$injector:modulerr] Failed to instantiate module starter due to:
Error: [$injector:modulerr] Failed to instantiate module uiGmapgoogle-maps due to:
Error: [$injector:modulerr] Failed to instantiate module uiGmapgoogle-maps.directives.api due to:
Error: [$injector:modulerr] Failed to instantiate module uiGmapgoogle-maps.directives.api.models.parent due to:
Error: [$injector:modulerr] Failed to instantiate module uiGmapgoogle-maps.directives.api.models.child due to:
Error: [$injector:modulerr] Failed to instantiate module uiGmapgoogle-maps.directives.api.utils due to:
Error: [$injector:modulerr] Failed to instantiate module uiGmapgoogle-maps.extensions due to:
Error: [$injector:modulerr] Failed to instantiate module uiGmapgoogle-maps.providers due to:
Error: [$injector:modulerr] Failed to instantiate module …

我试图借助https://mapstyle.withgoogle.com/（自定义Google地图样式）自定义Google地图。

我在我的角度应用程序中使用角度google maps（https://github.com/SebastianM/angular-google-maps）库。

我想包括XML，以便以自定义样式显示agm-map。但是我不知道如何在agm-map中进行操作。

请帮我。

我有以下代码,但问题是,如果移动地图,指针地址的引脚不固定,引脚保持在相同的位置,而不是停留在固定的位置.

调节器

$scope.map = {
                        center: {
                            latitude: location.lat,
                            longitude: location.long
                        },
                        zoom: 17,
                        formattedAddress: location.formatted_address
                    }

视图

<ui-gmap-google-map
                class="col-md-12"
                center="map.center"
                zoom="map.zoom"
                ng-cloak>
            <ui-gmap-marker coords="map.center" idkey="1" ng-cloak>
                <ui-gmap-window>
                    <p>{{map.formattedAddress}}</p>
                </ui-gmap-window>
            </ui-gmap-marker>

        </ui-gmap-google-map>

我正在尝试放入一些HTML模板ui-gmap-window.HTML包含诸如ng-click和之类的指令ng-repeat但它们不起作用.

<ui-gmap-google-map bounds="map.bounds" 
                        center="map.center" 
                        zoom="map.zoom" 
                        options="options">
      <ui-gmap-window options="windowOpt"
                      show="windowOpt.show"
                      closeClick="closeWindow">
        <div class='map-popup'>
            <div><a ng-click='doIt()' href='#'>Action</a></div>
            <div ng-repeat="item in list">
                {{item.content}}
            </div>
        </div>
      </ui-gmap-window>
</ui-gmap-google-map>

或者我可能需要用另一种方法来制作类似旋转木马的内容ui-gmap-window？

谢谢

以下是一个示例:http: //plnkr.co/edit/k8vvW3

setAutocomplete() {
    this.originPlaceId = null;
    this.destinationPlaceId = null;
    this.travelMode = google.maps.TravelMode.WALKING;
    this.directionsDisplay.setMap(this.map);

    this.setMapControls(this.map);

    this.setupClickListener('changemode-walking', google.maps.TravelMode.WALKING);
    this.setupClickListener('changemode-transit', google.maps.TravelMode.TRANSIT);
    this.setupClickListener('changemode-driving', google.maps.TravelMode.DRIVING);

    console.log(this.originInput);
    this.originAutocomplete = new google.maps.places.Autocomplete(this.originInput);
    this.originAutocomplete.bindTo('bounds', this.map);
    console.log(this.originAutocomplete);
    this.originAutocomplete.addListener('place_changed', function() {
        console.log(this.originAutocomplete);
        var place = this.originAutocomplete.getPlace();
        console.log("here", place);
        if (!place.geometry) {
            window.alert("Autocomplete's returned place contains no geometry");
            return;
        }
        this.expandViewportToFitPlace(this.map, place);

        // If the place has a geometry, store its place ID and route if we have
        // the other place ID
        this.originPlaceId = place.place_id;
        this.route(this.directionsService, this.directionsDisplay);
    });

    this.destinationAutocomplete = new …

有谁知道如何将谷歌地图添加到角度2应用程序？

我目前正在index.html页面中链接到它,如下所示:

   <script src="node_modules/angular2-google-maps/bundles/angular2-google-maps.js"></script>

但是在我的angular 2组件中使用它时会出现此控制台错误:

system.src.js:1061 GET http:// localhost:3000/angular2-google-maps/core 404(Not Found)

这是我的控制台的屏幕截图:

系统配置:

System.config({
  packages: {      
    app: {
      format: 'register',
      defaultExtension: 'js'
    },
    'angular2-google-maps': { defaultExtension: 'js' }
  }
});
System.import('app/boot')
      .then(null, console.error.bind(console));

我正试图在我的Angular 4安装上使用angular-google-maps/@ agm/core.

我在组件html文件中有这个:

<sebm-google-map [latitude]="lat" [longitude]="lng">
  <sebm-google-map-marker [latitude]="lat" [longitude]="lng"></sebm-google-map-marker>
</sebm-google-map>

当我运行它时,我收到此错误消息:

Unhandled Promise rejection: Template parse errors:
Can't bind to 'latitude' since it isn't a known property of 'sebm-google-map'.
1. If 'sebm-google-map' is an Angular component and it has 'latitude' input, then verify that it is part of this module.
2. If 'sebm-google-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 …

如果我使用agm-info-window，您可以从控制器以编程方式调用打开/关闭

模板：

<agm-data-layer [geoJson]="geoJsonObject"  [style]="styleFunc" (layerClick)="clicked($event, gm, infoWindow)" >
    <agm-info-window [disableAutoPan]="true" 
                     [latitude]="infoWindowLat" 
                     [longitude] = "infoWindowLong" 
                     [isOpen]="infoWindowIsOpen"]
                      #infoWindow>
      {{infoWindowText}}
   </agm-info-window>
  </agm-data-layer>

控制器：

clicked(clickEvent, gm, infoWindow) {

 if (gm.lastOpen != null) 
 {
   gm.lastOpen.close();
 }

 gm.lastOpen = infoWindow;
 infoWindow.open();

}

但如果我使用<agm-snazzy-info-window>,open()和 则close()未定义。

<agm-snazzy-info-window [isOpen]="infoWindowIsOpen" 
                          [latitude]="infoWindowLat" 
                          [longitude]="infoWindowLong"
                          [closeWhenOthersOpen]="true" 
                          [closeOnMapClick]="true"  
                          [showCloseButton]="false"  
                          [openOnMarkerClick]="true"
                          ([backgroundColor]="'#FFF'"  
                          #infoWindow>
      <ng-template>
        {{infoWindowText}}
      </ng-template>
  </agm-snazzy-info-window>

<agm-snazzy-info-window>如何从控制器打开/关闭 a ？

在我的应用程序中，我使用Angular Google Maps（AGM）来构建地图。如何在上面绘制多边形？我遵循了https://stackblitz.com/edit/agm-polygon中描述的解决方案，但是缺少了一些指令。如何在AGM地图上启用图形管理器并像示例中那样绘制多边形？

这是app.module中的导入：

AgmCoreModule.forRoot({
      apiKey: 'key',      
      language: localStorage && localStorage.defaultLang || 'el',
      libraries: ['places', 'drawing', 'geometry']
    })