处理gmappanel extJS中的点击事件 [英] handle click event in gmappanel extJS
本文介绍了处理gmappanel extJS中的点击事件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
单击事件映射实现，但没有hapens.I使用MVC Extjs我知道如何在JavaScript中实现例如 http://jsfiddle.net/fatihacet/ckegk/ 简单的点击事件，但在extjs我应该把代码我有gmappanel在窗口中如何处理这在controller.On点击地图标记应该出现在那个地方。我已经阅读文档，发现google.maps.event.addListener，但如何实现这个
Ext.define（'App。 view.App'，{
extend：'Ext.window.Window'，
alias：'widget.appform'，
title：''，
operation：''，
resizable：false，
modal：true，
initComponent：function（）{
me = this;
this.autoShow = true;
this。 width = 550;
this.height = 650;
this.items = [
{
xtype：'textfield'，
name：'title'，
value：me.login，
fieldLabel：'Title'，
allowBlank：false，
width： 330，
style：{
marginTop：'10px'，
marginLeft：'20px'，
marginRight：'20px'
}
}，
{
title：'Google Map'，
width：535，
height：800，
// frame：true，
id ：'gmapForm'，
// height：'100％'，
xtype：'gmappanel'，
gmapType：'map'，
center：{
geoCodeAddr ：221B贝克街，
马克呃：{
title：'Holmes Home'
}
}，
mapConfOpts：['enableScrollWheelZoom'，'enableDoubleClickZoom'，'enableDragging']，
mapControls： ['GSmallMapControl'，'GMapTypeControl'，'NonExistantControl']，
mapOptions：{
mapTypeId：google.maps.MapTypeId.ROADMAP
}，
听众：{
maprender：function（extMapComponent，googleMapComp）{
var marker = new google.maps.Marker（{
position：position = new google.maps.LatLng（42.16726190， -87.83146810），
//位置：patientPosition，// patientPosition初始化为Home.js中的geocodePatientAddress（）函数
map：googleMapC omp，
animation：google.maps.Animation.DROP，
draggable：false，
title：'Patient Location'
}）;
google.maps.event.addListener（marker，'click'，function（）{
// infowindow.open（googleMapComp，marker）;
console.log（' sssssssssss'）;
}）;
google.maps.event.addListener（marker，'mouseout'，function（）{
infowindow.close（googleMapComp，marker）;
}）;
$ b处理函数function（）{
google.maps.event.addListener（marker，'click'，function（）{
// infowindow.open（googleMapComp，marker）;
console.log（'sssssssssss'）;
}）; $（'window'）。down（'form'）。getForm（）。reset（）;
// this.up（'window'）。
$ b / * google.maps.event.addListener（gObject，click，function（e）{
alert（'test'）;
}）* /
}
];
this.buttons = [
{
text：me.operation，
name：me.operation，
scope：this
}，
];
console.log（arguments）;
this.callParent（arguments）;
}
}）;
另外我有控制器
Ext.define（'App.controller.AppController'，{
extend：'Ext.app.Controller'，
views：[
'App.AppPanelView '，
'App.AppForm'
$ b $]，
商店：['App.Apptore']，
模型：['App.AppModel ']，
refs：[
{ref：'App'，selector：'AppForm'}
]，
init ：函数（）{
this.control（{
'应用程序按钮[name =Add]'：{
click：this.addPersonForm，
afterrender：this.addMapListener
}
}）;
}，
selectedRow：null，
countryId：null，
personProfile：null，
modalImageIndex：null，
imageId：null，
avatar：，
$ b addMarker：function（） {
console.log（aaaaaaa）;
var win = Ext.widget（'AppForm'，{title：'添加组'，操作：'添加'}）;
var trafficMap = Ext.getCmp（'gmapForm'）;
// var marker_icon = new google.maps.MarkerImage（'images / map /'+ thisIcon +'.png'，新的google.maps.Size（32，32））;
/ * var trafficMarker = new google.maps.Marker（{
position：new google.maps.LatLng（alert.lat，alert.lon），
map：trafficMap，
// icon：marker_icon，
id：'trafficAlertIcon'* // * i * // *
}）; * /
/ * var options = {
lat：3.951941，
lng：-102.052002，
标记：{title：Hello World！}，
听众：{
click：function（e）{
}
}
};
console.log（trafficMap）;
var lat = 3.951941，
lng = 102.052002;
var mpoint = new google.maps.LatLng（lat，lng）;
trafficMap.addMarker（mpoint，options.marker，false，false，options.listeners）; * /
/ * google.maps.event.addListener（trafficMarker，'mousedown'，function （）
{
console.log（'moved marker'）;
* // * * trafficTabPanel.layout.setActiveItem（1，{type：'slide'，direction：'left'} ）;
LoadIncidentMap（this.id.substring（16））; * // *
}）;
* /
/ * google.maps.event.addListener（trafficMap，click，function（e）{
console.log（'click'）;
// lat和lng可用于e对象
// var latLng = e.latLng;
}）; * /
var addMarker = google .maps.event.addListener（trafficMap，'click'，function（e）{
var lat = e.latLng.lat（）; //点击点的经纬度
var lng = e.latLng。 lng（）; //点击点的lng
var markerId = getMarkerUniqueId（lat，lng）; //一个用于缓存标记对象的标记
var marker = new google.maps .Marker（{
position：getLatLng（lat，lng），
map：map，
id：'marker_'+ markerId
}）;
console.log （lat ++ lng）;
// markers [markerId] = marker; //标记对象中的缓存标记
// bindMarker事件（标记）; //将右键单击事件绑定到标记
}）;
addMarker;
console.log（'clickaa'）;
//win.show（）;
}，
addMapListener：function（）{
console.log（A1）;
var trafficMap = Ext.getCmp（'gmapForm'）;
google.maps.event.addListener（trafficMap，'click'，function（e）{
console.log（A3）;
var lat = e.latLng .lat（）; //点击点的纬度
var lng = e.latLng.lng（）; //点击点的lng
var markerId = getMarkerUniqueId（lat，lng）; // an that将被用于在标记对象中缓存这个标记。
var marker = new google.maps.Marker（{
position：getLatLng（lat，lng），
map：map，
id：'marker_'+ markerId
}）;
console.log（lat ++ lng）;
// markers [markerId] = marker ; //标记对象中的缓存标记
// bindMarkerEvents（marker）; //将右键单击事件绑定到标记
}）;
console.log（A22）;
var map;
// map = new google.maps.Map（$（'＃map'）[0]，myOptions）;
/ * var myOptions = {
zoom：7，
center：new google.maps.LatLng（46.87916，-3.32910），
mapTypeId：'roadmap'
};
google.maps.event.addListener（map，'click'，function（e）{
console.log（A2）;
var lat = e.latLng.lat （）; //单击点的纬度
var lng = e.latLng.lng（）; //点击点的长度
var markerId = getMarkerUniqueId（lat，lng）; // an that will be用于在标记对象中缓存这个标记
var marker = new google.maps.Marker（{
position：getLatLng（lat，lng），
map：map，
id ：'marker_'+ markerId
}）;
markers [markerId] = marker; //标记对象中的缓存标记
bindMarkerEvents（marker）; //将右键单击事件绑定到标记
}）; * /
}
}）;
请问如何让我不知道怎么做， >
我只需要在地图上用鼠标点击鼠标就可以添加标记。
var trafficMap = Ext.getCmp（'gmapForm'）;
google.maps.event.addListener（trafficMap，'click'，function（e）{
var lat = e.latLng.lat（）; //点击点的经纬度
var lng = e.latLng.lng（）; //单击点的lng
var markerId = getMarkerUniqueId（lat，lng）; //将用于在标记对象中缓存此标记
var marker = new google.maps.Marker（{
position：getLatLng（lat，lng），
map：map，
id：'marker_'+ markerId
}）;
}）;
因此，您要创建一个映射并将其分配给一个名为 trafficMap的变量。但是当你添加一个新的标记时，你的事件监听器引用了一个名为 map 的映射变量： map：map
改变它以引用 trafficMap 变量，即
var marker = new google.maps.Marker（{
position：getLatLng（lat，lng），
map：trafficMap，
id： 'marker_'+ markerId
}）;
甚至只是：
var marker = new google.maps.Marker（{
position：getLatLng（lat，lng），
map：this，
id：'marker_'+ markerId
}）;
click event to map Implemented but nothing hapens.I am using MVC Extjs I know how to implement in javascript for example http://jsfiddle.net/fatihacet/ckegk/ simple click event but in extjs where I should put the code I have gmappanel in window how to handle this in controller.On click on map marker should appear in that place.I have read documentation an found google.maps.event.addListener but how to implement this
Ext.define('App.view.App', {
extend: 'Ext.window.Window',
alias: 'widget.appform',
title:'',
operation:'',
resizable: false,
modal:true,
initComponent: function () {
me = this;
this.autoShow = true;
this.width = 550;
this.height = 650;
this.items = [
{
xtype: 'textfield',
name: 'title',
value:me.login,
fieldLabel: 'Title',
allowBlank: false,
width:330,
style:{
marginTop:'10px',
marginLeft:'20px',
marginRight:'20px'
}
},
{
title: 'Google Map',
width:535,
height:800,
// frame:true,
id:'gmapForm',
// height: '100%',
xtype: 'gmappanel',
gmapType: 'map',
center: {
geoCodeAddr: "221B Baker Street",
marker: {
title: 'Holmes Home'
}
},
mapConfOpts: ['enableScrollWheelZoom','enableDoubleClickZoom','enableDragging'],
mapControls: ['GSmallMapControl','GMapTypeControl','NonExistantControl'],
mapOptions : {
mapTypeId: google.maps.MapTypeId.ROADMAP
},
listeners: {
maprender: function(extMapComponent, googleMapComp){
var marker = new google.maps.Marker({
position: position = new google.maps.LatLng (42.16726190,-87.83146810),
// position: patientPosition, //patientPosition initialized in geocodePatientAddress() function in Home.js
map: googleMapComp,
animation: google.maps.Animation.DROP,
draggable: false,
title: 'Patient Location'
});
google.maps.event.addListener(marker, 'click', function() {
// infowindow.open(googleMapComp, marker);
console.log('sssssssssss');
});
google.maps.event.addListener(marker, 'mouseout', function() {
infowindow.close(googleMapComp, marker);
});
}
},
handler : function () {
google.maps.event.addListener(marker, 'click', function() {
// infowindow.open(googleMapComp, marker);
console.log('sssssssssss');
});
// this.up('window').down('form').getForm().reset();
}
/* google.maps.event.addListener(gObject, "click", function(e){
alert('test');
})*/
}
];
this.buttons = [
{
text:me.operation,
name: me.operation,
scope: this
},
];
console.log(arguments);
this.callParent(arguments);
}
});
Also I have controller where
Ext.define('App.controller.AppController', {
extend: 'Ext.app.Controller',
views: [
'App.AppPanelView',
'App.AppForm'
],
stores: ['App.Apptore'],
models: ['App.AppModel'],
refs: [
{ ref: 'App', selector: 'AppForm' }
],
init: function () {
this.control({
'App button[name="Add"]':{
click:this.addPersonForm,
afterrender:this.addMapListener
}
});
},
selectedRow:null,
countryId:null,
personProfile:null,
modalImageIndex:null,
imageId:null,
avatar:"",
addMarker:function(){
console.log("aaaaaaa");
var win= Ext.widget('AppForm',{title:'Add Group',operation:'Add'});
var trafficMap = Ext.getCmp('gmapForm');
// var marker_icon = new google.maps.MarkerImage('images/map/' + thisIcon + '.png', new google.maps.Size(32, 32));
/*var trafficMarker = new google.maps.Marker({
position: new google.maps.LatLng(alert.lat, alert.lon),
map: trafficMap,
// icon: marker_icon,
id: 'trafficAlertIcon' *//*i*//*
});*/
/*var options = {
lat:3.951941,
lng:-102.052002,
marker: {title:"Hello World!"},
listeners: {
click: function(e){
}
}
};
console.log(trafficMap);
var lat = 3.951941,
lng = 102.052002;
var mpoint = new google.maps.LatLng(lat,lng);
trafficMap.addMarker(mpoint,options.marker,false,false, options.listeners);*/
/* google.maps.event.addListener(trafficMarker, 'mousedown', function()
{
console.log('touched marker');
*//* trafficTabPanel.layout.setActiveItem(1, {type: 'slide', direction: 'left'});
LoadIncidentMap(this.id.substring(16));*//*
});
*/
/* google.maps.event.addListener(trafficMap, "click", function (e) {
console.log('click');
//lat and lng is available in e object
// var latLng = e.latLng;
});*/
var addMarker = google.maps.event.addListener(trafficMap, 'click', function(e) {
var lat = e.latLng.lat(); // lat of clicked point
var lng = e.latLng.lng(); // lng of clicked point
var markerId = getMarkerUniqueId(lat, lng); // an that will be used to cache this marker in markers object.
var marker = new google.maps.Marker({
position: getLatLng(lat, lng),
map: map,
id: 'marker_' + markerId
});
console.log(lat+ " "+ lng);
// markers[markerId] = marker; // cache marker in markers object
// bindMarkerEvents(marker); // bind right click event to marker
});
addMarker;
console.log('clickaa');
//win.show();
},
addMapListener:function() {
console.log("A1");
var trafficMap = Ext.getCmp('gmapForm');
google.maps.event.addListener(trafficMap, 'click', function(e) {
console.log("A3");
var lat = e.latLng.lat(); // lat of clicked point
var lng = e.latLng.lng(); // lng of clicked point
var markerId = getMarkerUniqueId(lat, lng); // an that will be used to cache this marker in markers object.
var marker = new google.maps.Marker({
position: getLatLng(lat, lng),
map: map,
id: 'marker_' + markerId
});
console.log(lat+" "+lng);
// markers[markerId] = marker; // cache marker in markers object
// bindMarkerEvents(marker); // bind right click event to marker
});
console.log("A22");
var map;
// map = new google.maps.Map($('#map')[0], myOptions);
/* var myOptions = {
zoom: 7,
center: new google.maps.LatLng(46.87916, -3.32910),
mapTypeId: 'roadmap'
};
google.maps.event.addListener(map, 'click', function(e) {
console.log(A2);
var lat = e.latLng.lat(); // lat of clicked point
var lng = e.latLng.lng(); // lng of clicked point
var markerId = getMarkerUniqueId(lat, lng); // an that will be used to cache this marker in markers object.
var marker = new google.maps.Marker({
position: getLatLng(lat, lng),
map: map,
id: 'marker_' + markerId
});
markers[markerId] = marker; // cache marker in markers object
bindMarkerEvents(marker); // bind right click event to marker
});*/
}
});
DOES SOMENONE KNOW HOW TO MAKE THAT BECAUSE I DONT FIND ANYTHING AND TRYING EVERYTHING AND CATCH ERRORS BUT
I only need to add marker where user clicked by mouse on map
解决方案
You have this creating the map and adding an event listener:
var trafficMap = Ext.getCmp('gmapForm');
google.maps.event.addListener(trafficMap, 'click', function(e) {
var lat = e.latLng.lat(); // lat of clicked point
var lng = e.latLng.lng(); // lng of clicked point
var markerId = getMarkerUniqueId(lat, lng); // an that will be used to cache this marker in markers object.
var marker = new google.maps.Marker({
position: getLatLng(lat, lng),
map: map,
id: 'marker_' + markerId
});
});
So you're creating a map and assigning it to a variable called trafficMap. But then your event listener refers to a map variable called simply map, when you add a new marker: map: map
Change that to refer to the trafficMap variable, i.e.
var marker = new google.maps.Marker({
position: getLatLng(lat, lng),
map: trafficMap,
id: 'marker_' + markerId
});
Or even just:
var marker = new google.maps.Marker({
position: getLatLng(lat, lng),
map: this,
id: 'marker_' + markerId
});
这篇关于处理gmappanel extJS中的点击事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
