谷歌地图API的地理位置+雷达地点搜寻 [英] Google maps API geolocation + radar places search
问题描述
我试图同时使用地理位置和地方从谷歌地图API来与我身边最近的地方显示的地图(我的位置)。这两个例子单独工作,却不能在一起。
谁能告诉我为什么有问题呢?我会覆盖另一个地图或做别的事情了?
<脚本类型=文/ JavaScript的
SRC =https://maps.googleapis.com/maps/api/js?v=3.exp&key=AIzaSyA93l5zPyIvGB7oYGqzLSk28r5XuIs2Do8
&放大器;传感器=真放;库=地方>< / SCRIPT> <脚本>
VAR地图;
VAR服务;
VAR标记;
VAR POS;
函数初始化(){ VAR的MapOptions = {
变焦:15
};
地图=新google.maps.Map(的document.getElementById('地图画布'),
的MapOptions); //尝试HTML5地理定位
如果(navigator.geolocation){
navigator.geolocation.getCurrentPosition(功能(位置){
POS =新google.maps.LatLng(position.coords.latitude,
position.coords.longitude);
VAR信息窗口=新google.maps.InfoWindow({
地图:地图,
位置:POS机,
内容:位于
}); map.setCenter(POS)
},函数(){
handleNoGeolocation(真);
});
}其他{
//浏览器不支持的Geolocation
handleNoGeolocation(假);
} VAR请求= {
位置:POS机,
半径:500,
类型:'商店']
}; 信息窗口=新google.maps.InfoWindow();
VAR的服务=新google.maps.places.PlacesService(图)
service.nearbySearch(请求,回调); 回调函数(结果状态){
如果(状态== google.maps.places.PlacesServiceStatus.OK){
对于(VAR I = 0; I< results.length;我++){
createMarker(结果[I]);
}
}
}
}功能createMarker(地方){
VAR placeLoc = place.geometry.location;
VAR的标记=新google.maps.Marker({
地图:地图,
位置:place.geometry.location
}); google.maps.event.addListener(标记,'点击',功能(){
infowindow.setContent(place.name);
infowindow.open(地图,这一点);
});
}功能handleNoGeolocation(errorFlag){
如果(errorFlag){
VAR内容='错误:地理定位服务失败。;
}其他{
VAR内容='错误:您的浏览器没有按\\'吨支持地理位置'。
} VAR的选择= {
地图:地图,
位置:新google.maps.LatLng(60,105)
内容:内容
}; VAR信息窗口=新google.maps.InfoWindow(选件);
map.setCenter(options.position);
}google.maps.event.addDomListener(窗口'负荷',初始化);
< / SCRIPT>
的修改的
现在移动code,所以它看起来像 - 没有固定位置的问题是不确定的。
如果(navigator.geolocation){
navigator.geolocation.getCurrentPosition(功能(位置){ VAR请求= {
位置:POS机,
半径:500,
类型:'商店']
}; 信息窗口=新google.maps.InfoWindow();
VAR的服务=新google.maps.places.PlacesService(图)
service.nearbySearch(请求,回调);
POS =新google.maps.LatLng(position.coords.latitude,
position.coords.longitude);
VAR信息窗口=新google.maps.InfoWindow({
地图:地图,
位置:POS机,
内容:位于
}); map.setCenter(POS)
},函数(){
handleNoGeolocation(真);
});'
到 navigator.geolocation.getCurrentPosition()
并立即返回,请求位置
属性未定义。来电
service.nearbySearch(请求,回调);
抱怨位置丢失。而由于 POS
未设置在那一刻,这是真的。
您必须移动code的这一部分:
VAR请求= {
位置:POS机,
半径:500,
类型:'商店']
}; 信息窗口=新google.maps.InfoWindow();
VAR的服务=新google.maps.places.PlacesService(图)
service.nearbySearch(请求,回调);
到
navigator.geolocation.getCurrentPosition(功能(位置){
...
map.setCenter(POS)
和使变量信息窗口
全球
这是改变初始化()
功能:
VAR地图;
VAR服务;
VAR标记;
VAR POS;
VAR信息窗口;
函数初始化(){ VAR的MapOptions = {
变焦:15
}; 地图=新google.maps.Map(的document.getElementById('地图画布')的MapOptions);
的console.log(图) //尝试HTML5地理定位
如果(navigator.geolocation){
navigator.geolocation.getCurrentPosition(功能(位置){
POS =新google.maps.LatLng(position.coords.latitude,
position.coords.longitude); 信息窗口=新google.maps.InfoWindow({
地图:地图,
位置:POS机,
内容:位于
}); map.setCenter(POS) VAR请求= {
位置:POS机,
半径:500,
类型:'商店']
}; 信息窗口=新google.maps.InfoWindow();
VAR的服务=新google.maps.places.PlacesService(图)
service.nearbySearch(请求,回调);
},函数(){
handleNoGeolocation(真);
});
}其他{
//浏览器不支持的Geolocation
handleNoGeolocation(假);
} 回调函数(结果状态){
如果(状态== google.maps.places.PlacesServiceStatus.OK){
对于(VAR I = 0; I< results.length;我++){
的console.log(后/到createMarker');
createMarker(结果[I]);
}
}
}
}
I am trying to use both Geolocation and Places from the google maps API to display a map (at my location) with the nearest places around me. The two examples work seperately but not together.
Can anyone tell me why there is a problem with this? am I overwriting the map with another or doing something else wrong?
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?v=3.exp&key=AIzaSyA93l5zPyIvGB7oYGqzLSk28r5XuIs2Do8
&sensor=true&libraries=places"></script>
<script>
var map;
var service;
var marker;
var pos;
function initialize() {
var mapOptions = {
zoom: 15
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
// Try HTML5 geolocation
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
pos = new google.maps.LatLng(position.coords.latitude,
position.coords.longitude);
var infowindow = new google.maps.InfoWindow({
map: map,
position: pos,
content: 'Located'
});
map.setCenter(pos);
}, function() {
handleNoGeolocation(true);
});
} else {
// Browser doesn't support Geolocation
handleNoGeolocation(false);
}
var request = {
location:pos,
radius:500,
types: ['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 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);
});
}
function handleNoGeolocation(errorFlag) {
if (errorFlag) {
var content = 'Error: The Geolocation service failed.';
} else {
var content = 'Error: Your browser doesn\'t support geolocation.';
}
var options = {
map: map,
position: new google.maps.LatLng(60, 105),
content: content
};
var infowindow = new google.maps.InfoWindow(options);
map.setCenter(options.position);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
EDIT
Moved the code now so it looks like - Has not fixed the problem of location being undefined.
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var request = {
location:pos,
radius:500,
types: ['store']
};
infowindow = new google.maps.InfoWindow();
var service = new google.maps.places.PlacesService(map);
service.nearbySearch(request,callback);
pos = new google.maps.LatLng(position.coords.latitude,
position.coords.longitude);
var infowindow = new google.maps.InfoWindow({
map: map,
position: pos,
content: 'Located'
});
map.setCenter(pos);
}, function() {
handleNoGeolocation(true);
});'
Because of async call to navigator.geolocation.getCurrentPosition()
which returns immediately, location
property of request is undefined. Call to
service.nearbySearch(request,callback);
complains that location is missing. And that is true because pos
is not set at that moment.
You have to move this part of code:
var request = {
location:pos,
radius:500,
types: ['store']
};
infowindow = new google.maps.InfoWindow();
var service = new google.maps.places.PlacesService(map);
service.nearbySearch(request,callback);
to
navigator.geolocation.getCurrentPosition(function(position) {
...
map.setCenter(pos);
and make variable infoWindow
global.
This is changed initialize()
function:
var map;
var service;
var marker;
var pos;
var infowindow;
function initialize() {
var mapOptions = {
zoom: 15
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
console.log(map);
// Try HTML5 geolocation
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
pos = new google.maps.LatLng(position.coords.latitude,
position.coords.longitude);
infowindow = new google.maps.InfoWindow({
map: map,
position: pos,
content: 'Located'
});
map.setCenter(pos);
var request = {
location:pos,
radius:500,
types: ['store']
};
infowindow = new google.maps.InfoWindow();
var service = new google.maps.places.PlacesService(map);
service.nearbySearch(request,callback);
}, function() {
handleNoGeolocation(true);
});
} else {
// Browser doesn't support Geolocation
handleNoGeolocation(false);
}
function callback(results, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length; i++) {
console.log('after / to createMarker');
createMarker(results[i]);
}
}
}
}
这篇关于谷歌地图API的地理位置+雷达地点搜寻的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!