ExtJS 7.3.0 GMap Classsic 工具包标记组件

Question

在从现代工具包重构到经典工具包的过程中，我发现标记组件存在问题 - 它们不包含在经典工具包中。

来自现代工具包 Sencha 文档：

markers : Ext.data.Store / Object / Ext.data.Model[] / Ext.ux.google.map.Marker bindable

Can be either a Store instance, a configuration object that will be turned into a store, an array of model or a single model (in which case a store will be created). The Store is used to populate the set of markers that will be rendered in the map. Marker options are read through the markerTemplate config.

这个组件集成到Classic Toolkit中是真的吗？无法从 internet/documendation.

中找到最佳解决方案（如果它是真实的）

Answer 1

在经典工具包中，addMarker 方法需要一个对象。

从https://docs.sencha.com/extjs/7.0.0/classic/src/GMapPanel.js.html

addMarker: function(marker) {
        var o;
 
        marker = Ext.apply({
            map: this.gmap
        }, marker);
 
        if (!marker.position) {
            marker.position = new google.maps.LatLng(marker.lat, marker.lng);
        }
 
        o = new google.maps.Marker(marker);
 
        Ext.Object.each(marker.listeners, function(name, fn) {
            google.maps.event.addListener(o, name, fn);
        });
 
        return o;
    },

但您可以简单地实现标记，它是一个特殊的记录 - 但在我看来，它们 1:1 不兼容（位置与经纬度）。

https://docs.sencha.com/extjs/6.6.0/modern/src/Marker.js.html

这是一个经典的工具包标记：

Ext.define('Ext.ux.google.map.Marker', {
            extend: 'Ext.data.Model',
            fields: ['lat', 'lng', 'title']
});

一起

   // define marker
        Ext.define('Ext.ux.google.map.Marker', {
            extend: 'Ext.data.Model',
            fields: ['lat', 'lng', 'title']
        });
        
        // create map
        var mapwin = Ext.create('Ext.Window', {
            layout: 'fit',
            title: 'GMap Window',
            width: 800,
            height: 600,
            items: {
                xtype: 'gmappanel',
                gmapType: 'map',
                mapOptions: {
                    center: new google.maps.LatLng(-33.712451, 150.311823),
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                }
            }
        }).show();
        
        // use marker as record
        let m = Ext.create('Ext.ux.google.map.Marker');
        m.set('lat', -33.732451);
        m.set('lng', 150.311823);
        m.set('title', 'foo bar');

        let data = m.getData();
        let {
            lat, lng, title
        } = data;

        mapwin.down('gmappanel').addMarker({
            lat, lng, title
        });
        
        // simple objects        
        mapwin.down('gmappanel').addMarker({
            lat: -33.712451,
            lng: 150.311823,
            title: 'Holmes Home'
        })

        mapwin.down('gmappanel').addMarker({
            lat: -33.722451,
            lng: 150.311823,
            title: 'Holmes Home'
        })

Fiddle https://fiddle.sencha.com/#view/editor&fiddle/3hnq

ExtJS 7.3.0 GMap Classsic 工具包标记组件

ExtJS 7.3.0 GMap Classsic toolkit markers component

javascript

google-maps

extjs

google-maps-markers