如何为 Google 地点自动完成添加位置偏差:Javascript API
How do I add location biasing to Google Places Autocomplete: Javascript API
我有一个地方自动填充字段,我用它来让用户提供位置。自动完成表格正在工作,但它并没有像我想要的那样偏向位置。我有以下代码:
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&location=53.2910591,-6.1823276&radius=5000&key=AIzaSyC8sJYstB5U0fi8UdiHHAlG4tHVDuX_e-o
我想用我的代码来完成这个,但我在这里做错了。
看看他们文档中的这一部分:google places autocomplete location biasing。您可以利用 strictbounds
和 components
参数。
如果这不能让您更接近您想要完成的目标,post link 一个带有您示例的 CodeSandbox,我可以帮助您解决问题。
干杯!
在做了一些调查工作之后,这就是我想出的。
似乎除非您在 DOM 上显示地图(如果您不想看到它,可以将其放置在视线之外),否则这将无法正常工作。
这里是 an example I found on JSFiddle
//片段
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 39.742347, lng: -104.941121}, //Denver, CO
zoom: 12
});
并且 here's my CodeSandbox example 使用您的沙箱和上面示例中的一些指针。
一种选择是使用 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>
我有一个地方自动填充字段,我用它来让用户提供位置。自动完成表格正在工作,但它并没有像我想要的那样偏向位置。我有以下代码:
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&location=53.2910591,-6.1823276&radius=5000&key=AIzaSyC8sJYstB5U0fi8UdiHHAlG4tHVDuX_e-o
我想用我的代码来完成这个,但我在这里做错了。
看看他们文档中的这一部分:google places autocomplete location biasing。您可以利用 strictbounds
和 components
参数。
如果这不能让您更接近您想要完成的目标,post link 一个带有您示例的 CodeSandbox,我可以帮助您解决问题。
干杯!
在做了一些调查工作之后,这就是我想出的。 似乎除非您在 DOM 上显示地图(如果您不想看到它,可以将其放置在视线之外),否则这将无法正常工作。 这里是 an example I found on JSFiddle
//片段
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 39.742347, lng: -104.941121}, //Denver, CO
zoom: 12
});
并且 here's my CodeSandbox example 使用您的沙箱和上面示例中的一些指针。
一种选择是使用 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>