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”，function（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 google-map我在这里编写代码。

Webix谷歌地图弹出窗口

1 个答案: