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您可以向标记添加点击事件，并在用户点击标记时执行某些操作:)