单击按钮即可刷新Google Maps Markers

Question

有多种方法可以执行此操作，但是没有明确的答案。我要使用以下代码进行的操作是使用“ markerPosition”脚本（来自SQL数据库）中包含的标记刷新地图。标记本身会根据搜索功能进行更新。什么是最好的重新加载地图以考虑到标记位置脚本中包含的更新标记位置的一种方法？希望我在这里很有意义并且希望能提供任何帮助吗？

刷新标记的按钮：

<button id="productbutton" onclick="markerSearcher();"></button>

标记位置脚本：

<script id="mapMarkerPositions">
       var myLatLng = {
            info: '<strong>Example</strong><br>\',
            lat: 52.4,
            lng: -0.2,
            type: 'info',
            label: {
                text: '£00.00',
                fontFamily: "Courier, Arial, Helvetica, sans-serif",
            }
        };

    </script>
    <script id="markerLocations">
        var locations = [
            [myLatLng.info, myLatLng.lat, myLatLng.lng, myLatLng.type, myLatLng.label, 22],
        ];

    </script>

Google Maps脚本：

    <script>
    function initMap() {

        // define marker style
        var icons = {
            icon: {
                path: ' M-240 -70 Q -240 -90 -220 -90 L -20 -90 Q 0 -90 0 -70 L 0 -20 Q 0 0 -20 0 L -220 0 Q -240 0 -240 -20 Z',
                fillColor: '#fff',
                fillOpacity: 1,
                scale: 0.3,
                strokeColor: '#555',
                strokeWeight: 2,
                labelOrigin: new google.maps.Point(-120, -46)
            },
        };


        var map = new google.maps.Map(document.getElementById('map'), {
            maxZoom: 20,
            minZoom: 14,
            zoom: 16,
            mapTypeControl: false,
            streetViewControl: false,
            center: {lat: 51.507388, lng: -0.127734},
            zoomControl: true,
            zoomControlOptions: {
                position: google.maps.ControlPosition.LEFT_BOTTOM,
                style: google.maps.ZoomControlStyle.SMALL
            },
            fullscreenControlOptions: {
                position: google.maps.ControlPosition.RIGHT_BOTTOM
            },
        });

        var infowindow = new google.maps.InfoWindow({})

        var marker, i
        // Create markers.
        for (i = 0; i < locations.length; i++) {
            marker = new google.maps.Marker({
                position: new google.maps.LatLng(locations[i][1], locations[i][2]),
                map: map,
                icon: icons.icon,
                label: locations[i][4]
            })

            google.maps.event.addListener(
                marker,
                'click',
                (function(marker, i) {
                    return function() {
                        infowindow.setContent(locations[i][0])
                        infowindow.open(map, marker)
                    }
                })(marker, i)
            )
        }

        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function(position) {
                initialLocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
                map.setCenter(initialLocation);
            });
        }

    }


</script>

    <script src="https://maps.googleapis.com/maps/api/js?key=MYAPIKEY&callback=initMap"></script>

AJAX调用以更新mapMarkerPositions：

function showMarkers(str) {
        if (str == "") {
            document.getElementById("products").innerHTML = "";
            return;
        }
        if (window.XMLHttpRequest) {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else { // code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                document.getElementById("mapMarkerPositions").innerHTML = this.responseText;
            }
        }
        xmlhttp.open("GET", "markersUpdate.php?s=" + str, true);
        xmlhttp.send();
    }

    function showLocations(str) {
        if (str == "") {
            document.getElementById("products").innerHTML = "";
            return;
        }
        if (window.XMLHttpRequest) {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else { // code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                document.getElementById("markerLocations").innerHTML = this.responseText;
            }
        }
        xmlhttp.open("GET", "locationsUpdate.php?r=" + str, true);
        xmlhttp.send();
    }