繁体   English   中英

在外部div google maps api v3中关闭信息窗口

[英]closing an infowindow in an external div google maps api v3

已更新以显示页面的所有代码和最终解决方案

我正在创建一个Google地图信息窗口,该窗口填充了固定在屏幕右侧的潜水。 我有它,所以一次只打开一个信息窗口,但是我似乎无法关闭该信息窗口。 我将标记和信息窗口内容放入一个数组中。 这是我的代码:

    jQuery( '#infocanvas' ).hide();
    jQuery( '#close-infocanvas' ).hide();
    var map;
    var overlay;
    USGSOverlay.prototype = new google.maps.OverlayView();
    var directionsDisplay;
    var directionsService = new google.maps.DirectionsService();
    directionsVisible = false;
    // Initialize the map and the custom overlay.

    function initialize() {
        directionsDisplay = new google.maps.DirectionsRenderer();

        var styles = [ {
            featureType: "all",
            elementType: "labels",
            stylers: [
                { visibility: "simplified" }
            ]
            },{
            featureType: "poi",
            elementType: "labels",
            stylers: [
                { visibility: "on" }
            ]
            },{
            featureType: "labels.text",
            elementType: "labels",
            stylers: [
                { visibility: "off" }
            ]
            },{
            featureType: "road",
            elementType: "geometry",
            stylers: [
                { lightness: 100 },
                { visibility: "simplified" }
            ]
            },{
            featureType: "road",
            elementType: "labels",
            stylers: [
                { visibility: "o0" }
            ]
        }
    ];
    //  map.controls[google.maps.ControlPosition.TOP_LEFT].push($('<div id="infowindow"/>')[0]);
        var markers = new Array();

        locations = [
            ['Restrooms', 'Restrooms located on the 1st floor of the Student Services Center<br>(SSC)', 'restrooms', 35.188407, -101.847188, 4, "http://www.actx.edu/staff/images/icons/toilets.png"],
            ['Restrooms', 'Restrooms located on the 2nd floor of the Student Services Center<br>(SSC)', 'restrooms', 35.188420, -101.847323, 5, "http://www.actx.edu/staff/images/icons/toilets.png"],
            ['Restrooms', 'Restrooms located on the 2nd floor of the College Union Building<br>(CUB)', 'restrooms', 35.187952, -101.846269, 6, "http://www.actx.edu/staff/images/icons/toilets.png"],
            ['Restrooms', 'Restrooms located on the 1st floor of Ordway Hall<br>(ORD)', 'restrooms', 35.188754, -101.848020, 7, "http://www.actx.edu/staff/images/icons/toilets.png"],
            ['Restrooms', 'Restrooms located on the 1st floor of Ordway Hall<br>(ORD)', 'restrooms', 35.188759, -101.847878, 8, "http://www.actx.edu/staff/images/icons/toilets.png"],
            ['Restrooms', 'Restrooms located on the 1st floor of Dutton Hall<br>(DUTT)', 'restrooms', 35.188903, -101.847750, 9, "http://www.actx.edu/staff/images/icons/toilets.png"],
            ['Restrooms', 'Restrooms located on the 2nd floor of Dutton Hall<br>(DUTT)', 'restrooms', 35.188868, -101.847720, 10, "http://www.actx.edu/staff/images/icons/toilets.png"],
            ['Restrooms', 'Men\'s Restroom located on the 1st and 2nd floors of Durrett Hall<br>(DUR)', 'restrooms', 35.188796, -101.846931, 11, "http://www.actx.edu/staff/images/icons/toilets-men.png"],
            ['Restrooms', 'Women\'s Restroom located on the 1st and 2nd floors of Durrett Hall<br>(DUR)', 'restrooms', 35.188796, -101.846553, 12, "http://www.actx.edu/staff/images/icons/toilets-women.png"],
            ['Parking', 'Parking Lot 6<br />No sticker required', 'parking', 35.188878, -101.843967, 3, "http://www.actx.edu/staff/images/icons/parking.png"],
            ['Parking', 'Parking Lot 9<br />No sticker required', 'parking', 35.187010, -101.845769, 2, "http://www.actx.edu/staff/images/icons/parking.png"],
            ['Parking', 'Parking Lot 10<br />No sticker required', 'parking', 35.186830, -101.847218, 1, "http://www.actx.edu/staff/images/icons/parking.png"],
            ['Parking', 'Parking Lot 1<br />No sticker required', 'parking', 35.190173, -101.847839, 13, "http://www.actx.edu/staff/images/icons/parking.png"],
            ['Parking', 'Parking Lot 2<br />Temporary and ADA parking. No sticker required', 'parking', 35.189050, -101.847571, 14, "http://www.actx.edu/staff/images/icons/parking.png"],
            ['Parking', 'ADA Accessible Parking', 'parking', 35.188969, -101.846949, 15, "http://www.actx.edu/staff/images/icons/parking_disabled.png"],
            ['Parking', 'Parking Lot 3<br />No sticker required', 'parking', 35.189642, -101.846635, 16, "http://www.actx.edu/staff/images/icons/parking.png"],
            ['Parking', 'Parking Lot 4<br />No sticker required', 'parking', 35.189432, -101.845564, 45, "http://www.actx.edu/staff/images/icons/parking.png"],
            ['Parking', 'Parking Lot 5<br />No sticker required', 'parking', 35.188998, -101.845323, 46, "http://www.actx.edu/staff/images/icons/parking.png"],
            ['Parking', 'Parking Lot 8<br />No sticker required', 'parking', 35.188033, -101.845189, 47, "http://www.actx.edu/staff/images/icons/parking.png"],
            ['Parking', 'Parking Lot 7<br />No sticker required', 'parking', 35.188337, -101.844390, 48, "http://www.actx.edu/staff/images/icons/parking.png"],


            ['<h3>Amarillo College - Testing Services</h3>', '<h5>1st Floor of the Student Services Center(SSC-101)</h5><p>The Testing Center is a unit of the Amarillo College Student Affairs Division. The Testing Center supports instruction, academic planning, and the community by providing various testing services for prospective students, current students and members of the community.</p>', 'testing', 35.188297, -101.846933, 40, "http://www.actx.edu/staff/images/icons/ac-sm.png"],
            ['Bookstore', '1st Floor of the College Union Building(CUB)<br />', 'bookstore', 35.187776, -101.846214, 41, "http://www.actx.edu/staff/images/icons/ac-sm.png"],
            ['<h3>Advising and Counseling<h3>', '<h5>1st Floor of the Student Services Center(SSC-130)</h5><p>Amarillo College considers academic advising essential to student success.  The goal of the Advising Department is to help students identify their goals, and to help students achieve those goals.  As a returning, current, or prospective student, it\'s important to build a relationship with an academic advisor.</p>', 'advising', 35.188482, -101.847017, 42, "http://www.actx.edu/staff/images/icons/ac-sm.png"],
            ['Financial Aid', '2nd Floor of the Student Services Center(SSC-210)<br />', 'financial', 35.188379, -101.847163, 43, "http://www.actx.edu/staff/images/icons/ac-sm.png"],
            ['Registrar', '1st Floor of the Student Services Center(SSC)<br />', 'registrar', 35.188364, -101.847523, 44, "http://www.actx.edu/staff/images/icons/ac-sm.png"],


            ['<h4>Lynn Library</h4>', '<div class="container-fluid"><div class="row"><div class="col-md-12"><div class="carousel slide" id="carousel-433230"><ol class="carousel-indicators"><li class="active" data-slide-to="0" data-target="#carousel-433230"></li><li data-slide-to="1" data-target="#carousel-433230"></li><li data-slide-to="2" data-target="#carousel-433230"></li></ol><div class="carousel-inner"><div class="item active"><img alt="Carousel Bootstrap First" src="http://lorempixel.com/output/sports-q-c-1600-500-1.jpg"/><div class="carousel-caption"><h4>First Thumbnail label</h4><p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p></div></div><div class="item"><img alt="Carousel Bootstrap Second" src="http://lorempixel.com/output/sports-q-c-1600-500-2.jpg"/><div class="carousel-caption"><h4>Second Thumbnail label</h4><p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p></div></div><div class="item"><img alt="Carousel Bootstrap Third" src="http://lorempixel.com/output/sports-q-c-1600-500-3.jpg"/><div class="carousel-caption"><h4>Third Thumbnail label</h4><p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p></div></div></div><a class="left carousel-control" href="#carousel-433230" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a> <a class="right carousel-control" href="#carousel-433230" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a></div></div></div></div><p>Lynn Library and the <a href="https://www.actx.edu/library/pagesmith/21" target="_blank">Student Computing Center</a> are located on the 4th floor of the Lynn Library building. They provide extensive resources and services for AC students and employees.</p><ul><li><strong>Research classes:</strong> Lynn Library has numerous online research databases that cover a wide range of topics. Library instructors teach information literacy/database demo classes when requested by faculty. For more information, contact <a href="mailto:e0400185@actx.edu">Emily Gilbert</a> via email or phone at <a href="tel:806-371-5403">806-371-5403</a>.</li></ul><ul> <li><strong>Individual research help:</strong> Librarians and other trained staff work individually with students to find appropriate resources for assignments. Library instructors also work with faculty and staff who want to learn more about using the Library&rsquo;s resources effectively. Instruction can be customized by discipline. Call <a href="tel:806-371-5468">806-371-5468</a> or toll-free at <a href="https://www.actx.edu/library/866-371-5468">866-371-5468</a> for more information.</li></ul><ul><li><strong><a href="https://www.actx.edu/library/pagesmith/21" target="_blank">Student Computing Center</a>: </strong>Employees are available to help students with computer matters. Printing is available at 5 cents per page. Two-sided printing is available for documents that allow it. Wi-Fi is available for people affiliated with AC.</li></ul><ul> <li><strong>Study areas: </strong>The 4th floor has many study tables and two group computer collaboration stations.</li></ul>', 'buildings', 35.187797, -101.847094, 17, "http://www.actx.edu/staff/images/icons/ac.png"],
            ['Ordway Hall', '', 'buildings', 35.188526, -101.847976, 18, "http://www.actx.edu/staff/images/icons/ac.png"],
            ['Dutton Hall', '', 'buildings', 35.188832, -101.847606, 19, "http://www.actx.edu/staff/images/icons/ac.png"],
            ['Engineering Building', '', 'buildings', 35.188526, -101.846436, 20, "http://www.actx.edu/staff/images/icons/ac.png"],
            ['Durrett Hall', '', 'buildings', 35.188832, -101.846723, 21, "http://www.actx.edu/staff/images/icons/ac.png"],
            ['Russell Hall', '', 'buildings', 35.187797, -101.848011, 22, "http://www.actx.edu/staff/images/icons/ac.png"],
            ['Student Services Center', '', 'buildings', 35.188362, -101.847142, 23, "http://www.actx.edu/staff/images/icons/ac.png"],
            ['College Union Building', '', 'buildings', 35.187797, -101.846366, 24, "http://www.actx.edu/staff/images/icons/ac.png"],
            ['Experimental Theatre', '', 'buildings', 35.188536, -101.845950, 25, "http://www.actx.edu/staff/images/icons/ac.png"],
            ['Concert Hall/Theater', '', 'buildings', 35.188699, -101.845603, 26, "http://www.actx.edu/staff/images/icons/ac.png"],
            ['Music Building', '', 'buildings', 35.188427, -101.845423, 27, "http://www.actx.edu/staff/images/icons/ac.png"],
            ['Amarillo Museum of Art', '', 'buildings', 35.188572, -101.845091, 28, "http://www.actx.edu/staff/images/icons/ac.png"],
            ['Warren Hall', '', 'buildings', 35.187884, -101.845795, 29, "http://www.actx.edu/staff/images/icons/ac.png"],
            ['Parcells Hall', '', 'buildings', 35.187008, -101.846520, 30, "http://www.actx.edu/staff/images/icons/ac.png"],
            ['R.E. Byrd Business Building', '', 'buildings', 35.187129, -101.847129, 31, "http://www.actx.edu/staff/images/icons/ac.png"],
            ['Carter Fitness Center', '', 'buildings', 35.186944, -101.848002, 32, "http://www.actx.edu/staff/images/icons/ac.png"],
            ['Gilvin Broadcast Center', '', 'buildings', 35.186668, -101.846512, 33, "http://www.actx.edu/staff/images/icons/ac.png"],
            ['Science Lab Building', '', 'buildings', 35.187711, -101.845347, 34, "http://www.actx.edu/staff/images/icons/ac.png"],
            ['Amarillo Bible Chair', '', 'buildings', 35.186381, -101.845816, 35, "http://www.actx.edu/staff/images/icons/ac.png"],
            ['Bible Chair of the Southwest', '', 'buildings', 35.189461, -101.846817, 36, "http://www.actx.edu/staff/images/icons/ac.png"],
            ['Baptist Bible Chair', '', 'buildings', 35.189613, -101.844177, 37, "http://www.actx.edu/staff/images/icons/ac.png"],
            ['Amarillo Opera', '', 'buildings', 35.187619, -101.844515, 38, "http://www.actx.edu/staff/images/icons/ac.png"],
            ['Science Lab Building', '', 'buildings', 35.187711, -101.845347, 39, "http://www.actx.edu/staff/images/icons/ac.png"],
            ['Facilities Management Center', '', 'buildings', 35.191598, -101.848251, 40, "http://www.actx.edu/staff/images/icons/ac.png"]



            ];
        buildings = [

                    ['Lynn Library', '', 'buildings', '35.187797, -101.847094', 17, "http://www.actx.edu/staff/images/icons/ac.png"],
                    ['Ordway Hall', '', 'buildings', '35.188526, -101.847976', 18, "http://www.actx.edu/staff/images/icons/ac.png"],
                    ['Dutton Hall', '', 'buildings', '35.188832, -101.847606', 19, "http://www.actx.edu/staff/images/icons/ac.png"],
                    ['Engineering Building', '', 'buildings', '35.188526, -101.846436', 20, "http://www.actx.edu/staff/images/icons/ac.png"],
                    ['Durrett Hall', '', 'buildings', '35.188832, -101.846723', 21, "http://www.actx.edu/staff/images/icons/ac.png"],
                    ['Russell Hall', '', 'buildings', '35.187797, -101.848011', 22, "http://www.actx.edu/staff/images/icons/ac.png"],
                    ['Student Services Center', '', 'buildings', '35.188362, -101.847142', 23, "http://www.actx.edu/staff/images/icons/ac.png"],
                    ['College Union Building', '', 'buildings', '35.187797, -101.846366', 24, "http://www.actx.edu/staff/images/icons/ac.png"],
                    ['Experimental Theatre', '', 'buildings', '35.188536, -101.845950', 25, "http://www.actx.edu/staff/images/icons/ac.png"],
                    ['Concert Hall/Theater', '', 'buildings', '35.188699, -101.845603', 26, "http://www.actx.edu/staff/images/icons/ac.png"],
                    ['Music Building', '', 'buildings', '35.188427, -101.845423', 27, "http://www.actx.edu/staff/images/icons/ac.png"],
                    ['Amarillo Museum of Art', '', 'buildings', '35.188572, -101.845091', 28, "http://www.actx.edu/staff/images/icons/ac.png"],
                    ['Warren Hall', '', 'buildings', '35.187884, -101.845795', 29, "http://www.actx.edu/staff/images/icons/ac.png"],
                    ['Parcells Hall', '', 'buildings', '35.187008, -101.846520', 30, "http://www.actx.edu/staff/images/icons/ac.png"],
                    ['R.E. Byrd Business Building', '', 'buildings', '35.187129, -101.847129', 31, "http://www.actx.edu/staff/images/icons/ac.png"],
                    ['Carter Fitness Center', '', 'buildings', '35.186944, -101.848002', 32, "http://www.actx.edu/staff/images/icons/ac.png"],
                    ['Gilvin Broadcast Center', '', 'buildings', '35.186668, -101.846512', 33, "http://www.actx.edu/staff/images/icons/ac.png"],
                    ['Science Lab Building', '', 'buildings', '35.187711, -101.845347', 34, "http://www.actx.edu/staff/images/icons/ac.png"],
                    ['Amarillo Bible Chair', '', 'buildings', '35.186381, -101.845816', 35, "http://www.actx.edu/staff/images/icons/ac.png"],
                    ['Bible Chair of the Southwest', '', 'buildings', '35.189461, -101.846817', 36, "http://www.actx.edu/staff/images/icons/ac.png"],
                    ['Baptist Bible Chair', '', 'buildings', '35.189613, -101.844177', 37, "http://www.actx.edu/staff/images/icons/ac.png"],
                    ['Amarillo Opera', '', 'buildings', '35.187619, -101.844515', 38, "http://www.actx.edu/staff/images/icons/ac.png"],
                    ['Science Lab Building', '', 'buildings', '35.187711, -101.845347', 39, "http://www.actx.edu/staff/images/icons/ac.png"],
                    ['Facilities Management Center', '', 'buildings', '35.191598, -101.848251', 40, "http://www.actx.edu/staff/images/icons/ac.png"]


                    ];
        var minZoomLevel = 18;  
        var styledMap = new google.maps.StyledMapType(styles,
                    {name: "Styled Map"});
        var mapOptions = {
            zoom: 18,
            minZoom: 7,
            maxZoom: 21,
            tilt:0,
            center: new google.maps.LatLng(35.188435, -101.845448),
            mapTypeControlOptions: {
              mapTypeIds: [google.maps.MapTypeId.ROADS, 'map_style']
            }
        };
      map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

      directionsDisplay.setMap(map);
      directionsDisplay.setPanel(document.getElementById('directions-panel'));
      directionsDisplay.setOptions({suppressInfoWindows: true});


    // geolocation stuff  


      if(navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function(position) {
              pos = new google.maps.LatLng(position.coords.latitude,
                                               position.coords.longitude);        


            }, function() {
              handleNoGeolocation(true);
            });
          } else {
            // Browser doesn't support Geolocation
            handleNoGeolocation(false);
          }

      map.mapTypes.set('map_style', styledMap);
      map.setMapTypeId('map_style');

      var swBound = new google.maps.LatLng(35.186065, -101.848535);
      var neBound = new google.maps.LatLng(35.191990, -101.843090);
      var bounds = new google.maps.LatLngBounds(swBound, neBound);


      var srcImage = 'https://www.actx.edu/staff/images/Washington-Campus-New_trans9.png';
    //  srcImage += 'examples/full/images/talkeetna.png';

      // The custom USGSOverlay object contains the USGS image,
      // the bounds of the image, and a reference to the map.
      overlay = new USGSOverlay(bounds, srcImage, map);

      infocanvas = new google.maps.InfoWindow();



      var marker, i;

for (i = 0; i < locations.length; i++) {  
      marker = new google.maps.Marker({
      position: new google.maps.LatLng(locations[i][3], locations[i][4]),
      map: map,
      store_id: locations[i][5],
      icon: locations[i][6]
          });
google.maps.event.addListener(marker, 'click', (function (marker, i) {
    return function () {
        map.panTo(marker.getPosition());
        jQuery( '#close-infocanvas' ).css('visibility','visible');      
        jQuery( '#infocanvas' ).css('visibility','visible');
        jQuery( '#infocanvas' ).show();
        jQuery( '#close-infocanvas' ).show();   
        jQuery( '#infocanvas' ).empty();
        jQuery( '#infocanvas' ).append( locations[i][0]+"<br />"+locations[i][1] );
  }
})(marker, i));
markers.push(marker);       
  }

var closeInfocanvasX = document.getElementById('close-infocanvas-x');
google.maps.event.addDomListener(closeInfocanvasX, 'click', closeInfocanvas);

function closeInfocanvas() {
    jQuery( '#infocanvas' ).hide();
    jQuery( '#close-infocanvas' ).hide(); 
}

            // == shows all markers of a particular category, and ensures the checkbox is checked ==
              function show(category) {
                for (var i=0; i<locations.length; i++) {
                  if (locations[i][2] == category) {
                    markers[i].setVisible(true);
                  }
                }
              }

              // == hides all markers of a particular category, and ensures the checkbox is cleared ==
              function hide(category) {
                for (var i=0; i<locations.length; i++) {
                  if (locations[i][2] == category) {
                    markers[i].setVisible(false);
                  }
                }
              }

              // == show or hide the categories initially ==
             hide("parking");
             hide("restrooms");
             hide("testing");
             hide("bookstore");
             hide("advising");
             hide("financial");
             hide("registrar");
             hide("buildings");




                $(".checkbox").click(function(){
                    var cat = $(this).attr("value");

                    // If checked
                    if ($(this).is(":checked"))
                    {
                        show(cat);
                    }
                    else
                    {
                        hide(cat);
                    }
                  });

    }

    function calcRoute() {

        var mode;
        switch (document.getElementById("mode").value) {
          case "bicycling":
            mode = google.maps.TravelMode.BICYCLING;
            break;
          case "driving":
            mode = google.maps.TravelMode.DRIVING;
            break;
          case "walking":
            mode = google.maps.TravelMode.WALKING;
            break;
        }

          var start = pos;
          var end = document.getElementById('end').value;
          var request = {
            origin: pos,
            destination: end,
            travelMode: mode

          };
          directionsService.route(request, function(response, status) {
            if (status == google.maps.DirectionsStatus.OK) {
              directionsDisplay.setDirections(response);
            }
          });
        }




    function handleNoGeolocation(errorFlag) {
          if (errorFlag) {
            var content = 'Error: The Geolocation service failed.';
          } else {
            var content = 'Error: Your browser doesn\'t support geolocation.';
          }

          var options = {
            map: map,
            position: new google.maps.LatLng(35.188435, -101.845448),
            content: content
          };

          var infocanvas = new google.maps.InfoWindow(options);
          map.setCenter(options.position);
        }

    // [END region_initialization]

    // [START region_constructor]
    /** @constructor */
    function USGSOverlay(bounds, image, map) {

      // Initialize all properties.
      this.bounds_ = bounds;
      this.image_ = image;
      this.map_ = map;

      // Define a property to hold the image's div. We'll
      // actually create this div upon receipt of the onAdd()
      // method so we'll leave it null for now.
      this.div_ = null;

      // Explicitly call setMap on this overlay.
      this.setMap(map);
    }
    // [END region_constructor]

    // [START region_attachment]
    /**
     * onAdd is called when the map's panes are ready and the overlay has been
     * added to the map.
     */
    USGSOverlay.prototype.onAdd = function() {

      var div = document.createElement('div');
      div.style.borderStyle = 'none';
      div.style.borderWidth = '0px';
      div.style.position = 'absolute';

      // Create the img element and attach it to the div.
      var img = document.createElement('img');
      img.src = this.image_;
      img.style.width = '100%';
      img.style.height = '100%';
      img.style.position = 'absolute';
      div.appendChild(img);

      this.div_ = div;

      // Add the element to the "overlayLayer" pane.
      var panes = this.getPanes();
      panes.overlayLayer.appendChild(div);
    };
    // [END region_attachment]

    // [START region_drawing]
    USGSOverlay.prototype.draw = function() {

      // We use the south-west and north-east
      // coordinates of the overlay to peg it to the correct position and size.
      // To do this, we need to retrieve the projection from the overlay.
      var overlayProjection = this.getProjection();

      // Retrieve the south-west and north-east coordinates of this overlay
      // in LatLngs and convert them to pixel coordinates.
      // We'll use these coordinates to resize the div.
      var sw = overlayProjection.fromLatLngToDivPixel(this.bounds_.getSouthWest());
      var ne = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast());

      // Resize the image's div to fit the indicated dimensions.
      var div = this.div_;
      div.style.left = sw.x + 'px';
      div.style.top = ne.y + 'px';
      div.style.width = (ne.x - sw.x) + 'px';
      div.style.height = (sw.y - ne.y) + 'px';
    };
    // [END region_drawing]

    // [START region_removal]
    // The onRemove() method will be called automatically from the API if
    // we ever set the overlay's map property to 'null'.
    USGSOverlay.prototype.onRemove = function() {
      this.div_.parentNode.removeChild(this.div_);
      this.div_ = null;
    };
    // [END region_removal]

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

这是相关的html:

<div id="close-infocanvas" class="col-xs-12 col-sm-3">
<div id="close-infocanvas-x"><a href="#" class="show_hide"><i class="fa fa-angle-double-up fa-2x"></i></a></div></div>
<div id="infocanvas" class="col-xs-12 col-sm-3">

我认为信息窗口有些混乱。 您定义了一个名为“ infocanvas”的新信息窗口,但是随后您想要关闭名为“ infowindow”的信息窗口。 实际上,您正在使用简单的DIV。

在事件侦听器“映射,单击”中,只需像在代码顶部一样隐藏DIV信息画布即可:

google.maps.event.addListener(map, "click", function(event) {    
    jQuery( '#infocanvas' ).hide();
    jQuery( '#close-infocanvas' ).hide();
});

还有一件事,var map应该不在initialize函数之外。 只要:

 var map;

然后在函数“初始化”中定义此变量的值

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

没有单词“ var”。

因此,变量“ map”将在代码的任何部分可用。 此时,第343行中的代码无法访问变量“地图”。

“ var标记”也应该不在初始化函数中,并且您必须创建特定的函数才能将标记添加到地图。

必须通过将代码细分为更小的函数来最小化“初始化”函数的总结。 这样,您可以组织代码,并且更容易检测错误。

您将在带有多个标记的地图中找到有关此信息的更多信息。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM