javascript - GmapPanel 在点击时添加标记 - EXTJS

Question

function addDoctorLocation(lat,longt) 
    {
      var myLatlng = new google.maps.LatLng(parseFloat(lat), parseFloat(longt));
      var myOptions = {
        zoom: 10,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      }
     //var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

     var marker = new google.maps.Marker({
          position: myLatlng,
          title:"Hello World!"
      });

      // To add the marker to the map, call setMap();
      var map = Ext.getCmp('mygooglemap');
      marker.setMap(map); 
    }

var btn= Ext.getCmp('button');
btn.on('onclick', function(){
            addDoctorLocation(3.951941,102.052002);
    })

mygooglemap 是一个 GMappanel
如何点击按钮，然后 gmappanel 将添加坐标为 3.951941,102.052002 的标记？ 我试过这段代码，但还是不行？

更新

复选框怎么样？

tree.on('checkchange', function(node){
  var data = node.data;
  if (data.checked = true){
     var options = {
       lat:3.951941,
       lng:-102.052002,
       marker: {title:"Hello World!"},
       listeners: {
         click: function(e){
         }
       }     
     }
     addDoctorLocation(options);
  }     
})

map 制作

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
        });
    });

在我检查了 fireBug 之后，错误是:

ReferenceError: GLatLng is not defined
[Break On This Error]   
var mpoint = new GLatLng(options.lat,options.lng);

我已经编辑了如下代码，工作正常

function addDoctorLocation(options) 
{
 var gm = Ext.getCmp('mygooglemap');
 var mpoint = new google.maps.LatLng(options.lat,options.lng);
 gm.addMarker(mpoint,options.marker,false,false, options.listeners);
}

Answer 1

var btn= Ext.getCmp('button');
btn.on('onclick', function(){
  var options = {
    lat:3.951941,
    lng:-102.052002,
    marker: {title:"Hello World!"},
    listeners: {
     click: function(e){

     }
    }                
   }     
   addDoctorLocation(options);
})

function addDoctorLocation(options) 
{

 var gm = Ext.getCmp('mygooglemap');
 var mpoint = new GLatLng(options.lat,options.lng);
 gm.addMarker(mpoint,options.marker,false,false, options.listeners);
}

注意:- 此代码仅添加中心点以外的标记。此时，您应该使用“id:mygooglemap”创建了 map 。查看您的代码，您似乎正在尝试创建新 map ，而不是在现有 map 上添加标记。

您可以随时引用 GMapPanel.js 文件以获取 extjs 包附带的 addMarker 函数。我有旧版本，所以 addMarker 调用是相应的。