当前位置: 动力学知识库 > 问答 > 编程问答 >

Ember.js + Google maps company mapping app with multiple custom markers

问题描述:

So if the original question is tl;dr, I guess all I really need to know is how to turn:

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('[email protected]')

});

into a simple array:

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']];

or modify:

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]);

}

to iterate over CompaniesController.open to create a new map marker for each item.


Original Question

I'm trying to create a simple state in an ember app that displays only currently open companies in a given area on a google map, based on a Company.isOpen filtered computed property on a controller. I would like to have custom markers for each company on the map, that when clicked, display the company name and hours.

I have looked at https://github.com/samwich/ember-map-demo (ember + g-maps demo where when you click on the map, a new marker is added) and http://jsfiddle.net/kjy112/pra3K/ (g-maps demo with multiple locations and custom clickable markers from an array) and I know the answer is staring me in the face, but I suck right now.

I have a jsfiddle here - http://jsfiddle.net/PVbvK/7/ - of where I'm a bit stuck.

First, I setup the basics:

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('[email protected]')

});

Then I super-sloppily threw a lot of the previous demo in the CompaniesView's didInsertElement to get the fiddle working:

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

}

}

});

Quick and dirty but I'm a fool right now...

So how do I get the contents of CompaniesController.open to create custom markers on the google map? If anyone could lend a hand it would be much appreciated, Cheers!

网友答案:

This is just a matter of using your controller.open property from the view, so mainly:

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);

Complete jsfiddle here: http://jsfiddle.net/PVbvK/9/

分享给朋友:
您可能感兴趣的文章:
随机阅读: