在從現代工具包重構為經典工具包的程序中,我發現標記組件存在問題——它們不包含在經典工具包中。
來自現代工具包 Sencha 檔案:
標記: Ext.data.Store / Object / Ext.data.Model[] / Ext.ux.google.map.Marker 可系結
可以是 Store 實體、將變成商店的配置物件、模型陣列或單個模型(在這種情況下將創建商店)。Store 用于填充將在地圖中呈現的標記集。標記選項通過標記模板配置讀取。
將此組件集成到 Classic Toolkit 中是真的嗎?無法從互聯網/檔案中找到最佳解決方案(如果是真實的)。
uj5u.com熱心網友回復:
在經典工具包中, 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'
})
小提琴https://fiddle.sencha.com/#view/editor&fiddle/3hnq
轉載請註明出處,本文鏈接:https://www.uj5u.com/gongcheng/381789.html
