Question

所以，如果最初的问题是tl; dr，我想我真正需要知道的是如何转向：

App.CompaniesController = Em.ArrayController.extend({
    content: [
        App.Company.create({ markerText: "Bondi Bar", lat: -33.890542, lng: 151.274856, number: 4, iconUrl: "http://www.kjftw.com/sandbox/gmap/images/icons/numeric/red04.png", isOpen: true}),
        App.Company.create({ markerText: "Coogee Beach Grill", lat: -33.923036, lng: 151.259052, number: 5, iconUrl: "http://www.kjftw.com/sandbox/gmap/images/icons/numeric/red05.png", isOpen: false}),
        App.Company.create({ markerText: "Maroubra Smoke Shop", lat: -33.950198, lng: 151.259302, number: 1, iconUrl: "http://www.kjftw.com/sandbox/gmap/images/icons/numeric/red01.png", isOpen: true}),
  ],

  open: function() {
    return this.get('content').filterProperty('isOpen', true);
  }.property('content.@each')

});

成一个简单的数组：

var locations = [
    ['Bondi Bar', -33.890542, 151.274856, 4, 'http://www.kjftw.com/sandbox/gmap/images/icons/numeric/red04.png'],
    ['Maroubra Smoke Shop', -33.950198, 151.259302, 1, 'http://www.kjftw.com/sandbox/gmap/images/icons/numeric/red01.png']];

或修改：

for (var i = 0; i < locations.length; i++) {
    createMarker(new google.maps.LatLng(locations[i][1], locations[i][2]),locations[i][0], locations[i][3], locations[i][4]);
}

迭代CompaniesController.open为每个项目创建一个新的地图标记。

原始问题

我正在尝试在ember应用程序中创建一个简单状态，该应用程序根据控制器上的Company.isOpen筛选计算属性，仅在谷歌地图上的给定区域中显示当前打开的公司。我想在地图上为每个公司设置自定义标记，点击后，显示公司名称和小时数。

我查看了https://github.com/samwich/ember-map-demo（ember + g-maps演示，点击地图时添加了新标记）和http://jsfiddle.net/kjy112/pra3K/（g-maps演示了多个位置和自定义可点击来自阵列的标记）我知道答案是盯着我的脸，但我现在很糟糕。

我在这里有一个jsfiddle - http://jsfiddle.net/PVbvK/7/ - 我有点陷入困境。

首先，我设置了基础知识：

App.Router = Ember.Router.extend({
    enableLogging: true,
    root: Ember.Route.extend({
        event: Ember.Route.extend({
            route: '/',
            connectOutlets: function (router) {

                router.get('applicationController').connectOutlet('companies');
            }
        })
    })
  });

App.Company = Em.Object.extend({
    markerText: null,
    lat: null,
    lng: null,
    number: null,
    iconUrl: null,
    isOpen: null

  });



App.CompaniesController = Em.ArrayController.extend({
    content: [
        App.Company.create({ markerText: "Bondi Bar", lat: -33.890542, lng: 151.274856, number: 4, iconUrl: "http://www.kjftw.com/sandbox/gmap/images/icons/numeric/red04.png", isOpen: true}),
        App.Company.create({ markerText: "Coogee Beach Grill", lat: -33.923036, lng: 151.259052, number: 5, iconUrl: "http://www.kjftw.com/sandbox/gmap/images/icons/numeric/red05.png", isOpen: false}),
        App.Company.create({ markerText: "Maroubra Smoke Shop", lat: -33.950198, lng: 151.259302, number: 1, iconUrl: "http://www.kjftw.com/sandbox/gmap/images/icons/numeric/red01.png", isOpen: true}),
  ],

  open: function() {
    return this.get('content').filterProperty('isOpen', true);
  }.property('content.@each')

});

然后我超级懒散地在CompaniesView的didInsertElement中抛出了很多以前的演示来让小提琴工作：

App.CompaniesView = Ember.View.extend({
  templateName: 'companies',
  map: null,
  didInsertElement: function () {

    var map = null;
    var markerArray = []; //create a global array to store markers
    var locations = [
    ['Bondi Beach', -33.890542, 151.274856, 4, 'http://www.kjftw.com/sandbox/gmap/images/icons/numeric/red04.png'],
    ['Coogee Beach', -33.923036, 151.259052, 5, 'http://www.kjftw.com/sandbox/gmap/images/icons/numeric/red05.png'],
    ['Cronulla Beach', -34.028249, 151.157507, 3, 'http://www.kjftw.com/sandbox/gmap/images/icons/numeric/red03.png'],
    ['Manly Beach', -33.80010128657071, 151.28747820854187, 2, 'http://www.kjftw.com/sandbox/gmap/images/icons/numeric/red02.png'],
    ['Maroubra Beach', -33.950198, 151.259302, 1, 'http://www.kjftw.com/sandbox/gmap/images/icons/numeric/red01.png']];

    var myOptions = {
        zoom: 10,
        center: new google.maps.LatLng(-33.923036, 151.259052),
        mapTypeControl: true,
        mapTypeControlOptions: {
            style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
        },
        navigationControl: true,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(this.$().get(0), myOptions);


    this.set('map', map); //save for future updations
    this.$().css({ width: "600px", height: "600px" });

    for (var i = 0; i < locations.length; i++) {
    createMarker(new google.maps.LatLng(locations[i][1], locations[i][2]),locations[i][0], locations[i][3], locations[i][4]);
    }

    var infowindow = new google.maps.InfoWindow({
        size: new google.maps.Size(150, 50)
    });

    function createMarker(latlng, myTitle, myNum, myIcon) {
        var contentString = myTitle;
        var marker = new google.maps.Marker({
            position: latlng,
            map: map,
            icon: myIcon,
            zIndex: Math.round(latlng.lat() * -100000) << 5,
            title: myTitle
        });

        google.maps.event.addListener(marker, 'click', function() {
            infowindow.setContent(contentString);
            infowindow.open(map, marker);
        });

        markerArray.push(marker); //push local var marker into global array
    }

  }
});

快而又脏，但我现在是个傻瓜......

那么如何获取CompaniesController.open的内容以在谷歌地图上创建自定义标记？如果有人可以伸出援助之手，那将非常感激，干杯！

Answer 1

这只是在视图中使用controller.open属性的问题，主要是：

var locations = this.get('controller.open');
locations.forEach(function(location){
        createMarker(
            new google.maps.LatLng(location.get('lat'), location.get('lng')),
            location.get('markerText'), 
            location.get('number'),
            location.get('iconUrl'));        
}, this);

在此完成jsfiddle：http://jsfiddle.net/PVbvK/9/

Ember.js + Google使用多个自定义标记映射公司地图应用程序

1 个答案: