这是使用 idmygooglemap
代码创建 googlemap 面板
var layout = Ext.create('Ext.panel.Panel', {
//renderTo: 'layout',
width: window.innerWidth,
height: window.innerHeight,
//title: 'Border Layout', //no title will be blank
layout: 'border',
items: [{
title: 'Message List',
region: 'south', // position for region
xtype: 'panel',
height: 100,
split: true, // enable resizing
collapsible: true,
margins: '0 5 5 5',
collapsed: true
},tree,{
xtype: 'gmappanel',
id : 'mygooglemap',
gmapType: 'map',
zoomLevel: 7,
mapConfOpts: ['enableScrollWheelZoom','enableDoubleClickZoom','enableDragging'],
mapControls: ['GSmallMapControl','GMapTypeControl','NonExistantControl'],
setCenter: {
lat: 3.951941,
lng: 102.052002,
}
}],
renderTo: Ext.getBody() //get the body and display Layout at there
});
});
这是当检查树单击复选框并且复选框的状态为真时,然后在 googlemap 上添加标记
Ext.define('GoogleMarkerModel', {
extend: 'Ext.data.Model',
fields: ['Locating','MainPower','Acc','PowerOff','Alarm','Speed','Direction','Latitude','Longitude','DateTime','MainID', 'DeviceID','IOState','OilState']
});
var MarkerStore = Ext.create('Ext.data.JsonStore', {
model: 'GoogleMarkerModel',
autoLoad: true,
proxy: {
type: 'ajax',
url: 'get-googlemarker.php',
baseParams: { //here you can define params you want to be sent on each request from this store
mainid: 'value1'
},
reader: {
type: 'json',
root: 'images'
}
}
});
tree.on('checkchange', function(node){
var data = node.data;
Ext.MessageBox.show({
title: 'Changed checkbox status',
msg: 'MainID: ' + data.MainID + ' <br /> Checkbox status: ' + data.checked,
icon: Ext.MessageBox.INFO
});
if (data.checked = true){
MarkerStore.load({
params: {
mainid: data.MainID
}
})
//after markerstore get the longtitude and latitude,add google map a marker at here
}
})
当复选框被选中时,然后将传递一个 idget-googlemarker.php
并在 MarkerStore 的数据库存储中获取最新的经度和纬度,并在 googlemap 上显示标记。
所有编码都完成了,只是在googlemap上留下了添加标记,如何在googlemap上动态添加标记?
标记将在函数内部创建tree.on('checkchange', function(node)