Webix Google 弹出窗口中的地图

Question

我试图在 Webix 的 window 弹出窗口中获取带有标记的 Google 地图实例，但出现 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();


    });

好吧，那就是promise函数的问题了。首先你应该获取地图对象，然后使用 'then' 函数你可以使用它。如果有人需要 google-map with webix，我会在此处编写代码。

Webix Google 弹出窗口中的地图

Webix Google Maps in a pop-up

javascript

google-maps

webix