Javascript ASP.NET MVC 3和谷歌地图API

我正在将谷歌地图整合到我正在构建的应用程序中。加载应用程序时，它会在地图画布上显示Sql server数据库中的位置列表。但是，也有一个要求，即应用程序应该能够在地图上显示一个位置，用户在提供的文本框中键入位置名称，当文本框被清除时，整个位置应该在地图上重新显示。搜索将使用ajax执行

我已经创建了一个控制器来进行搜索，但我不确定的是如何使用javascript进行ajax调用并在地图上显示返回的位置

任何线索或有用的指针都会非常有用

---

我将ASP.NET MVC 3和C#用于后端开发。

两周前，我已经编写了一个应用程序作为概念证明。您可以在不使用ajax或纯javascript的情况下实现这一点。您只需要了解一点谷歌地图、阵列以及可选的地图和过滤器

这将适用于多达几百个标记。如果你需要处理成千上万的问题，你必须让它充满活力，但是你也可以使用这个答案中的技巧来实现这一点。唯一的区别是，与在呈现时放置在页面上的静态数组（

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>

var映射，
标记=[]，
数据=[
{
id:1，
plaats：“Nieuwe Markt 100 Gouda”，
地理：“52.0130174,4.7110039”
},
{
id:2，
普拉茨：“赫普斯特拉特3高达”，
地理：“52.0138912,4.7082084”
},
{
id:3，
普拉茨：“范伯根IJzendoornpark 7 Gouda”，
地理：“52.0141417,4.7002510”
},
{
id:4，
普拉茨：“斯诺伊斯特拉特4高达”，
地理：“52.0090531,4.7015962”
}
];
//初始化谷歌地图
函数initMap（）{
var map=new google.maps.map（document.getElementById（'map'），{}）；
var bounds=new google.maps.LatLngBounds（）；
//用户在过滤器文本框中键入内容
document.getElementById（'filtertextbox'）。onkeyup=（函数（）{
setTimeout（函数（）{
var filtervalue=document.getElementById（'filtertextbox'）.value；
//有什么要过滤的吗？
if（filtervalue.length==0）{
//显示所有标记
对于（var i=0；i

让我们浏览一下代码：

创建一个javascript数组，其中包含您想要使用的位置，并将其放在页面的变量中。（您可以为此使用一个JSON序列化程序）。您似乎不想创建一个动态页面，因此可以使用静态结果集。数组中的项目应包括len/lat或地址，具体取决于您在地图上的放置方式（Google Maps仅支持这两种方法）以及您希望能够过滤的任何可选数据

创建一个空数组来容纳你的谷歌地图持有者；在数组中循环并创建google.map.marker对象（这将自动在地图上显示它们），将这些对象放入数组中，以便以后可以处理它们

为过滤器文本框创建一个按键事件。在事件内部放置一个

setTimeOut（function（）{…}，0）

函数（确保在从元素检索时具有文本框的实际内容），在存储标记数组上创建一个foreach循环，如果您选择的属性包含（使用

String.prototype.includes（）

）正在键入的内容，使该标记可见（将

.map

属性设置为映射，或使用

marker.setVisible（true）

。启动事件