从mongodb _id创建gmaps标记idKey

时间:2015-10-27 14:07:03

标签: angularjs google-maps

我正在尝试从以下JSON对象创建gmaps标记:

[
  {
    "_id": "562f7d58efaab5554d184155",
    "address": "Breznikova ulica 15, 1230 Domzale",
    "name": "Trgovski Center Breza - Spar",
    "__v": 0,
    "location": [
      {
        "latitude": "46.1464016",
        "longitude": "14.597927",
        "_id": "562f7d58efaab5554d184156"
      }
    ]
  },
  {
    "_id": "562f7d5aefaab5554d184157",
    "address": "Ljubljanska cesta 150, 1230 Domzale",
    "name": "Lidl Domžale",
    "__v": 0,
    "location": [
      {
        "latitude": "46.14731829999999",
        "longitude": "14.6027877",
        "_id": "562f7d5befaab5554d184158"
      }
    ]
  },
  {
    "_id": "562f7d6332e11c894d883ea3",
    "address": "Saranoviceva cesta 27A, 1230 Domzale",
    "name": "Hofer Domžale",
    "__v": 0,
    "location": [
      {
        "latitude": "46.14850000000001",
        "longitude": "14.6115692",
        "_id": "562f7d6332e11c894d883ea4"
      }
    ]
  },
  {
    "_id": "562f7d6732e11c894d883ea5",
    "address": "Kettejeva ulica 14B, 1230 Domzale",
    "name": "Tuš Market TUŠ Rodica Domžale",
    "__v": 0,
    "location": [
      {
        "latitude": "46.1491647",
        "longitude": "14.5971633",
        "_id": "562f7d6732e11c894d883ea6"
      }
    ]
  }
]

加载页面后,我收到以下错误:

Marker model has no id to assign a child to. This is required for performance. Please assign id, or redirect id to a different key.

return logFn.apply(console, args);

我以为我可以将mongoDB "_id"值分配给idKey,但这似乎不起作用。有没有一种简单的方法可以解决这个问题,还是我需要编写一个循环来创建标记键?

我的HTML:

<ui-gmap-google-map center='map.center' zoom='map.zoom'>
  <ui-gmap-markers models="shops" coords="'shops.location'" idKey="'shops._id'"></ui-gmap-markers>
</ui-gmap-google-map>

我的控制员:

'use strict';

angular.module('shopkeeper2App')
  .controller('MainCtrl', function ($scope, $http, uiGmapGoogleMapApi) {
    $scope.shops = [];
    $scope.map = { center: { latitude: 46.1482491, longitude: 14.5987292 }, zoom: 16 };
    $scope.markers = [];
    $http.get('http://188.166.9.252:8080/api/shops/')
        .success(function(response) {
            $scope.shops = response;
            console.log($scope.shops);
        });
    $scope.markers = [];    
    uiGmapGoogleMapApi.then(function(maps) {
    });
  });

感谢您的帮助。

1 个答案:

答案 0 :(得分:0)

使用控制器中的专用选项对象解决了这个问题:

angular.module( "myApp" ).controller( "myMapCtrl", [ "$scope", function( $scope ) {
   var self = this
   self.markerOptions = {
     options : 'options',
     idkey : "marker_id",
   }; 
}]);

html看起来像这样:

<ui-gmap-google-map center='map.center' zoom='map.zoom'>
  <ui-gmap-markers models="shops" coords="'shops.location'" idKey="markerOptions.idkey"></ui-gmap-markers>
</ui-gmap-google-map>

希望这有帮助。