ExtJS 7.3.0 GMap Classsic 工具包标记组件答案

【问题标题】：ExtJS 7.3.0 GMap Classsic toolkit markers componentExtJS 7.3.0 GMap Classsic 工具包标记组件
【发布时间】：2022-01-15 00:18:03
【问题描述】：

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

来自 Modern Toolkit Sencha Docs：

标记：Ext.data.Store / Object / Ext.data.Model[] / Ext.ux.google.map.Marker 可绑定

可以是 Store 实例、将被转换为 store 的配置对象、模型数组或单个模型（在这种情况下将创建 store）。 Store 用于填充将在地图中呈现的标记集。标记选项通过 markerTemplate 配置读取。

将这个组件集成到 Classic Toolkit 中是真的吗？无法从互联网/文档中找到最佳解决方案（如果它是真实的）。

【问题讨论】：

如何以经典方式添加 google.maps？似乎还没有经典的集成。
@Dinkheller 有 GMap 面板 UX
问题似乎出在 GMap Panel UX 中，在 createMap 内部调用 Ext.each(this.markers, this.addMarker, this); ==> panel.markers 作为标记添加到地图中。在addMarker 中，它需要一个标记。目前不支持。但是有了它，您可以轻松地将标记添加为商店，并且在记录更改时您可以轻松更新标记。只需创建一个 GMap.Store 并将其添加到面板中。应该是 1 天的工作。
@Dinkheller 谢谢你，先生！我会试试这个！

标签： javascript google-maps extjs google-maps-markers

【解决方案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 兼容的（位置与纬度 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

【讨论】：