繪製兩個標記

之間路由我在學習如何使用Ext.js開發Web應用程序，和我使用谷歌地圖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：沒有地圖的實例」

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

謝謝。

來源

2017-03-09 J. Doe

你有什麼沒到目前爲止（嘗試）？ – Thevs

我更新了答案，我真的是新手，昨天我開始學習有關ext.js組件，所以我一直在尋找一些代碼來適應，但似乎沒有任何工作。 –

這意味着變量'w'（窗口）尚未創建。你的第二個代碼片段在哪裏？ – Thevs

折線的setMap方法有要求一個參數 - 一個谷歌地圖的一個實例。（Google Maps JS API）

折線的代碼是好的，但是當你呼叫setMap你傳遞變量w，我以爲是你的ExtJS的窗口，當你需要將它傳遞的實際谷歌地圖實例。這可以通過使用gmappanel類的gmap屬性來訪問。爲了讓從您的窗口gmappanel類，你可以通過做gmappanel = w.down('gmappanel')使用down方法（ExtJS API），或者你可以得到它，因爲你知道這是該窗口包含通過做gmappanel = w.items.first()的唯一項目;

然後，你可以做gmap = gmappanel.gmap獲得實際的谷歌地圖的實例。

因此，在你的第二個代碼塊，只需更換與此的最後一行：

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

來源

2017-03-09 21:24:07 zeke

繪製兩個標記

回答

相關問題