Jquery 谷歌地图API，隐藏/显示标记_Jquery_Google Maps Api 3_Google Maps Markers

Jquery 谷歌地图API，隐藏/显示标记

jquery google-maps-api-3

Jquery 谷歌地图API，隐藏/显示标记,jquery,google-maps-api-3,google-maps-markers,Jquery,Google Maps Api 3,Google Maps Markers,我是JavaScript新手，但这个问题已经让我疯狂了两天，我找不到任何人有和我一样的问题我试图添加一个按钮来隐藏我地图上的所有标记（最终我想按类别隐藏标记，但暂时隐藏所有标记就可以了），我使用的是谷歌开发者网站上的代码这是我的密码 var map; var service; var infowindow; function initialize() { var pyrmont = new google.maps.LatLng(49.2755189938682, -123.118599

我是JavaScript新手，但这个问题已经让我疯狂了两天，我找不到任何人有和我一样的问题

我试图添加一个按钮来隐藏我地图上的所有标记（最终我想按类别隐藏标记，但暂时隐藏所有标记就可以了），我使用的是谷歌开发者网站上的代码

这是我的密码

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

var映射；
var服务；
var信息窗口；
函数初始化（）{
var pyrmont=new google.maps.LatLng（49.2755189938682，-123.1185996613159）；
map=new google.maps.map（document.getElementById（'map'）{
mapTypeId:google.maps.mapTypeId.ROADMAP，
中心：皮尔蒙特，
缩放：17
});
var请求={
地点：皮尔蒙特，
半径：'500'，
类型：['atm'，'bus_station'，'parking']
};
infowindow=new google.maps.infowindow（）；
服务=新的google.maps.places.PlacesService（地图）；
服务.nearbySearch（请求、回调）；
TestMarker（）；
}
函数回调（结果、状态）{
if（status==google.maps.places.PlacesServiceStatus.OK）{
对于（var i=0；i



我添加了一个按钮来调用函数
，但我认为问题在于从数组中获取记录。真的卡住了，非常感谢您的帮助。甚至是关于我需要做什么才能让它工作的建议
詹姆斯
詹姆斯。请尝试以下代码：
<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>


var映射；
var服务；
var信息窗口；
var标记=[]；
函数初始化（）{
var pyrmont=new google.maps.LatLng（49.2755189938682，-123.1185996613159）；
map=new google.maps.map（document.getElementById（'map'）{
mapTypeId:google.maps.mapTypeId.ROADMAP，
中心：皮尔蒙特，
缩放：17
});
var请求={
地点：皮尔蒙特，
半径：'500'，
类型：[“atm”、“公交车站”、“停车场”]
};
infowindow=new google.maps.infowindow（）；
服务=新的google.maps.places.PlacesService（地图）；
服务.nearbySearch（请求、回调）；
TestMarker（）；
var removeBtn=document.getElementById（“removeBtn”）；
google.maps.event.addDomListener（removeBtn，“单击”，onRemoveBtn_单击）；
}
函数onRemoveBtn_Clicked（）{
var i；
对于（i=0；i您只需创建一个全局变量来保存所有标记。从结果中逐个添加它们，您可以显示/隐藏它们。
例如：
<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>


var标记=[]；
函数hidealmarkers（）{
对于（var i=0；i<script type="text/javascript">
    function ShowAllMarkers() {
        for (var i = 0; i < markers.length; i++) {
            markers[i].setMap(map);
        }
    }
</script>