4

私は JavaScript を初めて使用しますが、この問題に 2 日間夢中になり、私と同じ問題を抱えている人を見つけることができません。

マップ上のすべてのマーカーを非表示にするボタンを追加しようとしています (最終的には、カテゴリ別にマーカーを非表示にするようにしたいのですが、現時点ではすべてのマーカーを非表示にします) Google のコードを使用しています開発者のウェブサイト。

これが私のコードです

var map;
var service;
var infowindow;

function initialize() {
  var pyrmont = new google.maps.LatLng(49.2755189938682, -123.1185996613159);

  map = new google.maps.Map(document.getElementById('map'), {
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    center: pyrmont,
    zoom: 17
  });

  var request = {
    location: pyrmont,
    radius: '500',
    types: ['atm','bus_station','parking']
  };

  infowindow = new google.maps.InfoWindow();
  service = new google.maps.places.PlacesService(map);
  service.nearbySearch(request, callback);
  TestMarker();
}

function callback(results, status) {
  if (status == google.maps.places.PlacesServiceStatus.OK) {
    for (var i = 0; i < results.length; i++) {
      var place = results[i];
      createMarker(results[i]);
    }
  }
}

function TestMarker() {
       CentralPark = new google.maps.LatLng(49.2755189938682, -123.1185996613159);
       addMarker(CentralPark);
}

function addMarker(location) {
    marker = new google.maps.Marker({
        position: location,
        map: map,
        icon: "http://maps.google.com/mapfiles/ms/micons/POI.png",
        title: 'Sues Party, Idaburn Salon' 
    });
}

function createMarker(place) {

    var iconType = {};
    iconType['atm'] = "http://maps.google.com/mapfiles/ms/micons/dollar.png";
    iconType['bus_station'] =     "http://maps.google.com/mapfiles/ms/micons/bus.png";
    //iconType['restaurant'] = "http://maps.google.com/mapfiles/ms/micons/restaurant.png";
    iconType['parking'] = "http://maps.google.com/mapfiles/ms/micons/parkinglot.png";
    var placeLoc = place.geometry.location;
    var marker = new google.maps.Marker({
      map: map,
      icon: iconType[place.types[0]],
      position: place.geometry.location
    });

    google.maps.event.addListener(marker, 'click', function() {
      infowindow.setContent(place.name);
      infowindow.open(map, this);
    });
  }

  google.maps.event.addDomListener(window, 'load', initialize);

を呼び出すボタンを追加しましたfunctionが、問題は配列からレコードを取得していると思います。本当に立ち往生しています。どんな助けでも大歓迎です。それを機能させるために何をする必要があるかについてのアドバイスも

ジェームズ

4

2 に答える 2

3

ジェームズ。このコードを試してください：

<html>
  <head>
    <title></title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&v=3&libraries=adsense,places"></script>
    <script type="text/javascript">
      var map;
      var service;
      var infowindow;
      var markers = [];

      function initialize() {
        var pyrmont = new google.maps.LatLng(49.2755189938682, -123.1185996613159);

        map = new google.maps.Map(document.getElementById('map'), {
          mapTypeId : google.maps.MapTypeId.ROADMAP,
          center : pyrmont,
          zoom : 17
        });

        var request = {
          location : pyrmont,
          radius : '500',
          types : ['atm', 'bus_station', 'parking']
        };
        infowindow = new google.maps.InfoWindow();
        service = new google.maps.places.PlacesService(map);
        service.nearbySearch(request, callback);
        TestMarker();

        var removeBtn = document.getElementById("removeBtn");
        google.maps.event.addDomListener(removeBtn, "click", onRemoveBtn_Clicked);
      }

      function onRemoveBtn_Clicked() {
        var i;
        for (i = 0; i < markers.length; i++) {
          markers[i].setMap(null);
        }
      }

      function callback(results, status) {
        if (status == google.maps.places.PlacesServiceStatus.OK) {
          for (var i = 0; i < results.length; i++) {
            var place = results[i];
            markers.push(createMarker(results[i]));
          }
        }
      }

      function TestMarker() {
        CentralPark = new google.maps.LatLng(49.2755189938682, -123.1185996613159);
        markers.push(addMarker(CentralPark));
      }

      function addMarker(location) {
        marker = new google.maps.Marker({
          position : location,
          map : map,
          icon : "http://maps.google.com/mapfiles/ms/micons/POI.png",
          title : 'Sues Party, Idaburn Salon'
        });
        return marker;
      }

      function createMarker(place) {
        var iconType = {};
        iconType['atm'] = "http://maps.google.com/mapfiles/ms/micons/dollar.png";
        iconType['bus_station'] = "http://maps.google.com/mapfiles/ms/micons/bus.png";
        //iconType['restaurant'] = "http://maps.google.com/mapfiles/ms/micons/restaurant.png";
        iconType['parking'] = "http://maps.google.com/mapfiles/ms/micons/parkinglot.png";
        var placeLoc = place.geometry.location;
        var marker = new google.maps.Marker({
          map : map,
          icon : iconType[place.types[0]],
          position : place.geometry.location
        });

        google.maps.event.addListener(marker, 'click', function() {
          infowindow.setContent(place.name);
          infowindow.open(map, this);
        });

        return marker;
      }


      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
    <style type="text/css">
      code.prettyprint {
        display: block;
        border: 1px solid #ccc;
        margin-bottom: 1em;
      }
      #map {
        width: 100%;
        height: 500px;
        margin: 0;
      }

    </style>
  </head>
  <body>
    <input type="button" id="removeBtn" value="Remove all markers" />
    <div id="map"></div>
  </body>
</html>
于 2012-11-20T02:30:32.447 に答える
1

すべてのマーカーを保存するためのグローバル変数を作成するだけです。結果から1つずつ追加すると、すべてを表示/非表示にできます。例えば：

<script type="text/javascript">

    var markers = [];

    function HideAllMarkers() {
        for (var i = 0; i < markers.length; i++) {
           markers[i].setMap(null);
        }
    }

    function callback(results, status) {
        if (status == google.maps.places.PlacesServiceStatus.OK) {
            for (var i = 0; i < results.length; i++) {
                var place = results[i];
                createMarker(results[i],i);
            }
        }
    }

    function createMarker(place, index) {
        var iconType = {};
        iconType['atm'] = "http://maps.google.com/mapfiles/ms/micons/dollar.png";
        iconType['bus_station'] = "http://maps.google.com/mapfiles/ms/micons/bus.png";
        //iconType['restaurant'] = "http://maps.google.com/mapfiles/ms/micons/restaurant.png";
        iconType['parking'] = "http://maps.google.com/mapfiles/ms/micons/parkinglot.png";
        var placeLoc = place.geometry.location;
        markers[index] = new google.maps.Marker({
            map: map,
            icon: iconType[place.types[0]],
            position: place.geometry.location
        });

        google.maps.event.addListener(marker, 'click', function () {
            infowindow.setContent(place.name);
            infowindow.open(map, this);
        });
    }
</script>

すべてのマーカーを表示する場合は、次の手順を実行する必要があります。

<script type="text/javascript">
    function ShowAllMarkers() {
        for (var i = 0; i < markers.length; i++) {
            markers[i].setMap(map);
        }
    }
</script>
于 2012-11-20T02:42:36.963 に答える