谷歌地图API地理位置文本搜索地点详细信息
Google Maps API Geolocation Text Search Place Details
我使用谷歌地图api地理位置通过latlng获取用户位置,然后使用该位置在该区域周围搜索"高尔夫"位置。现在,我想从这个基本的地图/标记视图中前进,以便在用户单击特定的地图标记时提供位置详细信息。问题是当我点击标记时没有任何响应。我觉得我是一个变量,但真的需要一些帮助来确定为什么细节&infowindo点击失败?
我还看到谷歌正在使用placeID来返回详细信息?但不确定这是否适用于地图API细节请求。
提前感谢您的帮助。
function success(position) {
var s = document.querySelector('#status');
if (s.className == 'success') {
// not sure why we're hitting this twice in FF, I think it's to do with a cached result coming back
return;
}
s.innerHTML = "found you!";
s.className = 'success';
var mapcanvas = document.createElement('div');
mapcanvas.id = 'mapcanvas';
mapcanvas.style.height = '400px';
mapcanvas.style.width = '560px';
document.querySelector('article').appendChild(mapcanvas);
var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var myOptions = {
zoom: 10,
center: latlng,
mapTypeControl: false,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL
},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("mapcanvas"), myOptions);
var service;
var infowindow;
var request = {
location: latlng,
radius: '3200',
query: 'golf'
};
infowindow = new google.maps.InfoWindow();
service = new google.maps.places.PlacesService(map);
service.textSearch(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].geometry.location);
}
}
}
function createMarker(position) {
new google.maps.Marker({
position: position,
map: map
});
}
var request = { reference: position.reference };
service.getDetails(request, function(details, status) {
marker.addListener(marker, 'click', function() {
infowindow.setContent(details.name);
infowindow.open(map, this);
});
});
}
function error(msg) {
var s = document.querySelector('#status');
s.innerHTML = typeof msg == 'string' ? msg : "failed";
s.className = 'fail';
}
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(success, error);
} else {
error('not supported');
}
html, body, #mapcanvas {
height: 400px;
width: 400px;
margin: 0px;
padding: 0px
}
<article>
<p>Finding your location: <span id="status">checking...</span>
</p>
</article>
我在这里看到了两个可能的问题:
var request = { reference: position.reference };
service.getDetails(request, function(details, status) {
- 这里,
position
是LatLng
,它不具有reference
属性。所以您的getDetails
呼叫失败 - 传递给
getDetails
的回调函数会忽略status
,因此您永远不会注意到它报告的任何错误
综合起来,这就是为什么什么都没发生。
修复:将整个PlaceResult
(即results[i]
,而不是results[i].geometry.location
)传递给createMarker
,这样您就可以访问位置和位置ID。
顺便说一句:不赞成使用reference
。请改用placeId
。
相关文章:
- 使用jQuery重置文本,同时存在AJAX调用
- 我可以重置文本输入而不清除它吗
- Ng模型在AngularJS中重置文本区域后未更新
- 在 JavaScript 中重置文本区域高度
- 阻止按钮重置文本框值
- 阻止重置文本区域
- 通过搜索 td 文本获取嵌套表 ID
- jquery移动字符串搜索页面文本
- 页面搜索和文本框自动填充与javascript在Tampermonkey
- 搜索HTML文本区域中给定的单词,并用JavaScript在字符串中突出显示它们
- 输入后重置文本区域
- Extjs组合框在存储区未加载任何结果时保持重置文本值
- 使用javascript和html5存储搜索大量文本
- 使用javascript重置文本框密码
- 通过php/html/javascript等控制浏览器的搜索栏文本
- 在body html中搜索某些文本的最佳方法是什么?
- 如何使用javascript在服务器端文件中搜索特定文本
- 如何搜索包含文本的值
- 通过搜索查找文本并高亮显示错误
- 当提交按钮时,Javascript没有重置文本框中的内容