0
我正在使用谷歌地圖api地理位置來通過latlng獲取用戶位置，然後使用此位置對該地區周圍的「高爾夫」位置進行文本搜索。現在我想從這個基本地圖/標記視圖前進，以提供用戶點擊特定地圖標記時的地點詳情。問題是當我點擊標記沒有迴應。我覺得我是一個變量，但可以真正使用一些幫助確定爲什麼infowindo的細節&無法顯示在點擊？谷歌地圖API地理位置文本搜索地點詳細信息
我也看到谷歌正在使用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'
};
\t \t
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>