ASP.NET MVC 3和Google Maps API

Question

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

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

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

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

Answer 1

两周前，我已经写了一个应用程序作为概念证明。 您可以在普通javascript中无需使用ajax或Knockout来执行此操作。 您只需要对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 Maps仅支持这两种方法）以及要过滤的任何可选数据。

创建一个空数组来容纳您的Google Map持有者； 遍历数组并创建google.map.marker对象（这会自动在地图上显示它们），然后将这些对象放入数组中，以便您以后可以对它们进行处理。

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

另外，您可以将地图限制为只显示带有fitBounds标记所在的区域。 您可以将click事件添加到标记，并在用户单击标记时执行某些操作。 :)