2017-03-09 102 views
0

我正在学习如何使用Ext.js,所以我真的很新鲜。GMapPanel没有显示标记

我使用Google地图API构建了一个地图,并且我正在尝试将标记添加到特定位置,但标记未显示,并且我的控制台上也没有收到任何错误,我唯一能做的就是看到的是地图本身,我想知道我在这里做错了什么。

我的代码:

Ext.onReady(function() { 
    var w = Ext.create('Ext.window.Window', { 
     height: 400, 
     width: 600, 
     layout: 'fit', 
     header: false, 
     border: false, 
     style: 'padding: 0; border-width: 0;', 
     closable: false, 
     draggable: false, 
     height: Ext.getBody().getViewSize().height, 
     width: Ext.getBody().getViewSize().width, 
     items: [{ 
      xtype: 'gmappanel', 
      region: 'center', 
      cls: 'reset-box-sizing', 
      center: new google.maps.LatLng(53.419824, -3.0509294), 
      mapOptions: { 
       zoom: 16, 
       mapTypeId: google.maps.MapTypeId.ROADMAP 
      } 
     }] 
    }); 

    var options = { 
     lat: 53.419824, 
     lng: -3.0509294, 
     marker: { 
      title: "Hello World!" 
     }, 
     listeners: { 
      click: function (e) { 

      } 
     } 
    }; 

    addLocation(options); 

    function addLocation(options) { 

     var gm = w.down('gmappanel'); 
     var mpoint = new google.maps.LatLng(options.lat, options.lng); 

     var marker = gm.addMarker(mpoint, options.marker, false, false, options.listeners); 


     var infowindow = new google.maps.InfoWindow({ 
      content: "Some label" 
     }); 
     google.maps.event.addListener(marker, 'click', function (gm, marker) { 
      infowindow.open(gm, marker); // if still you can not open than use infowindow.open(gm, this) 
     }); 
    } 

    w.show(); 
}); 

谢谢。

回答

1

尝试创建标记用下面的代码:

var markers = []; 

var mpoint = new google.maps.LatLng(options.lat, options.lng); 

var marker = new google.maps.Marker({ 
    position: mpoint, 
    title: options['marker']['title'] 
}); 

var infowindow = new google.maps.InfoWindow({ 
    content: "Some label" 
}); 

google.maps.event.addListener(marker, 'click', function (gm, marker) { 
    infowindow.open(gm, marker); // if still you can not open than use infowindow.open(gm, this) 
}); 

markers.push(marker); 

gm.markers = markers; 

,甚至更简单

var gm = w.down('gmappanel'); 
var markers = []; 

markers.push(marker); 

gm.markers = markers; 

您可以在这里找到工作实例https://fiddle.sencha.com/#fiddle/1rt5