javascript - Add are dynamic marker in GmapPanel - EXTJS 4 -
this create googlemap panel id mygooglemap
code var layout = ext.create('ext.panel.panel', { //renderto: 'layout', width: window.innerwidth, height: window.innerheight, //title: 'border layout', //no title blank layout: 'border', items: [{ title: 'message list', region: 'south', // position part 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 body , display layout @ there }); });
this when check tree clicked checkbox , status of checkbox true add together marker on 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 can define params want sent on each request store mainid: 'value1' }, reader: { type: 'json', root: 'images' } } }); tree.on('checkchange', function(node){ var info = 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 longtitude , latitude,add google map marker @ here } })
when checkbox checked,then pass id get-googlemarker.php
, latest longitude , latitude on database store in markerstore,and show marker on googlemap. coding work done,just left add together marker on googlemap, how add together marker on googlemap dynamically? marker create within function tree.on('checkchange', function(node)
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 info = node.data; if (data.checked == true){ var options = { lat:lati, lng:longi, marker: {title:"hello world!"}, listeners: { click: function(e){ } } } adddoctorlocation(options); } })
solved code
javascript ajax google-maps extjs extjs4
No comments:
Post a Comment