如何自定義在附近地方搜索結果中返回的結果，Google Maps JS API V3

我對Google Maps API和JS還比較陌生，所以這可能（可能）有一個簡單的答案。如何自定義在附近地方搜索結果中返回的結果，Google Maps JS API V3

我現在正在返回從我的位置設置的某個半徑範圍內的所有地點，但我想要更具體一些，比如只有植物苗圃，加油站和健身房，並且只顯示這些標記。

很抱歉的長碼塊，這裏是一個JSBin如果你願意 https://jsbin.com/yodolexece/edit?html,js,output

在此先感謝。

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>Locator</title> 

    <script type="text/javascript"  
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBdodiLO598_RD8_NYXK7nBKNA9Fhx_uBQ&libraries=places,geometry&.js"></script> 

    <script 
     src="https://code.jquery.com/jquery-3.1.1.js" 
     integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" 
     crossorigin="anonymous"></script> 
    </head> 
    <body> 
     <input id="findMe" type="button" value="find closest place"> 
     <div id="map-canvas" style="height:500px;"></div> 
    </body> 
    </body> 
    </html>

JS：

<script> 
jQuery(function($) { 
var $overlay = $('.overlay'), 
    resize = true, 
    map; 
var service; 
var marker = []; 
var pos; 
var infowindow; 
var placeLoc 

function initialize() { 
    var mapOptions = { 
    zoom: 15 
    }; 
    map = new google.maps.Map(document.getElementById('map-canvas'), 
    mapOptions); 

    // Try HTML5 geolocation 
    if (navigator.geolocation) { 
    navigator.geolocation.getCurrentPosition(function(position) { 
     var pos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); 
     $('#findMe').data('pos', pos); 
     var request = { 
     location: pos, 
     radius: 1000, 
     }; 
     infowindow = new google.maps.InfoWindow(); 
     var service = new google.maps.places.PlacesService(map); 
     service.nearbySearch(request, callback); 
     infowindow = new google.maps.InfoWindow({ 
     map: map, 
     position: pos, 
     content: 'You Are Here' 
     }); 
     map.setCenter(pos); 
    }, function() { 
     handleNoGeolocation(true); 
    }); 
    } else { 
    // Browser doesn't support Geolocation 
    handleNoGeolocation(false); 
    } 

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

function createMarker(place) { 
    placeLoc = place.geometry.location; 
    var marker = new google.maps.Marker({ 
    map: map, 
    type: ['store'], 
    position: place.geometry.location, 
    icon: { 
     path: google.maps.SymbolPath.CIRCLE, 
     scale: 8, 
     fillColor: '00a14b', 
     fillOpacity: 0.3, 
     fillStroke: '00a14b', 
     strokeWeight: 4, 
     strokeOpacity: 0.7 
    }, 
    }); 
    google.maps.event.addListener(marker, 'click', function() { 
    infowindow.setContent(place.name); 
    infowindow.open(map, this); 
    }); 
    return marker; 
} 

function handleNoGeolocation(errorFlag) { 
    if (errorFlag) { 
    var content = 'Error: The Geolocation service failed.'; 
    } else { 
    var content = 'Error: Your browser doesn\'t support geolocation.'; 
    } 

    var options = { 
    map: map, 
    position: new google.maps.LatLng(60, 105), 
    content: content 
    }; 
    var infowindow = new google.maps.InfoWindow(options); 
    map.setCenter(options.position); 
} 
google.maps.event.addDomListener(window, 'load', initialize); 

$('#show').click(function() { 
    $overlay.show(); 
    if (resize) { 
    google.maps.event.trigger(map, 'resize'); 
    resize = false; 
    } 
}); 

$('.overlay-bg').click(function() { 
    $overlay.hide(); 
}); 

$("#findMe").click(function() { 
    var pos = $(this).data('pos'), 
    markers = $(this).data('markers'), 
    closest; 
    if (!pos || !markers) { 
    alert('pos or markers not set yet'); 
    return; 
    } 
    $.each(markers, function() { 
    var distance = google.maps.geometry.spherical.computeDistanceBetween(this.getPosition(), pos); 
    if (!closest || closest.distance > distance) { 
     closest = { 
     marker: this, 
     distance: distance 
     } 
    } 
    }); 
    if (closest) { 
    google.maps.event.trigger(closest.marker, 'click') 
    } 
}); 
}); 
</script>

來源

2016-10-30 Devin Norgarb

它很簡單。您需要傳遞需要編輯請求的類型數組，並使用稱爲要篩選的類型的新屬性。防爆類型：「銀行」，「健身房」]

代碼塊下面，我將連接你的JS斌

JS Bin

地方類型的修改版本可以從下面

的鏈接找到

Place Types

谷歌Places API的文檔 - developers.google.com/maps/documentation/javascript/places#place_search_requests

var request = { 
      location: pos, 
      radius: 1000, 
      types: ['bank', 'gym'] 
      }; 
      infowindow = new google.maps.InfoWindow(); 
      var service = new google.maps.places.PlacesService(map); 
      service.nearbySearch(request, callback);

來源

2016-10-30 10:27:56

我不能夠感謝你，認爲這很容易，但是這很容易。你做了我的週末。 –

沒問題。很高興能幫到你 –

如何自定義在附近地方搜索結果中返回的結果，Google Maps JS API V3

回答

相關問題