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

clipboard.png
如何能绑定左侧的列表 单击后展现图片

clipboard.png

阅读 1.8k
1 个回答

通过分析换了一种方法解决

利用BootstrapTable这个onClickRow事件函数 然后在单独调用google map的api

产生点击循环列表在map中展现图片信息

修复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'
                        }
                    ]

                });
            }
        });
    };
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题