Google Maps API信息窗口中的“方向"按钮的侦听器 [英] Listener for Button in Google Maps API InfoWindow for Directions

问题描述

我正在尝试使用jQuery Mobile，Google Maps API和Google Maps v3的地理位置标记来构建WebApp.我没有太多的js经验，但是我正在尽力而为. 我使用数组中的信息在for循环中创建标记.在Stackoverflow的一点帮助下，我可以实现单击标记并获得指示的方向. 现在，我要你帮助我，因为我只想单击信息窗口中的内部中的按钮，才能获得指示.我曾与另一个听众一起尝试过，但我想我并没有真正了解到这一切.

i'm trying to build a WebApp using jQuery Mobile, the Google Maps API and the Geolocation Marker for Google Maps v3. I don't have much experience with js but i'm trying my best. I create my markers in a for-loop with information from an array. With a little help from Stackoverflow i coul achieve that i click on a marker and get the direction to it. Now i'm asking you to help me because i want to get the directions only when i click on a Button inside an Infowindow. I tried it with another listener, but i think i dont really get what this is all about.

这是我的脚本:

<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>

推荐答案

您需要侦听信息窗口的domready事件. https://developers.google.com/maps/documentation/javascript /reference?csw = 1#InfoWindow

You need to listen for the domready event of the infowindow. https://developers.google.com/maps/documentation/javascript/reference?csw=1#InfoWindow

infoWindow = new google.maps.InfoWindow();

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

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

希望这会有所帮助.

这篇关于Google Maps API信息窗口中的“方向"按钮的侦听器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！