Question

我创建了用于选择地点类型的单选按钮like this。例如，如果我单击“餐厅”，则标记仅显示餐厅位置。然后，如果我点击Pharmacy，它将仅显示带有标记的药房位置。我尝试过使用jQuery，但它不起作用。那我该怎么做？谢谢

我在这里提供HTML和JS供参考。

HTML：

<div class="place-types">
    <input class="with-gap" name="type" type="radio" id="lodging" value="lodging" />
    <label for="lodging">Lodging</label>
</div>
<div class="place-types">
    <input class="with-gap" name="type" type="radio" id="restaurant" value="restaurant" />
    <label for="restaurant">Restaurant</label>
</div>
<div class="place-types">
    <input class="with-gap" name="type" type="pharmacy" id="pharmacy"  value="pharmacy"/>
    <label for="apotik">Pharmacy</label>
</div>
<div class="place-types">
    <input class="with-gap" name="type" type="radio" id="ds"  value="department_store" />
    <label for="ds">Department Store</label>
</div>

<div id="hotels" style="height: 400px; width: 100%;"></div>

JS：

var center = {lat: 30.42130899999999, lng: -87.2169149};
var hotel = new google.maps.Map(document.getElementById('hotels'), {
        center: center,
        disableDefaultUI: true,
        zoom: 17
    });

var request = {
            placeId: placeId,
            location: center,
            radius: '500',
            // Type
            types: ['lodging']
        };

service.nearbySearch(request, callback);

    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 createMarker(place) {
        var placeLoc = place.geometry.location;
        var marker = new google.maps.Marker({
            map: hotel,
            title: place.name,
            position: place.geometry.location
        });

Answer 1

我看不到您制作的jquery代码以及它看起来如何，但是在这里你可以使用下面的版本来完成与你相同的事情：

var map; // initialize
var center = { // centering maps
    lat: 30.42130899999999,
    lng: -87.2169149
};
var markers = []; // store created markes

// init map
function initMap() {    

   map = new google.maps.Map(document.getElementById('map'), {
      center: center,
      zoom: 15
   });        
   // at here we call user defined function
   // for searching nearby places as default value
   callService( map, 'lodging');    
}

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

function createMarker(place) {
   var placeLoc = place.geometry.location;
   var marker = new google.maps.Marker({
      map: map,
      position: place.geometry.location
   });    
   markers.push(marker);
}
// user defined function to search for places
function callService( map, place) {
   var service = new google.maps.places.PlacesService(map);
   service.nearbySearch({
      location: center,
      radius: 500,
      type: [place]
   }, callback);
}
// clearing marker for each updated places
// if we didnt make this, then all the previous marker
// still showing up on maps
function clearMarker() {
  for( var i = 0; i < markers.length; i++ ) {
     markers[i].setMap(null);
  }
}

$( function () {
   // click handler for each radio button
   $('.place-types :radio').click( function () {        
       var plc = $( this ).val();
       // clear the marker on maps
       clearMarker();
       // updating marker
       callService( map, plc);
   });

});

正在使用 Demo

使用单选按钮更新标记和位置类型 - Google地方

1 个答案: