ASP.NET MVC 3和谷歌地圖API

Question

我將谷歌地圖合併到我正在構建的應用程序中。當應用程序加載時，它會在地圖畫布上顯示來自Sql服務器數據庫的位置列表。但是，還有一個要求是，應用程序應該能夠在地圖上顯示一個或多個位置，因爲用戶在提供的文本框中輸入位置名稱，並且當文本框被清除時，然後應該在地圖上重新顯示整個位置。搜索將使用ajax執行。

我已經創建了一個控制器來做搜索，但我不知道如何使ajax調用並顯示使用JavaScript在地圖上返回的位置。

任何線索或有用的指針都會非常有幫助。

我正在使用ASP.NET MVC 3和C＃作爲後端開發。

Answer 1

我已經寫了一個應用程序作爲兩週前的概念證明。你可以做到這一點，沒有Ajax或敲開純JavaScript。您只需要瞭解一下Google地圖，陣列以及可選的地圖和過濾器。

這將工作多達幾百個標記。如果您需要處理數千個問題，您必須使其成爲動態的，但您也可以使用此答案中的技巧來實現這一點。唯一的區別是，您不是在渲染頁面上放置的靜態數組（data），而是使用ajax檢索數組，並可以選擇執行篩選服務器端。取決於您收到的潛在答案的大小。

<script> 
    var map, 
     markers = [], 
     data = [ 
      { 
       id: 1, 
       plaats: "Nieuwe Markt 100 Gouda", 
       geo: "52.0130174,4.7110039" 
      }, 
      { 
       id: 2, 
       plaats: "Herpstraat 3 Gouda", 
       geo: "52.0138912,4.7082084" 
      }, 
      { 
       id: 3, 
       plaats: "Van Bergen IJzendoornpark 7 Gouda", 
       geo: "52.0141417,4.7002510" 
      }, 
      { 
       id: 4, 
       plaats: "Snoystraat 4 Gouda", 
       geo: "52.0090531,4.7015962" 
      } 
     ]; 

    // Initialise Google Map 
    function initMap() { 

     var map = new google.maps.Map(document.getElementById('map'), {}); 
     var bounds = new google.maps.LatLngBounds(); 

     // User types something in filter textbox 
     document.getElementById('filtertextbox').onkeyup = (function() { 
      setTimeout(function() { 
       var filtervalue = document.getElementById('filtertextbox').value; 

       // Anything to filter? 
       if (filtervalue.length == 0) { 
        // Show all markers 
        for (var i = 0; i < markers.length; i++) { 
         markers[i].setMap(map); 
        } 
       } else { 
        // Hide all markers 
        for (var i = 0; i < markers.length; i++) { 
         markers[i].setMap(null); 
        } 
        // Filter data array 
        data.map(function (b) { 
         if (b.plaats.toLowerCase().includes(filtervalue.toLowerCase())) { 
          // Show this marker 
          for (var i = 0; i < markers.length; i++) { 
           if (markers[i].id == b.id) { 
            markers[i].setMap(map); 
           } 
          } 
         } 
        }); 
       } 
      }, 0); 
     }); 

     // Adds a marker to the map 
     // Uses the DROP animation to drop them one after the other 
     function createMarker(dataitem, timeout) { 
      window.setTimeout(function() { 
       var l = dataitem.geo.split(','); 
       var latlng = new google.maps.LatLng(parseFloat(l[0]), parseFloat(l[1])); 
       var marker = new google.maps.Marker({ 
        position: latlng, 
        map: map, 
        animation: google.maps.Animation.DROP, 
        id: dataitem.id 
       }); 
       markers.push(marker); 
      }, timeout); 
     } 

     // Limit the visible area to just the markers that we have 
     for (var i = 0; i < data.length; i++) { 
      var l = data[i].geo.split(','); 
      bounds.extend(new google.maps.) 
      bounds.extend(new google.maps.LatLng(parseFloat(l[0]), parseFloat(l[1]))); 
     } 
     map.fitBounds(bounds); 

     // Drop the markers onto the map 
     for (var i = 0; i < data.length; i++) { 
      createMarker(data[i], i * 100); 
     } 
    } 
</script> 
<script src="https://maps.googleapis.com/maps/api/js?key=[YOUR API KEY]&callback=initMap" async defer> 

讓我們通過代碼：

創建的，你要提供，並在變量拖放此頁面上的一個地方的JavaScript數組。 （您可以使用其中的一個JSON序列化程序）。您似乎不想製作動態頁面，因此可以使用靜態結果集。數組中的項目應包含len/lat或地址，具體取決於您在地圖上放置它們的方式（Google Maps僅支持這兩種方法）以及您希望能夠過濾的任何可選數據。

創建一個空陣列來容納你的Google Map持有者;循環訪問數組並創建google.map.marker對象（這會自動在地圖上顯示它們），將這些對象放在數組中，以便稍後您可以對它們進行操作。

對於您的過濾器文本框，請創建一個按鍵事件。在事件內部放置一個setTimeOut(function(){ ... },0)函數（以確保在從元素中檢索時具有文本框的實際內容），在存儲的標記數組上創建一個foreach循環，並且如果您選擇的屬性包含（使用String.prototype.includes()）正在鍵入，做出標記可見（無論是設置.map屬性地圖，或使用marker.setVisible(true)。你有隱藏所有標記啓動事件，如果文本框爲空，使一切可見。

作爲獎勵，你可以將地圖限制爲只顯示標記所在的區域fitBounds您可以向標記添加點擊事件，並在用戶點擊標記時執行某些操作:)