Ember.js +谷歌公司的地圖應用映射與多個自定義標記

Question

所以，如果原來的問題是文藝青年最愛的，我想我真正需要知道的是如何把：

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創建一個新的地圖標記 每一個項目。

---

原始的問題

我試圖創建僅顯示當前打開的公司在谷歌地圖上的給定區域餘燼應用一個簡單的狀態，根據Company.isOpen在控制器上過濾計算的屬性。我想爲地圖上的每家公司定製標記，點擊時顯示公司名稱和小時數。

我已經看過https://github.com/samwich/ember-map-demo（燼+ G-地圖演示就是當你點擊地圖上，一個新的標記添加）和http://jsfiddle.net/kjy112/pra3K/和I（G-地圖與多個位置和自定義可點擊的標記從數組演示）知道答案是盯着我的臉，但我現在吮吸。

我在這裏有一個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/