首先,我刚开始使用JavaScript,所以我并不是很擅长。我正在使用Google Maps Places API制作一个应用程序,您可以在其中按一个按钮并获取您的位置,按另一个按钮并根据您的位置获取附近的位置(例如商店或酒吧)。获取设备的位置有效,但我的代码未显示附近的位置。它确实转到了该位置,但未显示附近地点的标记。我不知道出了什么问题,但是我认为这可能与标记的代码或代码序列有关。
我正在使用Intel XDK(HTML5 + Cordova和App Designer)和Google Maps Places API。现在,当按下一个按钮(ID为“ myloc-btn”)时,一切都会发生,但是(如果位置和附近的地方都起作用),我想将它们分成两个按钮,一个用于显示位置,另一个用于显示附近的地方。
以下是我的JavaScript代码。我已经注释掉了我最初拥有的设备的位置标记,因为我认为它可能会妨碍附近位置的标记。
有人知道怎么了或可以帮助我吗?
提前致谢!
-更新-
我尝试从Google Maps文档(https://developers.google.com/maps/documentation/javascript/examples/place-search)中搜索具有指定位置的附近地点(基本上我已经复制并粘贴了代码),但这也不起作用。同样,它会转到正确的位置,但不会显示任何标记。我在模拟器和手机上都尝试过,但是结果都一样。我不知道为什么标记不显示
var map;
var service;
var infoWindow;
var pos;
var marker = [];
//var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
//var labelIndex = 0;
function register_event_handlers() {
$(document).on("click", "#myloc-btn", function(evt) {
initMap();
});
function initMap() {
map = new google.maps.Map(document.getElementById('gmap'), {zoom: 14});
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
//addMarker(pos, map);
map.setCenter(pos);
}, function() {
handleLocationError(true, infoWindow, map.getCenter());
});
} else {
// Browser doesn't support Geolocation
handleLocationError(false, infoWindow, map.getCenter());
}
var request = {
location: pos,
radius: 5000,
type: ['store']
};
infowindow = new google.maps.InfoWindow();
var service = new google.maps.places.PlacesService(map);
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]);
}
}
}
}
}
function handleLocationError(browserHasGeolocation, infoWindow, pos) {
infoWindow.setPosition(pos);
infoWindow.setContent(browserHasGeolocation ?
'Error: The Geolocation service failed.' :
'Error: Your browser doesn\'t support geolocation.');
}
/*
function addMarker(location, map) {
var marker = new google.maps.Marker({
map: map,
// Define the place with a location, a query string and a label.
place: {
location: location,
query: 'This is my location'
},
label: labels[labelIndex++ % labels.length],
});
// Construct a new InfoWindow.
var infoWindow = new google.maps.InfoWindow({
content: 'Here I am!'
});
// Opens the InfoWindow when marker is clicked.
marker.addListener('click', function() {
infoWindow.open(map, marker);
});
}
*/
function createMarker(place) {
var placeLoc = place.geometry.location;
var marker = new google.maps.Marker({
map: map,
position: place.geometry.location
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(place.name);
infowindow.open(map, this);
});
}
document.addEventListener("app.Ready", register_event_handlers, false);
})();
最佳答案
在提供给getCurrentPosition()
的回调中,您正在设置pos
。但是,在电话确定位置后,即在将来的某个随机点,将调用此回调。您尝试在pos
中的位置上使用该request
很久之后。您需要将位置代码移至其自己的函数中,然后在将地图居中后在传递map
和pos
的同时进行调用。几乎完全与addMarker()
相同。
关于javascript - 附近的地方Google Maps Places API,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/41883253/