如何在不重新加载地图的情况下过滤标记

Question

我有一张显示来自 MySQL 数据库的信息的地图。我修改了 initmap() 函数以对其进行过滤。但是，每次过滤标记时，地图都会重新加载，我希望在不重新加载地图的情况下过滤它们。

我认为一个解决方案是将创建地图的函数与生成标记的函数分开。但是我做不到。

感谢您的帮助！

<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <style>
        #map {
            height: 75%;
        }

        /* Optional: Makes the sample page fill the window. */
        html,
        body {
            height: 100%;
            margin: 0;
            padding: 0;
        }
    </style>
</head>

<html>

<body>
    <div id="map"></div>
    <input onkeyup="initMap('input', null);table('input')" id="input" type="text" name="valueToSearch">

            <script>


                function initMap(ElemId, rowId) {
                    var map = new google.maps.Map(document.getElementById('map'), {
                        center: new google.maps.LatLng(48.8566, 2.3522),
                        zoom: 12
                    });
                    var filter = "";
                    var table = "";
                    var tablefilter = "";

                    var infoWindow = new google.maps.InfoWindow;

                    function parseToHTML(string) {
                        string = string.replace(/&quot;/g, "\"");
                        string = string.replace(/&#39;/g, "\'");
                        string = string.replace(/&lt;/g, "<");
                        string = string.replace(/&gt;/g, ">");
                        string = string.replace(/&amp;/g, "&");
                        string = string.replace(/&uml;/g, "ö");
                        return (string);
                    }





                    // Change this depending on the name of your PHP or XML file
                    downloadUrl('../xml.php', function(data) {
                        var xml = data.responseXML;
                        var markers = xml.documentElement.getElementsByTagName('marker');
                        Array.prototype.forEach.call(markers, function(markerElem) {
                            var id = markerElem.getAttribute('id');
                            var name = markerElem.getAttribute('name');
                            name = parseToHTML(name);
                            var address = markerElem.getAttribute('address');
                            var type = markerElem.getAttribute('type');
                            var architect1 = markerElem.getAttribute('architect1');
                            var architect2 = markerElem.getAttribute('architect2');
                            var architect3 = markerElem.getAttribute('architect3');
                            var buildingEnd = markerElem.getAttribute('building_end');
                            var street = markerElem.getAttribute('street');
                            var postcode = markerElem.getAttribute('postcode');
                            var city = markerElem.getAttribute('city');

                            var point = new google.maps.LatLng(
                                parseFloat(markerElem.getAttribute('lat')),
                                parseFloat(markerElem.getAttribute('lng')));

                            var infowincontent = document.createElement('div');
                            var strong = document.createElement('strong');
                            strong.textContent = name
                            infowincontent.appendChild(strong);
                            infowincontent.appendChild(document.createElement('br'));

                            var text = document.createElement('text');
                            text.textContent = address + ' ' + name;
                            infowincontent.appendChild(text);
                            var icon = customLabel[type] || {};

                            var marker = new google.maps.Marker({
                                map: map,
                                position: point,
                                label: icon.label,
                                title: name,

                            });
                            if (rowId != null) {
                                var rowIndex = document.getElementById(rowId).id;
                                console.log(rowIndex);
                                if (rowIndex == id) {
                                    infoWindow.setContent(infowincontent);
                                    infoWindow.open(map, marker);
                                }
                            }

                            if (ElemId != null) {
                                var input = document.getElementById(ElemId);
                                var filter = input.value.toUpperCase();
                                filter = filter.normalize("NFD").replace(/[\u0300-\u036f]/g, "");

                                function escaping(strData) {
                                    strData = strData.toUpperCase();
                                    strData = strData.normalize("NFD").replace(/[\u0300-\u036f]/g, "");
                                    return strData;
                                }
                                var nameFilter = escaping(name);
                                var archiFilter = escaping(architect1);
                                var archi2Filter = escaping(architect2);
                                var archi3Filter = escaping(architect3);
                                var typeFilter = escaping(type);
                                var buildingEndFilter = escaping(buildingEnd);
                                var streetFilter = escaping(street);
                                var postcodeFilter = escaping(postcode);
                                var cityFilter = escaping(city);

                                var testName = nameFilter.includes(filter);
                                var testArchi1 = archiFilter.includes(filter);
                                var testArchi2 = archi2Filter.includes(filter);
                                var testArchi3 = archi3Filter.includes(filter);
                                var testType = typeFilter.includes(filter);
                                var testBuildingEndFilter = buildingEndFilter.includes(filter);
                                var testStreet = streetFilter.includes(filter);
                                var testPostcode = postcodeFilter.includes(filter);
                                var testCity = cityFilter.includes(filter);

                                if (
                                    testName == true ||
                                    testArchi1 == true ||
                                    testArchi2 == true ||
                                    testArchi3 == true ||
                                    testType == true ||
                                    testBuildingEndFilter == true ||
                                    testStreet == true ||
                                    testPostcode == true ||
                                    testCity == true


                                ) {
                                    marker.setVisible(true);
                                } else {
                                    marker.setVisible(false);
                                }

                            }

                            marker.addListener('click', function() {
                                infoWindow.setContent(infowincontent);
                                infoWindow.open(map, marker);

                            });
                        });

                    });
                };

                function downloadUrl(url, callback) {
                    var request = window.ActiveXObject ?
                        new ActiveXObject('Microsoft.XMLHTTP') :
                        new XMLHttpRequest;

                    request.onreadystatechange = function() {
                        if (request.readyState == 4) {
                            request.onreadystatechange = doNothing;
                            callback(request, request.status);
                        }
                    };

                    request.open('GET', url, true);
                    request.send(null);
                }

                function doNothing() {}
            </script>

            <script async defer src="https://maps.googleapis.com/maps/api/js?key=APIKEY">
            </script>
</body>
</html>

Answer 1

每次在输入字段中键入内容时都会重新加载地图。为避免这种情况，您可以使用两个不同的函数，initMap 用于在页面刷新/地图 API 加载时创建地图，initInput 用于修改地图、添加或过滤标记等，当文本输入改变时。查看以下代码以获取指导：

<input onkeyup="initInput('input', null);table('input')" id="input" type="text" name="valueToSearch">

<script>
  var map;

  function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
      center: new google.maps.LatLng(48.8566, 2.3522),
      zoom: 12
    });
  }

  function initInput(ElemId, rowId) {
    var filter = "";
    var table = "";
    var tablefilter = "";
    ...
  }
</script>

<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap">

希望对您有所帮助！

如何在不重新加载地图的情况下过滤标记

How to filter markers without reloading the map

html

javascript

google-maps

google-maps-api-3

google-maps-markers