2

因此，如果最初的问题是 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 的内容以在谷歌地图上创建自定义标记？如果有人可以伸出援助之手，将不胜感激，干杯！

4

1 回答 1

5

这只是从视图中使用你的 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/

于 2012-11-16T20:57:23.520 回答