показать маркер из базы данных

-1

следующий java script отобразит маркер в карте google. здесь я добавил Control button to LEFT_BOTTOM. мой выход показывает все Маркер. но мне нужно отфильтровать некоторый маркер из базы данных, когда я нажимаю кнопку Control. Как я должен это делать?показать маркер из базы данных

<style type="text/css"> 
      body { font: normal 10pt Helvetica, Arial; } 
      #map { width: 100%; height: 100%; border: 0px; padding: 0px; } 
    </style> 
    <script src="http://maps.google.com/maps/api/js?v=3&sensor=false" type="text/javascript"></script> 
    <script type="text/javascript"> 
     var icon = new google.maps.MarkerImage("images/icons/icon.png", 
         new google.maps.Size(32, 32), new google.maps.Point(0, 0), 
         new google.maps.Point(16, 32)); 
     var center = null; 
     var map = null; 
     var currentPopup; 
     var bounds = new google.maps.LatLngBounds(); 

     //adding multiple marker 
     function addMarker(lat, lng, info) { 
      var pt = new google.maps.LatLng(lat, lng); 
      bounds.extend(pt); 
      var marker = new google.maps.Marker({ 
       position: pt, 
       icon: icon, 
       map: map}); 
      var popup = new google.maps.InfoWindow({ 
       content: info, 
       maxWidth: 300 }); 
      google.maps.event.addListener(marker, "click", function() { 
       if (currentPopup != null) { 
        currentPopup.close(); 
        currentPopup = null; 
       } 
       popup.open(map, marker); 
       currentPopup = popup;}); 
      google.maps.event.addListener(popup, "closeclick", function() { 
       map.panTo(center); 
       currentPopup = null; 
      }); 
     } 
     function HomeControl(controlDiv, map) { 

      // Set CSS styles for the DIV containing the control 
      // Setting padding to 5 px will offset the control 
      // from the edge of the map 
      controlDiv.style.padding = '5px'; 

      // Set CSS for the control border 
      var controlUI = document.createElement('div'); 
      controlUI.style.backgroundColor = 'white'; 
      controlUI.style.borderStyle = 'solid'; 
      controlUI.style.borderWidth = '2px'; 
      controlUI.style.cursor = 'pointer'; 
      controlUI.style.textAlign = 'center'; 
      controlUI.title = 'Click to Filter'; 
      controlDiv.appendChild(controlUI); 

      // Set CSS for the control interior 
      var controlText = document.createElement('div'); 
      controlText.style.fontFamily = 'Arial,sans-serif'; 
      controlText.style.fontSize = '12px'; 
      controlText.style.paddingLeft = '4px'; 
      controlText.style.paddingRight = '4px'; 
      controlText.innerHTML = '<b>GYM</b>'; 
      controlUI.appendChild(controlText); 

      // Setup the click event listeners: simply set the map to 
      google.maps.event.addDomListener(controlUI, 'click', function() {  

       //need to filter Markers 
       //$query = mysql_query("SELECT * FROM mytable where availability = false"); 


      }); 
     } 
     function initMap() { 
      map = new google.maps.Map(document.getElementById("map"), { 
       center: new google.maps.LatLng(0, 0), 
       zoom: 14, 
       mapTypeId: google.maps.MapTypeId.ROADMAP, 
       mapTypeControl: false, 
       mapTypeControlOptions: { 
        style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR 
       }, 
       navigationControl: true, 
       navigationControlOptions: { 
        style: google.maps.NavigationControlStyle.SMALL}}); 
      <?php 
       $query = mysql_query("SELECT * FROM mytable "); 
       while ($row = mysql_fetch_array($query)){ 
        $regno  = $row['id']; 
        $latitude = $row['latitude']; 
        $longitude = $row['longitude']; 
        echo "addMarker($longitude, $latitude,'<b>$id</b>');"; 
       } 
      ?> 
      center = bounds.getCenter(); 
      map.fitBounds(bounds); 

      var homeControlDiv = document.createElement('div'); 
      var homeControl = new HomeControl(homeControlDiv, map); 
      homeControlDiv.index = 1; 
      map.controls[google.maps.ControlPosition.LEFT_BOTTOM].push(homeControlDiv); 

     } 
    </script> 

---- 
<body onLoad="initMap()" style="margin:0px; border:0px; padding:0px;">

источник

2014-12-01 nirmani Deveraj

'Функция HomeControl' делает кнопку на карте под названием«тренажерный зал»и его событие click работает с событием 'addDomListener'. без 'функции HomeControl' map показать всех создателей. мне нужно загрузить всех создателей при попрошайничестве, и как только я нажимаю кнопку «спортзал», только лица, занимающиеся созданием спортзала, должны отображать. '$ query = mysql_query (« SELECT * FROM mytable »);' будет показывать все и '$ query = mysql_query (" SELECT * FROM mytable where availability = false ");' будет показывать только тренажерный зал. –

При создании маркеров, подтолкнуть их к массиву (нажмите каждый объект маркер).
Нажмем кнопку, прокрутите массив маркеров и вызовите setMap(null) на каждый маркер.
Query снова база данных с фильтрами

Вот некоторые быстрого кода, так что вы получите идею:

// Create an array of markers 
var markers = []; 

// Create your map and all the stuff you need 

// Bind the event listener 
google.maps.event.addDomListener(controlUI, 'click', function() { 

    // First delete all your markers 
    deleteMarkers(); 

    // Query your database again and add each marker as you did in the first place 
}); 

// Function to delete the markers 
function deleteMarkers() { 

    for (var i = 0; i < markers.length; i++) { 

     // Remove each marker from map 
     markers[i].setMap(null); 
    } 
} 

function addMarker() { 

    // Create each marker object 

    var marker = new google.maps.Marker({ 
     map: map, 
     // Your other marker properties here 
    }); 

    // Push new marker to the markers array 
    markers.push(marker); 
}

источник

2014-12-01 16:25:39 MrUpsidown

well.nice идея я проверю и дам вам знать –

показать маркер из базы данных

ответ

Смежные вопросы