Webix彈出Google Maps Google地圖

Question

我試圖在Webix的彈出窗口中使用標記來獲取Google Maps實例，但我得到的錯誤是initMap is not a function。有一種在Webix中初始化Google地圖的直接方式，但此時標記對象無法識別。這裏是我的代碼：

$$("showMapButton").attachEvent("onItemClick", function (id, e) { 
     if (!$$("mapwin")) 
     webix.ui({ 
      view: "window", 
      adjust: true, 
      id: "mapwin", 
      position: "center", 
      move: true, 
      width: 600, 
      height: 600, 
      //top: 100, left: 50, 
      position: "center", 
      head: { 
       view: "toolbar", 

       elements: [ 
         { view: "label", label: "OpenStreet Map", align: 'left' }, 
        { 
         view: 'button', label: 'Close', width: 70, click: function() { 
          $$("mapwin").hide(); 
         } 
        } 
       ] 
      }, 
      body: { 
       width: 300, 
       height: 300, 
       template: "<div id='mapBody'> </div>" 
       }, 

     }); 


     // google.maps.event.addDomListener(window, "load", initMap); 



     function initMap() { 
      var uluru = { lat: 32, lng: 32 }; 
      var map = new google.maps.Map(document.getElementById('mapBody'), { 
       zoom: 4, 
       center: uluru 
      }); 
      var marker = new google.maps.Marker({ 
       position: uluru, 
       map: map 
      }); 
     } 


     $$("mapwin").show(); 
    }); 

我總能聽到一些幫助...提前感謝！

Answer 1

$$（ 「showMapButton」）的attachEvent（ 「onItemClick」 功能（ID，E）{

 //create a window if it is does not exist 
     if (!$$("mapwin")) 
      webix.ui({ 
       view: "window", 
       id: "mapwin", 
       position: "center", 
       move: true, 
       width: 600, 
       height: 600, 
       head: { 
        view: "toolbar", 
        elements: [ 
        { 
         id:"mapClose", view: 'button', label: 'Close', width: 120, click: function() { 
          //hide windows (.close() will destroy) 

          $$("map").getMap(true).then(function (map) { 
           marker.setMap(null); 
           map.setOptions({ styles: [] }); 
          }); 

          $$("mapwin").hide(); 

         } 
        }, 

         { 
          align:"right", id:"setStyleButton", view: 'button', label: 'Koyu Tema', width: 120, click: function() { 
           $$("map").getMap(true).then(function (map) { 



           }); 
          } 
         } 

        ] 
       }, 
       body: { 
        view: "google-map", 
        id: "map", 
        key: "AIzaSyBzviXHLV5cRdCOatv5oBatf5EGJ019npQ", 
        zoom: 9 

       }, 

      }); 

     $$("map").getMap(true).then(function (map) { 
      var myLatlng = new google.maps.LatLng(latitude, longtitude); 
      map.setCenter(myLatlng); 



      marker = new google.maps.Marker({ 
       position: myLatlng, 
       map: map, 
       title: 'Hello World!', 
       //icon: 'https://maps.google.com/mapfiles/kml/shapes/parking_lot_maps.png' 
      }); 
      var infowindow = new google.maps.InfoWindow({ 
       content: 'Latitude: ' + myLatlng.lat() + 
       '<br>Longitude: ' + myLatlng.lng() 
      }); 

      var str = 'Araç: ' + myLatlng.lat() + '<br>Enlem: ' + myLatlng.lat() + '<br>Boylam: ' + myLatlng.lng() + '<br>Konum: ' + location; 


      infowindow.setContent(str); 
      marker.addListener('click', function() { 
      infowindow.open(map, marker); 
      }); 

      // infowindow.open(map, marker); 
     }); 
     $$("mapwin").show(); 


    }); 

那麼好吧，這只是一個承諾函數的問題。首先，你應該獲取地圖對象，然後用'then'函數就可以使用它。如果有人需要使用webix的谷歌地圖，我在這裏寫代碼。