javascript - Google Maps API InfoWindow 中按钮的监听器以获取方向

Question

我正在尝试使用 jQuery Mobile、Google map API 和 Google map v3 的地理位置标记构建一个 Web 应用程序。我对 js 没有太多经验，但我正在尽力。 我使用数组中的信息在 for 循环中创建标记。在 Stackoverflow 的帮助下，我可以点击一个标记并获得指向它的方向。 现在我请求您帮助我，因为我只想在单击信息窗口内部按钮时获取方向。我和另一位听众一起尝试过，但我想我并没有真正明白这是什么意思。

这是我的脚本:

<script type="text/javascript" charset="UTF-8">
    var ren = null;
    var GeoMarker = null;

    $(document).on('pageshow', '#index',function(e,data){ 

        $('#content').height(getRealContentHeight());
        // This is the minimum zoom level that we'll allow
        var locations = [
        ['Museum Wäschefabrik', 52.0212250, 8.5421740,'Hallo hier stehen 1,2 Sätze'],
        ['Ravensberger Spinnerei', 52.02232686250015, 8.543352720870985, 'cooles Gebäude'],
        ['Mädchenwohnheim für Spinnerinnen', 52.0205700, 8.5437000, 'Heute IBZ'],
        ['Mechanische Weberei', 52.0204100, 8.5434700, 'heute Real,-'],
        ['A. Meyer-Sternberg', 52.0195950, 8.5388760, 'Kontor der Plüschfabrik'],
        ['Goldmann & Hirschfeld', 52.0189650, 8.5384830, 'Leinen- und Wäschegeschäft (1893)'],
        ['Gebr. Weiß', 52.0187390, 8.5380260, 'Leinen- und Wäschefabrik, 1940 noch genannt Julius „Israel“ Weiß'],
        ['C.A. Delius & Söhne', 52.0204570, 8.5357790, 'Leinen- u. Baumwollweberei, Leinen- und Plüsch, Kontor, Fabrik und Lagerräume'],
        ['Leineweber-Denkmal', 52.0213880, 8.5335790, 'Das Leineweber-Denkmal von 1520'],
        ['Lueder & Kisker / A. W. Kisker', 52.0224350, 8.5303490, '1974 wurde die Firma A. W. Kisker eingestellt'],
        ['Herrmann Woermann', 52.0208880, 8.5292260, 'Leinenhandel']
        ];

        var minZoomLevel = 16;
        var myLatlng = new google.maps.LatLng(52.0212250,8.5421740);

        var map = new google.maps.Map(document.getElementById('map_canvas'), {
            zoom: minZoomLevel,
            center: new google.maps.LatLng(52.0212250,8.5421740),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });

        var infowindow = new google.maps.InfoWindow();

        var marker, i;

        var GeoMarker = new GeolocationMarker();
        GeoMarker.setCircleOptions({fillColor: '#ABCDEF'});


        google.maps.event.addListener(GeoMarker, 'position_changed', function() {
            map.setCenter(this.getPosition());
            //map.fitBounds(this.getBounds());
        }); 

        google.maps.event.addListener(GeoMarker, 'geolocation_error', function(e) {
            alert('There was an error obtaining your position. Message: ' + e.message);
            }); 

        GeoMarker.setMap(map);


        for (i = 0; i < locations.length; i++) {
            marker = new google.maps.Marker({
                position: new google.maps.LatLng(locations[i][1], locations[i][2]),
                map: map
            });

            google.maps.event.addListener(marker, 'click', (function (marker, i) {
                return function () {
                    infowindow.setContent('<div><h3>' + locations[i][0] + '</h3>' + '<p>' + locations[i][3] + '</p><button id="button" class="ui-btn ui-mini" type="submit">Navigation</button></div>');
                    infowindow.open(map, marker);
                    var navButton = document.getElementById('button');

                google.maps.event.addListener(navButton, 'click', function() {
                    if (ren && ren.getMap()) ren.setMap(null);

                    ren = new google.maps.DirectionsRenderer( {'draggable':false} );
                    ren.setMap(map);
                    ren.setPanel(document.getElementById("directionsPanel"));
                    ser = new google.maps.DirectionsService();

                    ser.route({ 'origin': GeoMarker.getPosition(), 'destination':  marker.getPosition(), 'travelMode': google.maps.DirectionsTravelMode.WALKING},function(res,sts) {
                    if(sts=='OK')ren.setDirections(res);    
                    })
                });
                }
            })(marker, i));

        }   

    });

    if(!navigator.geolocation) {
        alert('Your browser does not support geolocation');
    } 

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

    function getRealContentHeight() {
        var header = $.mobile.activePage.find("div[data-role='header']:visible");
        var footer = $.mobile.activePage.find("div[data-role='footer']:visible");
        var content = $.mobile.activePage.find("div[data-role='content']:visible:visible");
        var viewport_height = $(window).height();

        var content_height = viewport_height - header.outerHeight() - footer.outerHeight();
        if((content.outerHeight() - header.outerHeight() - footer.outerHeight()) <= viewport_height) {
            content_height -= (content.outerHeight() - content.height());
        } 
        return content_height;
    }

</script>

Answer 1

您需要监听信息窗口的domready事件。 https://developers.google.com/maps/documentation/javascript/reference/info-window#InfoWindow.domready

infoWindow = new google.maps.InfoWindow();

google.maps.event.addListener(infoWindow, 'domready', function() {

    // Bind the click event on your button here
});

希望这有帮助。