如何将位置偏移添加到Google Places自动完成:Javascript API

Question

我有一个位置自动完成字段，用于让用户指定位置。自动完成表单正在工作，但它并没有像我想要的那样偏移位置。我有以下代码：

function activatePlacesSearch() {
var input = document.getElementById('project-location-input');
var location = {lat: 53.2910591, lng: -6.1823276};
var radius = 1000;
var autocomplete = new google.maps.places.Autocomplete(input, location, radius);
google.maps.event.addListener(autocomplete, 'place_changed', function(e) {
const place = autocomplete.getPlace();
lat = place.geometry.location.lat();
lng = place.geometry.location.lng();
// draw the map
document.getElementById('new-project-map-div').style.display = 'block'
var map = new google.maps.Map(document.getElementById('new-project-map-div'), {
zoom: 15,
center: new google.maps.LatLng(lat, lng),
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
streetViewControl: false,
fullscreenControl:false,
disableDefaultUI: true,
});
// Set marker position
var myMarker = new google.maps.Marker({
position: new google.maps.LatLng(lat, lng),
draggable: false
});

map.setCenter(myMarker.position);
myMarker.setMap(map);
});
}

我知道您可以按照以下方式进行查询，并且它是有效的：https://maps.googleapis.com/maps/api/place/autocomplete/xml?input=20&位置=53.2910591，-61823276&半径＝5000&key=AIzaSyC8sJYstB5U0fi8UdiHHAlG4tHVDuX_e-o

我想用我的代码来实现这一点，但我在这里做了一些错误的事情。

Answer 1

一个选项是使用AutocompleteOption.bounds。如果你只知道一个位置和半径，你可以创建一个圆圈并在上面调用getBounds(没有记录在案的方法可以用位置和半径来偏移javascript自动补全)。

var location = {lat: 53.2910591, lng: -6.1823276};
var radius = 1000;
var circle = new google.maps.Circle({
center: location,
radius: radius
});
var autocomplete = new google.maps.places.Autocomplete(input, {
bounds: circle.getBounds()
});

概念验证小提琴

代码片段：

// This example requires the Places library. Include the libraries=places
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">
function activatePlacesSearch() {
var input = document.getElementById('project-location-input');
var location = {lat: 53.2910591, lng: -6.1823276};
var radius = 1000;
var circle = new google.maps.Circle({
center: location,
radius: radius
});
var autocomplete = new google.maps.places.Autocomplete(input, {bounds: circle.getBounds()});
google.maps.event.addListener(autocomplete, 'place_changed', function(e) {
const place = autocomplete.getPlace();
console.log(place);
lat = place.geometry.location.lat();
lng = place.geometry.location.lng();
// draw the map
document.getElementById('new-project-map-div').style.display = 'block'
var map = new google.maps.Map(document.getElementById('new-project-map-div'), {
zoom: 15,
center: new google.maps.LatLng(lat, lng),
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
streetViewControl: false,
fullscreenControl:false,
disableDefaultUI: true,
});
// Set marker position
var myMarker = new google.maps.Marker({
position: new google.maps.LatLng(lat, lng),
draggable: false
});
map.setCenter(myMarker.position);
myMarker.setMap(map);
});
}

/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#new-project-map-div {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}

<div class="pac-card" id="pac-card">
<div id="pac-container">
<input id="project-location-input" type="text"
placeholder="Enter a location">
</div>
</div>
<div id="new-project-map-div"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=places&callback=activatePlacesSearch"
async defer></script>

Answer 2

看看他们文档中的这一部分：谷歌放置自动完成位置偏移。您可以利用strictbounds和components参数。

如果这并不能让你更接近你想要实现的目标，那么发布一个链接到CodeSandbox并附上你的例子，我可以帮你弄清楚。

干杯！

Answer 3

在做了一些调查工作后，我得出了以下结论。似乎除非你在DOM上显示地图(如果你不想看到它，它可能会被定位在视线之外)，否则这是不正确的。这是我在JSFiddle 上找到的一个例子

//摘录

var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 39.742347, lng: -104.941121}, //Denver, CO
zoom: 12
});

这是我的CodeSandbox示例，使用您的沙箱和上面示例中的一些指针。