google-maps - Google マップの入力と消去

Question

基本的な地図を作成するための Google Maps API v3 チュートリアルに従いました。最初にマップを宣言してから、人々が選択した「カテゴリ」に基づいてポイントを追加できるようにする方法を見つけようとしています。また、各選択の間にマップをクリアする方法を見つけようとしています。

score 0 · Accepted Answer

カテゴリのフォームフィールドを用意します。それを変更すると、マップからすべてのマーカーをクリアし、そのカテゴリにいくつかのマーカーを追加する JS 関数がトリガーされます。これまでに試したコードで質問を拡張すると、この回答を拡張できます。

マーカーをクリアするには、それぞれで使用marker.setMap(null);します (マーカーをすべてクリアする API 関数はありません)。

おそらく、各マーカーのデータ (少なくとも lat/lng 値) を含むカテゴリの JS 配列または連想配列も必要になるでしょう。これにより、関数が簡単になります。

わかりました、これが実用的な解決策です（簡潔にするためにマーカーなどの量を減らしました）。

<!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-maps - Google マップの入力と消去

1 に答える 1

Related

Reference