标签: angular-google-maps

我在Angular 5应用程序中使用Angular Google Maps（https://angular-maps.com/），也使用socket.io从服务器轮询纬度和经度。我可以将数据推送到组件中的数组，但是agm-map不会更新

component.ts

import { Component, OnInit } from '@angular/core';
import { SocketService } from '../../app/services/socket.service';

@Component({
  selector: 'app-maps',
  templateUrl: './maps.component.html',
  styleUrls: ['./maps.component.scss']
})
export class MapsComponent implements OnInit {

  public title: string = 'AGM project';
  public lat: number = 12.954517;
  public lng: number = 77.3507335;


  public msg : string;
  public mcar = 
  "https://maps.google.com/mapfiles/kml/shapes/parking_lot_maps.png";
  public agmMarkers: agmmarker[] = [
  {
    lat: 12.954517,
    lng: 77.3507335,
    icn: this.mcar
  }
 ];

 constructor(private socketService : SocketService) { }

ngOnInit() { …

当我将我的应用程序从jQuery方式更改为Angular方式时,我尝试使用Angular-Google-Maps.

但我找不到谷歌地图对象(地图,标记,多边形...)和使用对象'方法'的方法(如getMap(),getPath(),getPosition()..).

如果我需要获取被拖动的标记的位置,我该怎么办？就像我平常一样？

marker = new google.maps.Marker(opts);
postion = marker.getPosition();

我在尝试向Mean.js添加模块(angular-google-maps)时遇到问题

我跑了:

bower install angular-google-maps --save

然后在applicationModuleVendorDependencies数组中将'google-maps'添加到public/config.js:

var applicationModuleVendorDependencies = ['ngResource', 'ngAnimate', 'ui.router', 'ui.bootstrap', 'ui.utils', 'google-maps'];

但是当我尝试运行(使用grunt)时,我收到一个错误:

Error: [$injector:nomod] Module 'google-maps' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

我还需要采取其他措施吗？在https://angular-ui.github.io/angular-google-maps/#!/use它说angular-google-maps依赖于Lodash,我是否还要在模块供应商依赖项中添加它？

我已经尝试了这一切,但仍然没有运气.请耐心等待,我是贸易设计师.

我创造了一个我到目前为止的Plunker.

我正在使用Angular Google Maps创建一个地图,我想在其上输出我的标记,单击其中一个将打开其信息窗口.在每个信息窗口中,我希望有一些互动内容,例如按钮,链接,游行乐队等

我的问题是多方面的:

1. 当我将信息窗口html放在标记内时,除非​​在父项上放置ng-non-bindable,否则不会显示任何变量.但是,我希望内容是交互式的.正如您将在我的代码中看到的那样,按钮什么都不做.

   <ui-gmap-windows show="show">
       <div class="markerwindow" ng-non-bindable>
           <h1>{{ title }}</h1>
           <p>{{ message }}</p>
           <footer>
               <a href="http://foo-bar.com">Google</a>
               <button click="buttonClick(id)">Button</button>
           </footer>
       </div>
   </ui-gmap-windows>
   

   Run Code Online (Sandbox Code Playgroud)

2. 在没有此错误的情况下,我无法使用templateUrl将模板分成单独的文件[我希望信息窗口最终非常重要]:

   "可能未处理的错误:分块迭代器中的错误:错误:[jqLit​​e:nosel] jqLit​​e不支持通过选择器查找元素!"

   <ui-gmap-windows show="show" templateUrl="templates/window.html">
   </ui-gmap-windows>
   

   Run Code Online (Sandbox Code Playgroud)

3. 最后,当我阅读文档时,我有时会哭泣...

有人可以帮我识别我的方法的问题吗？我真的很感激甚至是一片帮助,因为我现在真的很难在这个障碍上找到方法.

提前致谢.

我正在尝试让heatmapLayer在我使用angular-google-maps构建的地图中工作.我按以下方式设置了我的HTML:

<ui-gmap-google-map center='playerMap.center' zoom='playerMap.zoom'>
  <ui-gmap-layer namespace="visualization" type="HeatmapLayer" show="true" onCreated="playerMap.heatmapCallback()"></ui-gmap-layer>
  <ui-gmap-markers
    models="playerMap.markers"
    coords="'self'"
    icon="'icon'"
    fit="true"
    doCluster="playerMap.cluster"
    options="'options'"
    click="playerMap.showWindow()"
    events="playerMap.markersEvents">
    <ui-gmap-window
      show="playerMap.window.show"
      coords="playerMap.window.model"
      options="playerMap.window.options"
      closeclick="playerMap.window.closeClick()"
      templateUrl="'/app/dmPlayerMap/infoWindow.html'"
      templateParameter="playerMap.window">
    </ui-gmap-window>
  </ui-gmap-markers>
</ui-gmap-google-map>

我很困惑我应该在我的playerMap.heatmapCallback()方法中添加什么以及我需要做的其他任何事情来设置基本热图.该领域的文档非常缺乏.

我一直在努力研究如何使用角度模块angular-google-maps使用googles地理定位服务.使用这个模块使它很奇怪,不能像普通谷歌地图javascript v3一样进行地理定位.

例如:

var geocoder = new google.maps.Geocoder();

谷歌未定义..

这是我到目前为止所做的:

我的angular.module:

 ...'uiGmapgoogle-maps'])

 .config(['uiGmapGoogleMapApiProvider', function (GoogleMapApi) {
                GoogleMapApi.configure({
                  key: 'X',
                  v: '3.20',
                  libraries: 'weather,geometry,visualization' 
                });
              }]);

我的角度控制器:

.controller(...., function (.., uiGmapGoogleMapApi, GoogleMapApi){

//Map setup stuff

 var geocoder = new GoogleMapApi.Geocoder();
        geocoder.geocode( { 'address': 'something'}, function(results, status) {
         if (status == GoogleMapApi.google.maps.GeocoderStatus.OK) {
           $scope.map.control.getGMap().setCenter(results[0].geometry.location);
           $scope.map.marker.latitude = results[0].geometry.location.lat();
           $scope.map.marker.longitude = results[0].geometry.location.lng();
         } else {
           alert('Geocode was not successful for the following reason: ' + status);
         }
        });

Geocoder说未定义.非常混淆使用什么对象,uiGmapGoogleMapApi或GoogleMapApi来引用Geocoder().以及如何设置geocoder.geocode .. 请帮忙

我想在我的ASP.NET MVC应用程序中使用Angular Google Maps(http://angular-ui.github.io/angular-google-maps).我有一张地图,我有标记,标记点击显示警报.但是,我希望能够在markerClick函数中获取标记数据.不幸的是,数据未定义.有任何想法吗？

HTML:

<div ng-app="angular-app">
    <div ng-controller="MapController">
        <ui-gmap-google-map center="map.position" zoom="map.zoom" ng-init="initialize()">
            <ui-gmap-markers models="markers" coords="'location'" doCluster="'true'" idkey="markers.id" click="markerClick()"></ui-gmap-markers>
        </ui-gmap-google-map>
    </div>
</div>

JS(只有相关的标记点击我的控制器):

//...
$scope.markerClick = function (data) {
    alert('data is undefined :-(');
};
//...

编辑:这个问题也可以用另一种方式提出.如何正确使用UI-GMAP-标志小号与UI的GMAP窗口？文档很差,唯一的例子是ui-gmap-marker ...

我正在为我的Angular应用程序（5.xx）使用angular谷歌地图模块，除卫星切换按钮未显示这是google maps API的默认功能以外，其他所有功能都正常运行。我在Google官方文档屏幕上看到有一个选项可以禁用卫星视图，但不知道如何在角度Google Maps API中实现它。

  <agm-map [latitude]="lat" [longitude]="lng">
        <agm-marker [latitude]="lat"
                    [longitude]="lng"
                    [iconUrl]="'assets/images/robot/rad-tower.gif'"></agm-marker>
        <agm-marker [latitude]="-34.397"
                    [longitude]="149.644"
                    [iconUrl]="'assets/images/robot/rad-tower.gif'"></agm-marker>
        <agm-marker [latitude]="-33.397"
                    [longitude]="149.644"
                    [iconUrl]="'assets/images/robot/rad-tower.gif'"></agm-marker>
        <agm-marker [latitude]="-33.397"
                    [longitude]="150.644"
                    [iconUrl]="'assets/images/robot/rad-tower.gif'"></agm-marker>
      </agm-map>

而lat和lng是带值的简单变量

在 Ionic 3 + Angular 4 中，我有以下代码：

 <agm-info-window #infoWindow>
                        <strong>{{data.title}}</strong><br>
                      </agm-info-window>

标记仅在单击时打开气泡 如何默认打开？谢谢

我正在使用 google-maps 角度组件（https://github.com/angular/components/blob/master/src/google-maps/README.md）。我有一个标记数组，我想显示带有自定义 HTML 的 infoWindow。现在我的问题是如何在我的 infoWindows 中显示自定义 HTML。

到目前为止，我已经完成了窗口显示，唯一的问题是它显示正常字符串，而不是 HTML 内容。我的 component.html 看起来像：

<map-marker #markerElem="mapMarker"
    *ngFor="let marker of markersArray"
    [options]="marker"
    (mapClick)="openInfo(markerElem, marker.info)"
>
</map-marker>

<map-info-window>{{ infoContent }}</map-info-window>

在我的 component.ts 中：

@ViewChild(MapInfoWindow) infoWindow: MapInfoWindow;

infoContent: string;

openInfo(marker: MapMarker, content: string) {
    this.infoContent = content;
    this.infoWindow.open(marker);
}

我怎样才能让我的信息窗口显示一些 TEKST而不是<h2>SOME TEKST</h2>？

我可能没有正确理解范围,但是我在实现某些功能时遇到了问题.其中一个在这里解释:https://github.com/nlaplante/angular-google-maps/issues/473

我基本上没有在windows指令中获取模型信息ng-non-bindable,这阻止ng-click了工作.但我的ng-click方法需要模型中的信息才能正常工作.

另一个问题,你也可以在该链接的代码示例中看到,我需要基本上每个标记显示两个标记 - 我的意思是,我需要显示一个"框架",然后显示每个标记的图像,它们总是两个独立的图像.有没有办法实现这个目标？

添加了plunkr来演示这两个问题:http://plnkr.co/edit/QJmHKBSV2XniqF6HX7FS？p = preview

您可以看到窗口中的链接无法正常工作(它们不会从范围传递信息,因为该范围是孤立的？),另一个问题是采取更具创造性的方法,这是我基本上需要的每个标记包括两个图像.

我想说明的中心之间的距离marker,以每另一个markers在它自己的window.有没有办法计算距离angular-google-maps？

以下是此处的代码.

map.html

<div id="map_canvas" ng-controller="mainCtrl">
    <ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="true" options="options" bounds="map.bounds">
        <ui-gmap-markers models="randomMarkers" coords="'self'" icon="'icon'">
        </ui-gmap-markers>
    </ui-gmap-google-map>
</div>

controller.js

angular.module('appMaps', ['uiGmapgoogle-maps'])
  .controller('mainCtrl', function($scope) {
    $scope.map = {
      center: {
        latitude: 40.1451,
        longitude: -99.6680
      },
      zoom: 4,
      bounds: {}
    };
    $scope.options = {
      scrollwheel: false
    };
    var createRandomMarker = function(i, bounds, idKey) {
      var lat_min = bounds.southwest.latitude,
        lat_range = bounds.northeast.latitude - lat_min,
        lng_min = bounds.southwest.longitude,
        lng_range = bounds.northeast.longitude - lng_min; …

我使用自定义图像创建了一个标记，但该图像锚定在图像的底部。如果图像作为锚点，我想以中心为中心，这样即使我旋转图像，它也会围绕中心旋转。

我遵循了这个出色的解决方案Rotating image/marker image on Google map V3旋转 agm/core (angular 4) 中标记上的自定义图像。

感谢@ErDmKo

提前致谢