Question

我的javascript代码出现问题。它以前工作过。 Normaly当我点击我的表格中的href时，我在我的谷歌地图（gmap_canvas）中得到de class'coords'的坐标。它因某种原因停止了工作。也许我做错了什么，但我不知道是什么！另外，我在控制台中获取了无法读取未定义的属性“__e3_”。有人知道这是什么吗？

在这里你会找到html和javascript。

<div class="card">
<div class="header">
    <h4 class="title">SUEZbox</h4>
</div>
<div class="content table-responsive table-full-width">
    <table class="table table-hover table-striped">
        <thead>
            <th>Box</th>
            <th>User</th>
            <th>Country</th>
            <th>Location</th>
            <th style="display: none">Coordinates</th>
            <th>View</th>
        </thead>
        <tbody>
            <tr>
                <td><b><?php echo $box['suezbox_naam']; ?></b></td>
                <td>
                    <?php echo $box['user']; ?>
                </td>
                <td>
                    <?php echo $box['naam']; ?>
                </td>
                <td>
                    <?php echo $box['location']; ?>
                </td>
                <td class="coords" style="display: none"><?php echo $box['coordinates'];?></td>
                <td><a href="javascript:void(0)">View Location On Map</a></td>
            </tr>

        </tbody>
    </table>
</div>

javascript

<script type='text/javascript'>
        var infowindow = new google.maps.InfoWindow();
        var markers = [];

        function init_map() {
            var myOptions = {
                zoom: 14
                , center: new google.maps.LatLng(50.934547, 4.412453)
                , mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            map = new google.maps.Map(document.getElementById('gmap_canvas'), myOptions);

            $('table tr').each(function (idx, item) {
                var coordsStr = $(this).find(".coords").html();
                console.log(coordsStr);
                if (!coordsStr) return;
                createMarker($(this));
            });
            $('.click').click(function (evt) {
                var coordsStr = $(this).parents().find(".coords").html();
                console.log(coordsStr);
                coords = coordsStr.split(",");
                var point = new google.maps.LatLng(coords[0], coords[1]);
                map.setCenter(point);
                google.maps.event.trigger(markers[coordsStr], 'click');
            });
            google.maps.event.trigger(markers["52.939347, 4.754741"], 'click')
        }

        function createMarker(jqe) {
            var coordsStr = $(jqe).find(".coords").html();
            console.log(coordsStr);
            coords = coordsStr.split(",");
            var point = new google.maps.LatLng(coords[0], coords[1]);
            var marker = new google.maps.Marker({
                map: map
                , position: point
            });
            var content = jqe.find("td").eq(0).html(); + '<br>'
            var content1 = '<strong></strong><br>' + jqe.find("td").eq(2).html(); + '<br>'
            google.maps.event.addListener(marker, 'click', function () {
                infowindow.setContent(content + content1);
                infowindow.open(map, marker);
            });
            markers[coordsStr] = marker;
        }
        google.maps.event.addDomListener(window, 'load', init_map);
    </script>

Answer 1

语法错误：

var myOptions = {
                zoom: 14
                , center: new google.maps.LatLng(50.934547, 4.412453)
                , mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            map = new google.maps.Map(document.getElementById('gmap_canvas'), myOptions);

            $('table tr').each(function (idx, item) {
                var coordsStr = $(this).find(".coords").html();
                console.log(coordsStr);
                if (!coordsStr) return;
                createMarker($(this));
            });
            $('a').click(function (evt) {
                var coordsStr = $(this).parents().find(".coords").html();
                console.log(coordsStr);
                coords = coordsStr.split(",");
                var point = new google.maps.LatLng(coords[0], coords[1]);
                map.setCenter(point);
                google.maps.event.trigger(markers[coordsStr], 'click');
            });
            google.maps.event.trigger(markers["52.939347, 4.754741"], 'click');


        function createMarker(jqe) {
            var coordsStr = $(jqe).find(".coords").html();
            console.log(coordsStr);
            coords = coordsStr.split(",");
            var point = new google.maps.LatLng(coords[0], coords[1]);
            var marker = new google.maps.Marker({
                map: map
                , position: point
            });
            var content = jqe.find("td").eq(0).html(); + '<br>'
            var content1 = '<strong></strong><br>' + jqe.find("td").eq(2).html(); + '<br>'
            google.maps.event.addListener(marker, 'click', function () {
                infowindow.setContent(content + content1);
                infowindow.open(map, marker);
            });
            markers[coordsStr] = marker;
        }
        google.maps.event.addDomListener(window, 'load', init_map);

Answer 2

我已经多次看到错误“Uncaught TypeError：无法读取未定义的属性'_e3'”。通常，它是尝试在不存在的DOM元素上设置事件侦听器。

我建议在尝试触发点击之前检查元素是否存在。类似的东西：

if(markers["52.939347, 4.754741"]) { google.maps.event.trigger(markers["52.939347, 4.754741"], 'click'); }

谷歌地图错误：无法读取未定义的属性“__e3_”

2 个答案: