谷歌位置服务附近搜索结果基于正确的地图中心的位置
Location based on correct map center for Google Place Service Nearby Search results
此代码成功地获取了从自动完成字段传递的localStorage位置id变量(可以单击"映射它"并在roadtripsharing.com上显示的弹出窗口中输入一个位置进行测试),并创建了一个标记、信息窗口和圆圈。我包含了一个默认位置{lat:39,lng:-105},以防用户在不使用任何localStorage的情况下直接访问页面。然而,即使我从主页上把东西存储在本地存储器中,出现的地方(在本例中是ATM机)都集中在美国科罗拉多斯普林斯,即{lat:39,lng:-105}。
我相信在宣布的时候
var request = {
location: mapit.getCenter(),
radius: 5000,
// query: 'atm'
types: ['atm']
};
mapit.getCenter()应为results[0].geometry.location(基于主页传递的localStorage Place ID的标记位置)。如何使Place Service附近搜索结果使用此作为位置,而不是始终使用{lat:39,lng:-105}?
function initMapIt() {
var mapit = new google.maps.Map(document.getElementById('mapitmap'), {
center: {lat: 39, lng: -105},
zoom: 11,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var rtscircle = new google.maps.Circle({
radius:document.getElementById("rtsfader").value*1609.34,
strokeWeight: 2,
strokeColor: "blue",
strokeOpacity: 0.9,
fillColor: "red",
fillOpacity: 0.15,
clickable: false,
map: mapit
});
if (localStorage.placetopass !== null){
var rtsgeocoder = new google.maps.Geocoder;
var newplace = localStorage.getItem('placetopass');
rtsgeocoder.geocode({'placeId': newplace}, function(results, status) {
if (status === google.maps.GeocoderStatus.OK) {
if (results[0]) {
mapit.setZoom(11);
mapit.setCenter(results[0].geometry.location);
var rtsmarker = new google.maps.Marker({
map: mapit,
position: results[0].geometry.location
});
var rtsinfowindow = new google.maps.InfoWindow;
rtsinfowindow.setContent(results[0].formatted_address+'<p><a href="http://roadtripsharing.com/rate-place">Rate this place?</a></p>');
rtsinfowindow.open(mapit, rtsmarker);
rtsmarker.addListener('click', function() {
rtsinfowindow.open(mapit, rtsmarker);
});
rtscircle.setCenter(results[0].geometry.location);
jQuery("#rtsfader").change(function(){
rtscircle.setRadius(document.getElementById("rtsfader").value*1609.34);
});
}
else {
rtscircle.setCenter({lat: 39, lng: -105});
}
} else {
rtscircle.setCenter({lat: 39, lng: -105});
}
});
document.getElementById("rts-aahs").play();
}
var request = {
location: mapit.getCenter(),
radius: 5000,
// query: 'atm'
types: ['atm']
};
var infowindow = new google.maps.InfoWindow();
var service = new google.maps.places.PlacesService(mapit);
service.nearbySearch(request, callback);
function callback(results, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length; i++) {
createMarker(results[i]);
console.log(results[i]);
}
}
else
alert("Status not OK");
}
function createMarker(place) {
// alert("createMarker function");
var placeLoc = place.geometry.location;
var marker = new google.maps.Marker({
map: mapit,
position: place.geometry.location
});
console.log(marker);
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(place.name);
infowindow.open(mapit, this);
});
}
}
问题是在调用mapit.setCenter(results[0].geometry.location)
之前调用mapit.getCenter()
。发生这种情况是因为您在rtsgeocoder.geocode(...)
的回调中更新了映射中心,但在继续执行nearbySearch
之前,您不会等待它运行。您可以通过在getCenter
/setCenter
调用之前添加几个console.log
调用并观察它们发生的顺序来轻松验证这一点。
要解决此问题,您可以尝试以下方法之一:
- 在调用
getCenter
(以及基于它的nearbySearch
)之前,等待rtsgeocoder.geocode
运行其回调的某个截止日期(例如2秒)。这不是很健壮,例如,慢速网络链接可能意味着它需要2秒以上的时间,同时你没有标记可以显示给用户 - 从
rtsgeocoder.geocode
回调中调用nearbySearch
,也可以立即调用,甚至每次更改地图中心时都可以调用。因为在地图上添加大量标记会消耗内存并减慢页面速度,所以在获得新标记时,您可能需要删除旧标记。例如,保留createMarker
函数添加的标记数组,并对每个标记调用marker.setMap(null)
我认为选项2通常是更好的选择。
相关文章:
- 谷歌地图固定位置覆盖
- 在谷歌地图上绘制位置数据库
- 使用ASP.NET将谷歌地图添加到项目中,并从数据库中检索位置
- PHP谷歌地图-位置红色气球没有显示
- 谷歌地图laravel上圆圈的错误位置
- 如何获取yandex地图上点击的位置标记的id
- 点击href在谷歌地图中加载位置
- 谷歌位置服务附近搜索结果基于正确的地图中心的位置
- 使用谷歌地图API和phonegap显示当前位置+方向
- 如何在Simile展品地图中显示位置
- 谷歌地图API标记没有标记我的位置
- 在TWebBrowser(谷歌地图)中显示位置,而无需单击按钮
- 如何使用谷歌地图中的纬度和经度搜索附近的位置
- 谷歌地图点击链接/选项卡更改标记位置地图
- 使用下拉框中的选择更改HTML5中的地理位置地图
- 如何显示两列值,当我选择位置地图时
- 将显示更改默认位置地图
- 地理位置地图 JS.
- 如何从谷歌位置/地图获得更多结果
- 默认为地理位置地图