2014-11-02 104 views
0

其工作正常,但我有一個問題是,當我打開一個信息窗口其打開,但是當我打開其他信息窗口。最後一個信息窗口仍然打開。但我想關閉它,當我們打開新窗口的INF如何關閉信息窗口時,其他信息窗口打開谷歌地圖javascript

  <script> 
       window.onload = getMyLocation; 
       var geocoder; 

       var map; 
       function getMyLocation() { 
       if (navigator.geolocation) { 
        navigator.geolocation.getCurrentPosition(displayLocation); 
        } else { 
          alert("Oops, no geolocation support"); 
          } 
        } 

      //This function is inokved asynchronously by the HTML5 geolocation API. 
        function displayLocation(position) { 
       //The latitude and longitude values obtained from HTML 5 API. 
        var latitude = position.coords.latitude; 
       var longitude = position.coords.longitude; 

       //Creating a new object for using latitude and longitude values with Google map. 
       var latLng = new google.maps.LatLng(latitude, longitude); 


       showMap(latLng); 

       addNearByPlaces(latLng); 
       createMarker(latLng); 

       //Also setting the latitude and longitude values in another div. 
       // var div = document.getElementById("location"); 
       //div.innerHTML = "You are at Latitude: " + latitude + ", Longitude: " +  longitude; 
      } 

       function showMap(latLng) { 
        geocoder = new google.maps.Geocoder(); 

        var markers = []; 
        //Setting up the map options like zoom level, map type. 
       var mapOptions = { 
         center: latLng, 
         zoom: 16, 
         mapTypeId: google.maps.MapTypeId.ROADMAP 
         }; 

       //Creating the Map instance and assigning the HTML div element to render it in. 
       map = new google.maps.Map(document.getElementById("googlemap"), mapOptions); 
      // Create the search box and link it to the UI element. 

       } 

      function addNearByPlaces(latLng) { 

      var nearByService = new google.maps.places.PlacesService(map); 


    var request = { 
    location: latLng, 
     radius: 500, 
     types: ['atm'] 
      }; 

     nearByService.nearbySearch(request, handleNearBySearchResults); 
    } 

     function handleNearBySearchResults(results, status) { 
      if (status == google.maps.places.PlacesServiceStatus.OK) { 
       for (var i = 0; i < results.length; i++) { 
        var place = results[i]; 
       createMarker(place.geometry.location, place); 
       } 
      } 


      function createMarker(latLng, placeResult) { 
       var markerOptions = { 
       position: latLng, 
       map: map, 
       animation: google.maps.Animation.DROP, 
      clickable: true 
      } 
     //Setting up the marker object to mark the location on the map canvas. 
      var marker = new google.maps.Marker(markerOptions); 

     if (placeResult) { 
      var content = "<b>Name : </b>"+placeResult.name+"<br/><b>Address :      </b>"+placeResult.vicinity+"<br/><b>Type : </b>"+placeResult.types+"<br/> Rating : "+placeResult.rating+"<br/>" ; 
     addInfoWindow(marker, latLng, content); 
    } 
     else { 
      var content = "You are here: "; 
       addInfoWindow(marker, latLng, content); 
      } 

     } 

      function codeAddress() { 
     var address = document.getElementById('address').value; 
     geocoder.geocode({ 'address': address}, function(results, status) { 
     if (status == google.maps.GeocoderStatus.OK) { 
      map.setCenter(results[0].geometry.location); 

     var latitude = results[0].geometry.location.lat(); 
     var longitude = results[0].geometry.location.lng(); 
      <!-- alert("Latitude: " + latitude + "\nLongitude: " + longitude); --> 
      var marker = new google.maps.Marker({ 
      map: map, 
      position: results[0].geometry.location 
     }); 
    }  else { 
      alert('Geocode was not successful for the following reason: ' + status); 
     } 


     var latLngs = new google.maps.LatLng(latitude, longitude); 

     addNearByPlaces(latLngs); 
     createMarker(latLngs); 

     }); 

     } 


     function addInfoWindow(marker, latLng, content) { 
     var infoWindowOptions = { 
     content: content, 
     position: latLng 
     }; 

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


     google.maps.event.addListener(marker, 'click', function() { 
      if(!marker.open){ 
       infowindow.open(map,marker); 
       marker.open = true; 
      } 
      else{ 
       infowindow.close(); 
       marker.open = false; 
      } 
     }); 


     } 
     </script> 

回答

0

我使用這樣關閉所有信息窗口:

infoWindows = []; //variable to store all infoWindows 

function createMarker(map, latlng, title, content, icon) { 
    var marker = new google.maps.Marker({ 
     position: latlng, 
     map: map, 
     icon: icon, 
     title: title 
    }); 

    var infoWindow = new google.maps.InfoWindow({ 
     content: content 
    }); 

    infoWindows.push(infoWindow); 

    google.maps.event.addListener(marker, 'click', function() { 
     closeAllInfoWindows(); 
     infoWindow.open(map, marker); 
    }); 
} 

function closeAllInfoWindows() { 
    for (var i=0;i<infoWindows.length;i++) { 
     infoWindows[i].close(); 
    } 
} 
+0

感謝答覆。但它不適合我。同樣的問題 – 2014-11-02 07:39:17

相關問題