GMapPanel没有显示标记

时间:2017-03-09 00:24:40

标签: extjs google-maps-api-3 extjs4

我正在学习如何使用Ext.js,所以我真的是新手。

我使用Google Maps 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 个答案:

答案 0 :(得分: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

找到工作示例