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を反復処理して、各アイテムの新しいマップマーカーを作成します。

元の質問

コントローラーのCompany.isOpenフィルター処理された計算済みプロパティに基づいて、Googleマップの特定の領域で現在開いている会社のみを表示する単純な状態をemberアプリで作成しようとしています。地図上に会社ごとにカスタムマーカーを付けたいのですが、クリックすると会社名と営業時間が表示されます。

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のコンテンツを取得して、Googleマップにカスタムマーカーを作成するにはどうすればよいですか？誰かが手を貸してくれるなら、それは大いにありがたいです、乾杯！

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 に答える