Question

在通过Google Maps API v3构建商店列表的后半部分，我在构建侧边栏并应用侦听器移动并打开InfoWindow后遇到此错误：

Uncaught TypeError: Cannot read property '__e3_' of undefined

这是我的javascript：

$(document).ready(function() {

    var map;

    function launchInfoWindow(x) {
        google.maps.event.trigger(gmarkers[x], "click");
    }

    google.maps.event.addDomListener(window, 'load', initialize);

    // if a zipcode is entered
    $('#zipcode').submit(function() {

        // clear the results first
        $('#list-results').empty();

        // find the new results
        geoLocateZip($('#zip').val());
        return false;
    });

});

function initialize() {
    var mapOptions = {
        zoom: 13,
        draggable: true,
        center: new google.maps.LatLng(33.5725815, -112.01186689999997),
    };

    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

    if (navigator.geolocation) {
        function success(pos) {
            userCords = pos.coords;
            getResults(userCords.latitude, userCords.longitude);
        }
        navigator.geolocation.getCurrentPosition(success);
    }
}

function geoLocateZip(zipcode) {
    $.ajax({
        type: 'GET',
        url: 'https://maps.googleapis.com/maps/api/geocode/json',
        dataType: 'json',
        data: {
            address: zipcode
        },
        success: function(data) {
            var lat = data.results[0].geometry.location.lat;
            var lng = data.results[0].geometry.location.lng;
            getResults(lat, lng);
        }
    });
}

function getResults(lat, lng) {
    $.ajax({
        type: 'GET',
        url: 'https://www.arizonalottery.com/FeedService/v1/retaillocations',
        dataType: 'json',
        data: {
            lat: lat,
            lon: lng,
            dist: '250',
            limit: 20
        },
        success: function(data) {

            var endpoints = [];
            for (x in data) {
                endpoints.push(data[x]);
            }

            var bounds = new google.maps.LatLngBounds();
            for (i = 1; i < endpoints.length; i++) {
                markers(endpoints[i], bounds, i);
                var latlng = new google.maps.LatLng(endpoints[i]['latitude'], endpoints[i]['longitude']);
                bounds.extend(latlng);
            }

        }
    });
}

function markers(loc, bounds) {
    var activeInfoWindow;
    var gmarkers = [];
    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(loc.latitude, loc.longitude),
    });

    marker.setMap(map);
    map.fitBounds(bounds);

    // create infoWindow
    var infoWindow = new google.maps.InfoWindow();
    var name = loc.displayName;
    var address = loc.streetAddress;
    var dirLink = 'daddr=' + loc.latitude + ',' + loc.longitude;
    var distance = parseFloat(loc.distance).toFixed(2);

    $('#list-results').append(
        '<li data-id="' + i + '">' +
        '<h2>' + name + '</h2>' +
        '<p>' + address + '</p>' +
        '<p>Distance: ' + distance + ' Miles</p>' +
        '<a href="https://maps.google.com?' + dirLink + '" target="_blank">Get Directions</a>' +
        '</li>'
    );

    infoWindow.setContent(
        '<div class="markerPop">' +
        '<h1>' + name + '</h1>' +
        '<p><span class="address">' + address + '</span>' +
        '<br /><span class="distance">Distance: ' + distance + ' Miles</span></p>' +
        '<p><a href="https://maps.google.com?' + dirLink + '" target="_blank">Get Directions</a></p>' +
        '</div>'
    );

    gmarkers.push(marker);

    marker.addListener('click', function() {
        console.log(marker);
        infoWindow.open(map, marker);
        activeInfoWindow = infoWindow;
    });

    $('#list-results li').on('click', function(event) {
        var myMarker = $(this).attr('data-id');
        google.maps.event.trigger(markers[myMarker], 'click');
    });
}

对此的任何帮助都将非常感激

Answer 1

将您的监听器移动到初始化函数中。

Google Maps v3侧边栏链接

1 个答案: