Javascript GoogleMaps API与Emberjs

我有一张谷歌地图，上面有EmberJs视图。除了数据绑定之外，其他一切都很好

我想用余烬数据绑定地图标记。若数据级别发生变化，它必须反映在地图上

我尝试使用observer，并重新运行makeMarkers方法来设置标记，但这似乎是一个糟糕的解决方案

用谷歌地图绑定数据的最佳方式是什么

1）创建组件，而不是视图

2） 使用

didInsertElement

渲染google地图，使用observer更新地图。不要忘记观察者是同步的（），您需要执行smth，如：

somethingChanged: Ember.observer('something', function () {
    Ember.run.once(this, '_somethingChanged');
}).on('init'),
_somethingChanged: function () {
    /* do smth about changed property here */
}

1） 创建组件，而不是视图

2） 使用

didInsertElement

渲染google地图，使用observer更新地图。不要忘记观察者是同步的（），您需要执行smth，如：

somethingChanged: Ember.observer('something', function () {
    Ember.run.once(this, '_somethingChanged');
}).on('init'),
_somethingChanged: function () {
    /* do smth about changed property here */
}

1） 创建组件，而不是视图

2） 使用

didInsertElement

渲染google地图，使用observer更新地图。不要忘记观察者是同步的（），您需要执行smth，如：

somethingChanged: Ember.observer('something', function () {
    Ember.run.once(this, '_somethingChanged');
}).on('init'),
_somethingChanged: function () {
    /* do smth about changed property here */
}

1） 创建组件，而不是视图

2） 使用

didInsertElement

渲染google地图，使用observer更新地图。不要忘记观察者是同步的（），您需要执行smth，如：

somethingChanged: Ember.observer('something', function () {
    Ember.run.once(this, '_somethingChanged');
}).on('init'),
_somethingChanged: function () {
    /* do smth about changed property here */
}

---

视图在Ember 2.0上被弃用，它们将在Ember 2.5中被删除，制作一个组件，如：{{g-map markers=models}

此组件有一个项目集合，这里是

标记


您可以实现如下内容：

import Ember from 'ember';
import MarkerSync from '../mixin/marker-synchronizer';

/**
 * Basic Component to display a google map,
 * Service & Marker have to be improved
 **/
export default Ember.Component.extend(MarkerSync, {
    classNames: 'google-map',
    googleMap: Ember.inject.service(),
    map: null,

    mapOptions: function () {
        return {
            center: new google.maps.LatLng(-34.397, 150.644),
            zoom: 8
        };
    },

    didInsertElement: function () {
        this.$().height('100%');
        this.$().width('100%');
        this.displayGmap();
        jQuery(window).on('resize', Ember.run.bind(this, this.handleResize));
    },

    willInsertElement: function () {
        this.get('googleMap').loadScript();
    },

    displayGmap: Ember.observer('googleMap.isLoaded', function () {
        if (!this.get('googleMap.isLoaded')) {
            return;
        }
        const mapOptions = this.mapOptions();
        this.set('map', new google.maps.Map(this.$()[0], mapOptions));
    }),

    handleResize: function () {
        if (!this.get('googleMap.isLoaded')){
            return;
        }
        const map = this.get('map');
        const center = map.getCenter();
        google.maps.event.trigger(map, 'resize');
        map.setCenter(center);
    },
});

import Ember from 'ember';

/**
 * Synchronize collection with map from component.
 * Care about to display or remove marker from map,
 * Be careful this is not optimized.
 **/
export
default Ember.Mixin.create({
    markers: null,
    _gHash: Ember.A(),
    init() {
        this._super.apply(this, arguments);
        /*
        * observes markers array.
        */
        this.get('markers').addArrayObserver({
            arrayWillChange: Ember.run.bind(this, this.markersWillChange),
            arrayDidChange: Ember.run.bind(this, this.markersDidChange)
        });
    },

    /*
    * Remove marker from array and remove from map
    */
    markerRemoved(marker) {
        let gMarker = this.get('_gHash').find(function(item) {
            return item.related === marker;
        });
        gMarker.native.setMap(null);
        this.get('_gHash').removeObject(gMarker);
    },

    /*
    * Add marker to `synchronized` array and display on map
    */
    markerAdded(marker) {
        const gMarker = new google.maps.Marker({
            position: {
                lat: marker.lat,
                lng: marker.lng
            },
            title: marker.title,
            map: this.get('map'),
        });
        this.get('_gHash').push({
            native: gMarker,
            related: marker
        });
    },

    /*
    * Take care about removed item
    */
    markersWillChange(markers, start, removeCount, addCount) {
        if (removeCount > 0) {
            for (let i = start; i < start + removeCount; i++) {
                this.markerRemoved(markers.objectAt(i));
            }
        }
    },

    /*
    * Take care about added item
    */
    markersDidChange(markers, start, removeCount, addCount) {
        if (addCount > 0) {
            for (let i = start; i < start + addCount; i++) {
                this.markerAdded(markers.objectAt(i));
            }
        }
    },
});

import Ember from 'ember';

const get = Ember.get;

/**
* This service lazy load googleMap api.
* Ugly but do the job
*/
export default Ember.Service.extend({

    scriptUrl: 'https://maps.googleapis.com/maps/api/js',
    isLoaded: Ember.computed.equal('state', 'loaded'),
    state: 'none',

    init: function () {
        let config = this.container.lookupFactory('config:environment');
        var apiKey = get(config, 'googleMap.apiKey');
        this.set('apiKey', apiKey);
    },

    normalizeUrl: function () {
        var url = this.get('scriptUrl');
        url += '?' + 'v=3' + '&' + 'libraries=places' + '&' + 'callback=loadGmap';
        if (this.get('apiKey')) {
            url += '&key=' + this.get('apiKey');
        }
        return url;
    },

    loadScript: function () {
        if (this.get('state') !== 'none'){
            return false;
        }
        this.set('state', 'loading');
        window.loadGmap = Ember.run.bind(this, function () {
            this.set('state', 'loaded');
        });
        var url = this.normalizeUrl();
        return Ember.$.getScript(url).fail(function(){
            console.log('getScript fail');
        });
    },
});

从“余烬”导入余烬；
从“../mixin/marker synchronizer”导入MarkerSync；
/**
*显示谷歌地图的基本组件，
*必须改进服务和标记
**/
导出默认的Ember.Component.extend（MarkerSync{
类名：“谷歌地图”，
googleMap:Ember.inject.service（），
map:null，
映射选项：函数（）{
返回{
中心：新google.maps.LatLng（-34.397150.644），
缩放：8
};
},
didInsertElement:函数（）{
这个。$（）高度（'100%）；
这个$（）.width（'100%）；
这个.displayGmap（）；
jQuery（window.on（'resize'，Ember.run.bind（this，this.handleResize））；
},
willInsertElement:函数（）{
this.get（'googleMap'）.loadScript（）；
},
displayGmap:Ember.observer（'googleMap.isLoaded'，函数（）{
如果（！this.get（'googleMap.isLoaded'））{
返回；
}
const mapOptions=this.mapOptions（）；
this.set（'map'，新的google.maps.map（this.$（）[0]，mapOptions））；
}),
handleResize:函数（）{
如果（！this.get（'googleMap.isLoaded'））{
返回；
}
const map=this.get（'map'）；
const center=map.getCenter（）；
google.maps.event.trigger（映射，'resize'）；
地图设置中心（中心）；
},
});
从“余烬”导入余烬；
/**
*从组件将集合与映射同步。
*是否要在地图上显示或删除标记，
*小心，这不是优化的。
**/
出口
默认Ember.Mixin.create({
标记：空，
_gHash:Ember.A（），
init（）{
这个._super.apply（这个，参数）；
/*
*观察标记数组。
*/
this.get（'markers'）.addArrayObserver({
arrayWillChange:Ember.run.bind（this，this.markersWillChange），
arrayDidChange:Ember.run.bind（this，this.markersDidChange）
});
},
/*
*从数组中删除标记并从映射中删除
*/
markerRemoved（标记器）{
让gMarker=this.get（“'u-gHash'）.find（函数（项）{
返回项目。相关===标记；
});
gMarker.native.setMap（null）；
this.get（“'u-gHash'）.removeObject（gMarker）；
},
/*
*将标记添加到“synchronized”数组并显示在地图上
*/
标记添加（标记）{
const gMarker=new google.maps.Marker({
职位：{
lat:marker.lat，
液化天然气：marker.lng
},
标题：marker.title，
map:this.get（'map'），
});
这个，去推({
本地人：gMarker，
相关：标记
});
},
/*
*注意移除的项目
*/
标记将更改（标记、开始、删除计数、添加计数）{
如果（removeCount>0）{
for（让i=start；i0）{
for（设i=start；i

此实现工作正常，但您必须“清理”此代码：）
视图为dep