ASP.NET MVC 3 和谷歌地图 API

Question

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

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

任何线索或有用的指示都会非常有帮助。

我正在使用 ASP.NET MVC 3 和 C# 进行后端开发。

Answer 1

两周前，我编写了一个应用程序作为概念验证。你可以在没有 ajax 或 Knockout 的普通 javascript 中做到这一点。您只需要了解一点 Google 地图、数组以及可选的地图和过滤器知识。

这最多可用于数百个标记。如果您需要处理数千个问题，则必须使其动态化，但您也可以使用此答案中的技术来实现这一目标。唯一的区别是，您可以使用 ajax 检索该数组，并且可以选择在服务器端进行过滤，而不是在呈现时放置在页面上的静态数组 (data)。取决于您收到的潜在答案的大小。

<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 地图仅支持这两种方法）以及您希望能够过滤的任何可选数据。

创建一个空数组来保存您的 Google 地图支架；循环遍历数组并创建 google.map.marker 对象（这将自动在地图上显示它们），将这些对象放入数组中，以便您以后可以使用它们。

为您的过滤器文本框创建一个按键事件。在事件中放置一个setTimeOut(function(){ ... },0) 函数（以确保在从元素中检索时具有文本框的实际内容），在存储的标记数组上创建一个 foreach 循环，如果您选择的属性包含（使用 @ 987654324@) 正在键入的内容，使该标记可见（将.map 属性设置为地图，或使用marker.setVisible(true)。您以隐藏所有标记开始事件。如果文本框为空，则使所有内容可见。

作为奖励，您可以使用fitBounds 将地图限制为仅显示您的标记所在的区域。您可以向标记添加单击事件，并在用户单击标记时执行某些操作。 :)