顯示/隱藏基於屬性jQuery-UI-Map（Google maps API V3）的標記

我一直在使用jQuery-UI-Map插件（http://code.google.com/p/jquery-ui-map/）開發一個映射程序。我有一個問題，我試圖以許多不同的方式解決無濟於事。顯示/隱藏基於屬性jQuery-UI-Map（Google maps API V3）的標記

我有一個下拉，onchange應過濾地圖上的標記。

以下是有關此問題的代碼片段。有了這段代碼，當我從下拉列表中選擇一個值時，所有的標記都被刪除了。

$('#map').gmap().bind('init', function (evt, map) { 
    $.getJSON('controllers/markers.json', function (data) { 
     $.each(data.markers, function (i, marker) { 
      $('#map').gmap('addMarker', { 
       'position': new google.maps.LatLng(marker.latitude, marker.longitude), 
       'icon': "https://chart.googleapis.com/chart?chst=d_bubble_text_small&chld=bb|" + marker.projectNumber + "|004162|FFFFFF|", 
       'bounds': false, 
       'statusSelect': marker.status 
      }) 
     }); 
     $("#statusSelect").change(function() { 
      $('#map').gmap('find', 'markers', { 
       'property': 'statusSelect', 
       'value': $(this).val() 
      }, 

      function (marker, found) { 
       if (found) { 
        $('#map').gmap('addBounds', marker.position); 
       } 
       marker.setVisible(found); 
      }); 
     }); 
    }); 
});

這裏是我使用的JSON：

http://designsbymitch.com/markers.json

編輯：這裏是地位的HTML下拉 -

<select id="statusSelect"> 
     <option value="Created">Created</option> 
     <option value="Working">Working</option> 
     <option value="Complete">Complete</option> 
     <option value="Task">Task</option> 
     <option value="Void">Void</option> 
     <option value="delete">delete</option> 
     <option value="Paid">Paid</option> 
     <option value="Overdue">Overdue</option> 
     <option value="Invoiced">Invoiced</option> 
     <option value="Non-Billable Expense">Non-Billable Expense</option> 
     <option value="Billable Expense">Billable Expense</option> 
     <option value="Unpaid">Unpaid</option> 
     <option value="new status mitch">new status mitch</option> 
     <option value="new status mitch again">new status mitch again</option> 
</select>

來源

2012-11-17 mitch

的問題似乎是，當您撥打addMarker時，您正在設置一個名爲statusSelect的自定義屬性，然後在您c時尋找名爲tags的屬性全部爲find。將property: 'tags'更改爲property: 'statusSelect'，它應該可以工作。

當你綁定你的事件時，你也會做一些奇怪的事情 - 每當你創建一個標記時，你將綁定一個新的change事件，所以如果你有100個標記，你將有100個change事件監聽器，所有的火都依次發生，並且做同樣的事情。您應該在$.each函數之外移動$("#statusSelect").change(...)，因此只有一個事件處理程序被綁定。

所以，你的代碼應該閱讀：

$('#map').gmap().bind('init', function (evt, map) { 
    $.getJSON('controllers/markers.json', function (data) { 
     $.each(data.markers, function (i, marker) { 
      $('#map').gmap('addMarker', { 
       'position': new google.maps.LatLng(marker.latitude, marker.longitude), 
       'icon': "https://chart.googleapis.com/chart?chst=d_bubble_text_small&chld=bb|" + marker.projectNumber + "|004162|FFFFFF|", 
       'bounds': false, 
       'statusSelect': marker.status 
      }) 
     }); 
     $("#statusSelect").change(function() { 
      $('#map').gmap('find', 'markers', { 
       'property': 'statusSelect', 
       'value': $(this).val() 
      }, 

      function (marker, found) { 
       if (found) { 
        $('#map').gmap('addBounds', marker.position); 
       } 
       marker.setVisible(found); 
      }); 
     }); 
    }); 
});

來源

2012-11-17 03:28:11 Kelvin

非常抱歉...我嘗試了很多東西，忘記將屬性字段更改回參考。我用相同的結果嘗試了你的代碼。 – mitch

您是否試過jQuery UI Map的['addMarker']（http://code.google.com/p/jquery-ui-map/wiki/Examples#Example_addMarker）和['findMarker']（http：// code。 google.com/p/jquery-ui-map/wiki/Examples#Example_findMarker）方法？ – Kelvin

剛剛嘗試過，仍然沒有雪茄。 – mitch

這是一個常見的問題，並在UI可能的錯誤，你設置的屬性號碼，你應該讓一個字符串替換標記。狀態由「」+ marker.status 和在你的發現同樣的事情！

來源

2013-09-25 20:16:21

顯示/隱藏基於屬性jQuery-UI-Map（Google maps API V3）的標記

回答

相關問題