Question

我已按照Google Maps API v3教程创建基本地图。我想弄清楚如何最初声明地图，然后允许我根据人们选择的“类别”添加点数。我还想弄清楚如何在每个选择之间清除地图。

Answer 1

拥有类别的表单字段。更改会触发一个JS函数，该函数会清除地图中的所有标记，然后为该类别添加一些标记。如果你用你迄今为止尝试过的代码扩展你的问题，我可以扩展这个答案。

要清除标记，请在每个标记上使用marker.setMap(null);（没有可以为您清除所有内容的API函数）。

你可能还想要一个JS数组或类别的关联数组，每个标记的数据（至少是lat / lng值），这将使你的功能变得容易。

好的，这是一个有效的解决方案（为了简洁，我减少了标记的数量等）。

<!DOCTYPE html>
<html>
<head>
<title>http://stackoverflow.com/questions/15550211/populate-clear-google-map/15550488?noredirect=1#comment22037226_15550488</title>

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map-canvas { width:600px; height:500px }
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">
    var MSU;
    var map;
    var BusRouteButton = document.getElementById('Add-Bus-Route');

    var arrRoutes = [
        {
            name : "Mustang",
            color : "#660000",
            route : [
                 new google.maps.LatLng(33.87528, -98.51848),
                 new google.maps.LatLng(33.87045, -98.51856),
                 new google.maps.LatLng(33.86926, -98.51844),
                 new google.maps.LatLng(33.86666, -98.51833),
                 new google.maps.LatLng(33.86503, -98.51849),
                 new google.maps.LatLng(33.87529, -98.52366),
                 new google.maps.LatLng(33.87524, -98.52195),
                 new google.maps.LatLng(33.87521, -98.52026),
                 new google.maps.LatLng(33.87528, -98.51848)
            ],
            stops : [
                [33.87262, -98.51856],
                [33.86503, -98.51849],
                 [33.87529, -98.52366]
            ],
            markers : []
        },
        {
            name : "Foobar",
            color : "#000066",
            route : [
                 new google.maps.LatLng(33.87528, -98.51848),
                 new google.maps.LatLng(33.87524, -98.52195),
                 new google.maps.LatLng(33.86926, -98.51844),
                 new google.maps.LatLng(33.87184, -98.52376)
            ],
            stops : [
                [33.87528, -98.51848],
                [33.87184, -98.52376]
            ],
            markers : []
        }
    ];

    function initialize() {
        MSU = new google.maps.LatLng(33.87356, -98.52130);
        var mapOptions = {
            center: MSU,
            zoom: 16,
            zoomControl: true,
            mapTypeControl: false,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

        // lets add the data from the array to the page!  I'm going to use jQuery's append for this, you could also use document.write if you aren't using it
        for (var i = 0; i < arrRoutes.length; i++) {
            $('#category').append(
                '<option value="' + i + '">' + arrRoutes[i].name + '</option>'
            );
        }
    }


    function BusRouteMarkers() {
            // what's the currently selected category?
            var intRoute = $('#category').val();

            for (var i = 0; i < arrRoutes.length; i++) {
                // better get rid of any previous polylines first
                if (arrRoutes[i].polyline) {
                    arrRoutes[i].polyline.setMap(null);
                }

                // ditto for any previous markers
                for (var j = 0; j < arrRoutes[i].markers.length; j++) {         
                    arrRoutes[i].markers[j].setMap(null);
                }
            }

            // add this polyline to the array for reference later
            arrRoutes[intRoute].polyline = new google.maps.Polyline({
                 path: arrRoutes[intRoute].route,
                 strokeColor: arrRoutes[intRoute].color,
                 strokeOpacity: 1.0,
                 strokeWeight: 4,
                map: map
            });


            for (var i = 0; i < arrRoutes[intRoute].stops.length; i++) {
                arrRoutes[intRoute].markers.push(
                    new google.maps.Marker({ 
                        position: new google.maps.LatLng(
                            arrRoutes[intRoute].stops[i][0], 
                            arrRoutes[intRoute].stops[i][1]
                        ), 
                        map: map 
                    })
                );
            }
    }

    google.maps.event.addDomListener(window, 'load', initialize);
</script>

</head>
<body>
<div id="map-canvas"></div>

<button id="Add-Bus-Route" onClick="BusRouteMarkers()">click me</button>

<select id="category">
</select>

</body>
</html>

人口普及清除Google地图

1 个答案: