的JavaScript

Question

我有一个程序，上面会有几千个标记。性能不是问题，但组织标记使它们有意义就是我想要的。我正在考虑制作一些复选框，例如，转换组1，其中有500个标记打开和关闭，并留下组2，其中有200个。但是，我没有在我的研究中找到一个可行的方法对此。

我找到了这个例子：http://www.geocodezip.com/v2_MarkerCheckBoxesNoXml.asp。

但是，如果您查看代码，则标记的创建方式如下：

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');

单个标记的代码很多。

我希望它是这样的：

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]
});}

我是javascript的新手，所以如果这是一个愚蠢的问题，请发送给我正确的方法...但是有没有办法像使用数组一样组织标记，而不是单独创建每个标记？ / p>

Answer 1

您需要为每个标记组创建一个数组，并将每个标记推送到正确的数组。完成此操作后，您可以轻松切换每组标记的可见性（或从地图中添加/删除）。

例如，如果我使用yellowMarkers代码：

var yellowMarkers = new[[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);
}

然后在另一个隐藏黄色标记的功能中：

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

    yellowMarkersArray[i].setVisible(false);
}

或者如果您想从地图中删除它们：

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

    yellowMarkersArray[i].setMap(null);
}

当然，如果您想要添加它们，请使用setVisible(true)（如果您使用第一种方法）或setMap(map)（地图是地图对象）。

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

    yellowMarkersArray[i].setMap(map);
}

希望这有帮助！

Answer 2

好的，所以我把它完成了......在这里，如果有人想要的话。此外，这是一个绝对可怕的方式吗？只是想知道，因为我对JavaScript的正确实践还没有太多线索。（现在看起来并不是因为我制作地图的方式太漂亮了）

的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>

在Google Maps API V3中启用和禁用大量标记

2 个答案:

的JavaScript

HTML