ExtJS 7.3.0 GMap Classsic工具包标记组件

rt4zxlrg  于 2022-11-04  发布在  其他
关注(0)|答案(1)|浏览(131)

在从现代工具包到经典工具包的重构过程中,我发现了标记组件的一个问题--它们没有包含在经典工具包中。
来自现代工具包 Sencha 文档:
标记:Ext.data.Store / Object / Ext.data.Model[] / Ext.ux.google.map.标记可绑定
可以是存储示例、将转换为存储的配置对象、模型数组或单个模型(在这种情况下将创建存储)。存储用于填充将在Map中呈现的标记集。标记选项通过markerTemplate配置读取。
是否真实的的要将此组件集成到Classic Toolkit中?无法从互联网/文档中找到最佳解决方案(如果是真的)。

kd3sttzy

kd3sttzy1#

在经典的工具包中,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兼容(位置vs.纬度lng)。
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'
        })

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

相关问题