Question

我正在学习如何使用Ext.js开发Web应用程序，我正在使用Google Maps API在我的页面中显示地图。

我为两个不同的位置添加了两个标记，我想在这两个标记之间画一条折线，我该怎么做？

我的代码：

<html>

<head>
    <link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css">
    <script type="text/javascript" src="../extjs/ext-all.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?v=3&key=AIzaSyCV2QUPhqKB67SnuoQLO573e5N2yIaQiwQ"></script>

    <script type="text/javascript" src="http://docs.sencha.com/extjs/4.2.0/extjs-build/examples/ux/GMapPanel.js"></script>

</head>

<body></body>

<script type="text/javascript">

    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(51.50733,-0.1977981),
                markers: [{
                    lat: 51.50733,
                    lng: -0.1977981,
                    marker:  {title: 'Location 1'},
                    listeners: {
                        click: function(e){
                            Ext.Msg.alert('Its fine', 'and its art.');
                        }
                    }
                },{
                    lat: 53.4083509,
                    lng: -3.0616123,
                    marker: {title: 'Location 2'}
                }],
                mapOptions: {
                    zoom: 16,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                }
            }]
        });

        w.show();

    });
</script>

</html>

我一直在寻找一些代码，我发现这个代码绘制了一条折线，但它说“InvalidValueError：setMap：not map of map”

var flightPathCoordinates = [
    {lat: 37.772, lng: -122.214},
    {lat: 21.291, lng: -157.821},
    {lat: -18.142, lng: 178.431},
    {lat: -27.467, lng: 153.027}
];

var flightPath = new google.maps.Polyline({
    path: flightPathCoordinates,
    strokeColor: '#FF0000',
    strokeOpacity: 1.0,
    strokeWeight: 2
});

flightPath.setMap(w);

谢谢。

Answer 1

Polyline的setMap方法有一个必需的参数 - 谷歌地图的一个实例。（Google Maps JS API）

您的折线代码很好，但是当您调用setMap时，您需要传递变量w，我认为这是您的ExtJS窗口，当您需要将其传递给实际的Google地图实例时。可以使用gmap类的gmappanel属性访问它。要从您的窗口访问gmappanel课程，您可以通过down使用gmappanel = w.down('gmappanel')方法（ExtJS API），或者您可以获取它，因为您知道它是唯一的窗口包含的项目gmappanel = w.items.first();

然后您可以gmap = gmappanel.gmap来获取实际的Google地图实例。

所以在你的第二个代码块中，只需用最后一行代替：

flightPath.setMap(w.down('gmappanel').gmap);

绘制两个标记之间的路线

1 个答案: