标签: angular-google-maps

我收到了错误:'angular-google-maps:找不到有效的中心属性'.当我看到我的locationData从php后端和exec初始化函数加载.

HTML:

<div ng-init="locationData = '<?=htmlspecialchars($data)?>'">
    <google-map center="map.center" zoom="map.zoom" options="map.options"></google-map>
</div>

角度控制器:

app.controller('MapCtrl', ['$scope', function ($scope) {
    'use strict';

    $scope.$watch('locationData', function() {
        var location = JSON.parse($scope.locationData);
        $scope.location = {
            lng : location.longitude,
            lat : location.latitude
        initialize();
    });

    function initialize() {
        var mapOptions = {
            panControl    : true,
            zoomControl   : true,
            scaleControl  : true,
            mapTypeControl: true,
            mapTypeId     : google.maps.MapTypeId.ROADMAP
        };

        $scope.map = {
            center: {
                latitude: $scope.location.lat,
                longitude: $scope.location.lng
            },
            zoom: 13,
            options: mapOptions,
        };
    }
}]);

并且,我将$ scope.map设置移动到控制器块的顶部,并将常量值设置为map

center: { …

我正在尝试使用angular-google-maps模块在Google地图上的InfoWindow中创建链接ui-gmap-windows.

在我的HTML模板中,我有:

<ui-gmap-google-map center='main.map.center' zoom='main.map.zoom' options='main.map.options'>
     <ui-gmap-markers models="main.markers" coords="'self'" icon="'icon'" options="'options'" click="'onClick'" fit="true">
         <ui-gmap-windows show="'showWindow'" closeClick="'closeClick'" ng-cloak>
             <div class="mapinfowindow" data-ui-sref="display({id: id})">                                                                      
                 <span class="itemname" data-ng-non-bindable>{{ title }}</span>
             </div>
         </ui-gmap-windows>
     </ui-gmap-markers>
 </ui-gmap-google-map>

在我的控制器中,我有:

uiGmapGoogleMapApi.then(function(maps) {
  vm.itemlist = search.getItemList();                                                                                                                   
  var markers = [];
  _.each(vm.itemlist,function(item){
    search.getGeometry(item.href).then(function(marker) {
      marker.title      = item.en;
      marker.id         = item.href;
      marker.showWindow = false;
      marker.options    = {
                            title: item.en,
                            icon: markericon.normal
                          };
      marker.onClick    = function() { vm.markerClick(marker); };
      marker.closeClick = function() { vm.markerCloseClick(marker); };
      markers.push(marker);
    });
  });
  vm.markers = markers; …

我对此有疑问 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指令实际使用标记模型选项属性).

我正在使用GoogleMap API('angular-google-maps'js包),我有一种非常奇怪的行为.

我第一次加载它时,我会加载完整的地图,就像这里:

然后我关闭对话框并重新打开它,我看到了:

请记住,地图在另一个对话框的顶部显示为对话框.

有任何想法吗？

使用angular-google-maps将谷歌地图合并到一个应用程序中

我需要一个命令,它将在初始地图加载完成后运行一个函数ONCE
- 但仅限于初始加载,而不是在每个地图操作之后

我不能使用idle或tilesloaded因为这些都是在每次运动后被解雇的......

我想要运行的函数需要获取映射边界以在初始页面加载时从服务器中提取数据 - 我希望在初始加载时发生ONCE,然后是使用刷新的手动函数map-control
- 如果我使用idle或tilesloaded触发它将会每次用户移动地图时拉取服务器数据.

有没有人知道如何在初始地图加载后触发一次性命令来获取地图详细信息(边界等)？

我已经尝试过maps.getBounds()第二个承诺函数,但它不起作用.

请注意,我有一个小提琴在这里工作 - $scope.map在定义控件/选项等之后我无法链接任何更多的承诺,因为它们没有返回一个承诺:

在文档中的代码示例不显示如何串连承诺后的$scope.map定义.

HTML

<div class="angular-google-map-container" ng-controller="MainCtrl">
    <ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="true" options="map.options" events="map.events" control="googlemap">
    </ui-gmap-google-map>
</div>

调节器

myApp.controller('MainCtrl', function($scope, uiGmapGoogleMapApi) {
    uiGmapGoogleMapApi
    .then(function(maps){
        $scope.map = {
            center: {
                latitude: 37.7749295, 
                longitude: -122.4194155 
            },
            zoom: 12
            events: {
                tilesloaded: function (maps, eventName, args) {
                    myServiceFuntion(maps)    // …

我目前正在使用它DrawingManager来允许用户在地图上绘制形状.绘制一个形状后,我在多边形的路径上设置了一个监听器,这样我可以在路径改变后做出反应:

var polygonPath = event.overlay.getPath();
google.maps.event.addListener(polygonPath, 'set_at', function () { 
    // my code...
});

当用户使用绘图工具添加新形状时,这非常有用.但是,如果我在数据库中已经使用ui-gmap-polygonAngularJS指令(来自angular-google-maps项目)显示多边形,那么如何监听set_at事件,因为此事件不在多边形上,而是在多边形的路径上(MVCArray))？

我能够set_at在angular-google-maps项目的源代码中找到引用的唯一地方是array-sync.coffee文件,但它看起来并不像是暴露的.

如果我不能set_at直接使用指令来监听事件,我希望有一个事件在指令创建多边形时被触发,这样我就可以获得多边形的路径然后添加一个监听器,就像上面的代码.

我把JSFiddle基本结构和事件对象放在一起.它当前处理多边形的鼠标悬停和鼠标输出,但不处理set_at事件.

我正在使用angular-google-maps v-2.3.3。我正在使用“markers”指令加载标记，并使用地图“idle”事件进行一些操作。我的问题是，每次当用户放大或缩小或平移地图时，“空闲”事件都会根据边界内的标记数量触发 n 次。例如：如果有 40 个标记，空闲事件将被调用 40 次而不是一次。下面是我设置空闲事件的代码。

angular.extend(vm, {
        map: {
            center: { latitude: 47, longitude: 2 },
            markersControl: {},
            mapControl: {},
            events: {
                tilesloaded: function(map) {
                    $scope.$apply(function() {
                        vm.mapInstance = map;
                    });

                    var map = vm.map.mapControl.getGMap();

                    $timeout(function() {
                        google.maps.event.trigger(map, 'resize');
                    }, 100);

                },
                dragend: dragend,
                idle: function() {
                    try {
                        var markers = vm.map.markersControl.getGMarkers();
                        var map = vm.map.mapControl.getGMap();
                        for (var i = 0; i < markers.length; i++) {
                            if (map.getBounds().contains(markers[i].getPosition())) {
                                markers[i].setVisible(true);
                            } else {
                                markers[i].setVisible(false);
                            } …

更改语言时是否可以动态更改地图语言？或者至少在我下次访问时更改语言映射（更改语言后）。

我可以使用此代码（在 mymap.module.ts 中）在地图加载时设置默认语言：

@NgModule({ imports: [ 
  AgmCoreModule.forRoot({ apiKey: 'MY_KEY',
  language: 'es', }),
  ]
})

我可以使用 this.translate.currentLang（在 mymap.component.ts 中）获取当前语言。

但我不知道如何将两者结合起来。

我需要得到google.maps.Map。official我在文档中看不到方法。但我看到整个组件是exportedAs. 但是当我在模板中使用它时：

<google-map [center]="{lat: mapaLat, lng: mapaLng}"
                [zoom]="mapaZoom" [options]="{mapTypeControl: true}"
                #mapInstance="googleMap"></google-map>

它是局部变量。如何在我的组件的打字稿中获取它？

或者也许还有其他方法可以得到google.maps.Map？