鍍金池/ 問答/HTML5  PHP  HTML/ google api中的addDomListener 如何能綁定列表

google api中的addDomListener 如何能綁定列表

clipboard.png
如何能綁定左側(cè)的列表 單擊后展現(xiàn)圖片

clipboard.png

回答
編輯回答
愛礙唉

通過分析換了一種方法解決

利用BootstrapTable這個onClickRow事件函數(shù) 然后在單獨調(diào)用google map的api

產(chǎn)生點擊循環(huán)列表在map中展現(xiàn)圖片信息

修復(fù)bug $element[0].addEventListener('click',fm);

  function BootstrapTable() {
        $.ajax({
            "type": "get",
            "url": imgJson,
            "async": false,
            "success": function (data) {
                window.res = data.data;
                //console.log(data.data);
                $('#table').bootstrapTable({
                    data: data.data,
                    pagination: true,
                    searchAlign: "right",
                    buttonsAlign: "left",
                    showRefresh: true,
                    searchOnEnterKey: false,
                    singleSelect: true,
                    maintainSelected: false,
                    search: true,
                    pageSize: 10,
                    sortable: false,
                    paginationLoop: true,
                    toolbar: '#toolbar',        // 工具欄ID
                    toolbarAlign: 'right',        // 工具欄對齊方式
                     onClickRow: function (item, $element) {
                        var arr = {};
                        arr.Latitude = parseFloat(item.Latitude);
                        arr.Longitude = parseFloat(item.Longitude);
                        var latLng = new google.maps.LatLng(arr.Latitude, arr.Longitude);
                        var fm = mapLine.markerClickFunction(item, latLng);
                        $element[0].addEventListener('click',fm);
                    },
              
                    columns: [
                        {
                            field: 'id',
                            align: 'center',
                            title: 'id'
                        },
                        {
                            field: 'photo_title',
                            align: 'center',
                            title: 'photo_title'
                        },
                        {
                            field: 'photo_time',
                            align: 'center',
                            title: 'photo_time'
                        }
                    ]

                });
            }
        });
    };
2017年8月23日 12:47