Enabling and Disabling large amounts of markers in Google Maps API V3

问题

I have a program that will have a couple thousand markers on it. Performance isn't the issue here, but organizing the markers so they make sense is what I am going for. I was thinking about making a few check boxes and for example, turning group 1 which has 500 markers on and off and leave group 2 on which has say 200. I have not, however, in my research been able to figure out a viable method for this.

I found this example: http://www.geocodezip.com/v2_MarkerCheckBoxesNoXml.asp.

However, if you look at the code for it markers are created like this:

var point = new GLatLng(43.545068,-89.994888);
var marker = createMarker(point, '<div id="infowindow" style="white-space: nowrap;">
church of god<br>1225 n dewey ave<br>Reedsburg, WI<br><a 
href=http://>  </a></div>','purple');

Which is a lot of code for a single marker.

I would prefer it to be something like this:

var yellowMarkers = new [[39.9406864, -77.8082025],   
[33.4482117, -112.0709371],[42.922825, -85.6523916],[40.331837, -79.3783739]];

for (var i = 0; i < yellowMarkers.length; i++) {
var place = locations[i];
var myLatLng = new google.maps.LatLng(place[1], place[2]);
var marker = new google.maps.Marker({
    position: myLatLng,
    map: map,
    // icon: image,
    shape: shape,
    title: place[0],
    zIndex: place[3]
});}

I am new to javascript so if this is a dumb question just send me the right way... but is there a way to organize markers like you would from that example using sets of arrays instead of creating every marker individually?

回答1:

You need to create an array for each markers group and push each marker to the correct array. Once this is done, you can easily toggle the visibility (or add/remove from the map) for each group of markers.

For example, if I take your code with yellowMarkers:

var yellowMarkers = [[39.9406864, -77.8082025], [33.4482117, -112.0709371], [42.922825, -85.6523916], [40.331837, -79.3783739]];

// Create an empty array to hold your yellow markers
var yellowMarkersArray = [];

for (var i = 0; i < yellowMarkers.length; i++) {

    var place = locations[i];
    var myLatLng = new google.maps.LatLng(place[1], place[2]);
    var marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        shape: shape,
        title: place[0],
        zIndex: place[3]
    });

    // Push each yellow marker to the corresponding array
    yellowMarkersArray.push(marker);
}

Then in another function to hide your yellow markers:

for (var i=0; i<yellowMarkersArray.length; i++) {

    yellowMarkersArray[i].setVisible(false);
}

or if you want to remove them from the map:

for (var i=0; i<yellowMarkersArray.length; i++) {

    yellowMarkersArray[i].setMap(null);
}

and of course if you want to add them back, either use setVisible(true) if you used the first method, or setMap(map) (map being your map object).

for (var i=0; i<yellowMarkersArray.length; i++) {

    yellowMarkersArray[i].setMap(map);
}

Hope this helps!

回答2:

Okay so I finished it all up... here it is if anyone ever wants it. Also, is this an absolutely horrible way to do this? Just wondering since I don't have much of a clue still when it comes to proper practices with JavaScript.(also it doesn't look too pretty right now just because of how I made the map)

JavaScript

<script type="text/javascript">

        function initialize() {

            var mapOptions = {
                zoom: 4,
                center: new google.maps.LatLng(40.866711, -101.465781)
            }
            var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
            setContactMarkers(map, redMarkers);
            setWorkerCompMarkers(map, yellowMarkers);
        }
        var redMarkers = [[39.9406864, -77.8082025],[33.4482117, -112.0709371],[42.922825, -85.6523916]];
        var yellowMarkers = [[40.331837, -79.3783739],[40.0090366, -75.7031451],[40.4750889, -79.833905]];
        var yellowMarkersArray = [];
        var redMarkersArray = [];

        function setContactMarkers(map, locations) {
            var shape = {
                coords: [1, 1, 1, 20, 18, 20, 18 , 1],
                type: 'poly'
            };
            // Create an empty array to hold your red markers
            for (var i = 0; i < redMarkers.length; i++) {

                var place = locations[i];
                var myLatLng = new google.maps.LatLng(place[0], place[1]);
                var marker = new google.maps.Marker({
                    position: myLatLng,
                    map: map,
                    shape: shape
                });

                // Push each red marker to the array
                redMarkersArray.push(marker);
            }
        }
        function setWorkerCompMarkers(map, locations) {
            var shape = {
                coords: [1, 1, 1, 20, 18, 20, 18 , 1],
                type: 'poly'
            };
            // Create an empty array to hold your yellow markers
            for (var i = 0; i < yellowMarkers.length; i++) {

                var place = locations[i];
                var myLatLng = new google.maps.LatLng(place[0], place[1]);
                var marker = new google.maps.Marker({
                    position: myLatLng,
                    map: map,
                    shape: shape,
                    icon: "http://labs.google.com/ridefinder/images/mm_20_yellow.png"
                });

                // Push each yellow marker to the array
                yellowMarkersArray.push(marker);
            }
        }

        function yellowMarkersSwitch(color){
            // map.closeInfoWindow();
            if (document.getElementById(color).checked==false) { // hide the marker
                for (var i=0; i<yellowMarkersArray.length; i++) {
                    yellowMarkersArray[i].setVisible(false);
                }
            }
            else { // show the marker again
                for (var i=0; i<yellowMarkersArray.length; i++) {
                    yellowMarkersArray[i].setVisible(true);
                }
            }
        }
        function redMarkersSwitch(color){
            // map.closeInfoWindow();
            if (document.getElementById(color).checked==false) { // hide the marker
                for (var i=0; i<redMarkersArray.length; i++) {
                    redMarkersArray[i].setVisible(false);
                }
            }
            else { // show the marker again
                for (var i=0; i<yellowMarkersArray.length; i++) {
                    redMarkersArray[i].setVisible(true);
                }
            }
        }
        google.maps.event.addDomListener(window, 'load', initialize);
    </script>

HTML

<body>
    <form name="form1" action=""><strong>Toggles</strong><br />
        <img src="http://labs.google.com/ridefinder/images/mm_20_red.png" width="12" height="20" title="Red Markers" alt="Red Marker" /> 
        <input type="checkbox" name="red" id="red" onclick="redMarkersSwitch('red')" checked="checked" /> Red Markers<br />
        <img src="http://labs.google.com/ridefinder/images/mm_20_yellow.png" width="12" height="20" title="Yellow Markers" alt="Yellow Marker" /> 
        <input type="checkbox" name="yellow" id="yellow" onclick="yellowMarkersSwitch('yellow')" checked="checked" /> Yellow Markers<br />
    </form> <br />
</body>

来源：https://stackoverflow.com/questions/29015024/enabling-and-disabling-large-amounts-of-markers-in-google-maps-api-v3