mygooglemap
代码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
}
})
选中复选框后,会将ID传递给get-googlemarker.php
并获取MarkerStore中数据库存储的最新经度和纬度,并在googlemap上显示标记。
所有编码都已完成,只需在googlemap上留下添加标记,如何在googlemap上动态添加标记?
标记将在函数tree.on('checkchange', function(node)
答案 0 :(得分:0)
function addDoctorLocation(options)
{
var gm = Ext.getCmp('mygooglemap');
var mpoint = new google.maps.LatLng(options.lat,options.lng);
var marker = gm.addMarker(mpoint,options.marker,false,false, options.listeners);
}
tree.on('checkchange', function(node){
var data = node.data;
if (data.checked == true){
var options = {
lat:lati,
lng:longi,
marker: {title:"Hello World!"},
listeners: {
click: function(e){
}
}
}
addDoctorLocation(options);
}
})