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

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/