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

我是JavaScript新手，但这个问题已经让我疯狂了两天，我无法找到与我的问题相同的任何人。谷歌地图API，隐藏/显示标记

我想添加一个按钮来隐藏我的地图上的所有标记（最终我想让它按照类别隐藏标记，但隐藏所有标记的时候会做）我正在使用来自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，但我认为这个问题是从阵列中获得的记录。真的卡住了，非常感谢任何帮助。即使我需要什么建议怎样做才能得到它的工作

詹姆斯

来源

2012-11-20 jamesteague

詹姆斯。试试这个代码：

<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-20 02:30:32 wf9a5m75

好极了，谢谢你这么多的帮助 – jamesteague

你所需要做的就是创建一个全局变量来保存所有的标记。从结果中逐个添加它们，您可以全部显示/隐藏它们。例如：

<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-20 02:42:36 Adit

再次超的帮助，谢谢一堆。 – jamesteague

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

回答

相关问题