ASP.NET MVC 3 and Google Maps API

本文关键字：Google Maps API and NET MVC ASP | 更新日期: 2023-09-27 18:26:10

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

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

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

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

ASP.NET MVC 3 and Google Maps API

两周前，我已经为此编写了一个应用程序作为概念验证。您可以在没有ajax或Knockout的情况下使用纯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>

让我们浏览一下代码：

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

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

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

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

相关文章：